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

設定 > Payments > Custom の決済手段に移動して、カスタムの決済手段のページにアクセスします。新しいカスタムの決済手段を作成し、Payment Element が表示する表示名とロゴを指定します。

適切なロゴを選択

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

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

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

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

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

ユーザーがウェブサイトの支払いボタンをクリックしたときに呼び出される handleSubmit 関数を更新して、カスタムの決済手段の取引が Stripe 以外で処理されるようにします。

elements.submit() 関数は、現在選択されている決済手段のタイプを取得します。選択した決済手段がカスタムの決済手段である場合は、それに応じて取引を処理します。たとえば、モーダルを表示してから自社のサーバーで支払いを処理したり、顧客を外部の支払いページにリダイレクトしたりできます。

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
    ...
  }
}