カスタムの決済手段を追加する

Stripe の Payment Element lを使用すると、ユーザーは一度の導入でさまざまな決済手段による支払いが可能になります。Stripe で処理されない追加の決済手段を表示する必要がある場合は、カスタムの決済手段を使用します。カスタムの決済手段を使用している場合は、オプションで、Stripe 以外で処理された購入を Stripe アカウントに記録して、レポート作成に利用できます。

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Payment Element also displays. The Stripe Dashboard also provides access to over 50 preset custom payment methods. After you create the payment method, follow the guide below to configure the Payment Element. Setting up the Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

このガイドでは、インテントを作成する前に支払いの詳細を収集するガイドから HTML または JS の例を使用してカスタムの決済手段を追加します。

はじめに

1. Stripe アカウントを作成するかサインインします。
2. インテントを作成する前に支払いの詳細を収集するガイドに従って決済機能の導入を完了します。
3. 次に、指定するカスタムの決済手段ごとに、以下のステップに従います。

適切なロゴを選択

• 透明な背景のロゴを提供する場合は、ページの Payment Element の背景色を考慮して、それが目立つようにしてください。
• 背景の色が入ったロゴを指定する場合、丸い角は指定されません。ファイルに含めてください。
• 16 ピクセル x 16 ピクセルに拡大縮小できるロゴのバリアントを選択します。多くの場合、これはブランドのスタンドアロンのロゴマークです。

カスタムの決済手段を作成すると、ステップ 2 で必要なカスタムの決済手段の ID (cpmt_ で始まる) がダッシュボードに表示されます。

Stripe の Elements 設定にカスタムの決済手段タイプを追加

クライアント側

Stripe Elements を初期化する checkout.js ファイルで、Payment Element に追加する customPaymentMethods を指定します。ステップ 1 の ID (cpmt_ で始まる) を指定するだけでなく、options.type とオプションの subtitle も指定できます。

checkout.js

const elements = stripe.elements({
  // ...
  customPaymentMethods: [
    {
      id: 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
      options: {
        type: 'static',
        subtitle: 'Optional subtitle',
      }
    }
  ]
});

Payment Element が読み込まれると、カスタムの決済手段が表示されます。

async function handleSubmit(e) {
  const { submitError, selectedPaymentMethod } = await elements.submit();

  if (selectedPaymentMethod === 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}') {
    // Process CPM payment on merchant server and handle redirect
    const res = await fetch("/process-cpm-payment", { method: 'post' });
    ...
  } else {
    // Process Stripe payment methods
    ...
  }
}