Stripeユニバーサル決済要素をカスタマイズする

Payment Elementsへの移行

以前にPayment Elementsの導入前にStripeインテグレーションをご利用されていた場合、“Elementsモード”という設定項目への一時的なアクセスをDownloads > Settings > Payments > Stripeで提供しています。アップデート後、ストアはCard Elementsのままとなり、Payment Elementsに切り替えることができるのは、チェックアウトが正常に機能することを確認した後になります。以下に、Payment Elementsのエクスペリエンスを最適化するために変更または削除が必要になる可能性のある、一般的なカスタマイズをいくつかご紹介します。

Elementsターゲットの‘id’属性を変更する

Elementsターゲットの‘id’属性を変更する
Easy Digital Downloadsの‘Card Elements’インテグレーションでは、idが‘edd-stripe-card-element’の<div>タグが必要でした。カスタマイズでは、このようになっている場合があります：

// Card Elements target div
<div id="edd-stripe-card-element" class="edd-stripe-card-element"></div>

新しいPayment Elementsは異なる‘id’属性を使用するため、この行を次のように変更する必要があります：

// Payment Elements target div
<div id="edd-stripe-payment-element"></div>
<p class="edds-field-spacer-shim"></p>

カード名フィールドは不要になりました

新しいPayment Elementにより、カード名フィールドは不要になりました。StripeのPayment Elementが、選択された支払い方法で名前が必要であることを検出した場合、名前を要求します。

スクリプトとスタイルの連結プラグイン

すべてのJavaScriptファイルまたはCSSファイルを結合するプラグインまたはリソースを使用していた場合、スクリプトを「再構築」することを確認してください。カード要素のJavaScriptとCSSスタイルが変更されているためです。

キャッシュプラグインまたはサービス

Payment Elementに切り替える際は、ページキャッシュ、オブジェクトキャッシュ、およびCloudflareのようなサービスを含む、あらゆるキャッシュをフラッシュして、適切なJavaScriptおよびCSSファイルがロードされていることを確認してください。

Easy Digital Downloads — Stripe 2.9では、より改善され、効率的で、カスタマイズ可能なチェックアウトエクスペリエンスを可能にするStripeのPayment Elementのサポートが追加されました。これは、Stripe Pro Gatewayのバージョン2.9以降を使用しているユーザーが利用できます。新規ユーザーは自動的にPayment Elementsを使用します。Stripeに接続済みの既存ユーザーは、準備ができたときにオプトインできるようになり、EDDチェックアウトに対するカスタマイズをローカルまたはステージング環境でテストする時間を確保できます。チェックアウトテンプレートをカスタマイズした場合は、レガシーCard ElementからPayment Elementへの移行について詳しく読むことをお勧めします。

Payment Elementsのフィルターはすべて、EDDコアのeasy-downloads/includes/gateways/stripe/includes/elements/payment-elements.phpにあります。完全なコードと特定のStripeドキュメントへのリンクについては、そちらを参照してください。

StripeのPayment Elementsで使用するカスタムフォントを登録する

Stripeを、Google FontsやAdobe Fontsのような外部フォントソースからのカスタムフォントを使用するように設定できます。これは2つのフィルターで行います：

add_filter( 'edds_stripe_payment_elements_fonts', 'prefix_add_google_font_stripe' );
/**
 * Registers a custom CSS source file for Stripe to use to render custom fonts.
 *
 * @param array $fonts
 * @return array
 */
function prefix_add_google_font_stripe( $fonts ) {
	$fonts[] = array(
		'cssSrc' => 'https://fonts.googleapis.com/css2?family=Gajraj+One',
	);

	return $fonts;
}

add_filter( 'edds_stripe_payment_elements_variables', 'prefix_add_custom_font_stripe_variables' );
/**
 * Add a custom font to the Stripe variables.
 *
 * @param array $variables
 * @return array
 */
function prefix_add_custom_font_stripe_variables( $variables ) {
	$variables['fontFamily'] = 'Gajraj One';

	return $variables;
}

Stripeの支払いフォームのあらゆる側面をカスタマイズするために、変数に追加できるさまざまなオプションがあります。たとえば、この簡単なフィルターを使用すると、フォームラベルをフォーム入力の上に表示するのではなく、入力内にfloatingさせることができます：

add_filter( 'edds_stripe_payment_elements_label_style', 'prefix_modify_stripe_label_style' );
/**
 * Changes the Stripe label style to floating.
 *
 * @return string
 */
function prefix_modify_stripe_label_style() {
	return 'floating';
}