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

Payment Element にカスタムの決済手段を追加します。

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

カスタムの決済手段を設定するには、Stripe ダッシュボードでカスタムの決済手段を作成し、Payment Element にも表示される表示名とアイコンを指定します。Stripe ダッシュボードでは、50 種類以上あるプリセットの決済手段を利用できます。決済手段を作成したら、以下のガイドに従って Payment Element を設定します。カスタムの決済手段を使用した取引は Stripe の外部で処理および確定されるため、Payment Element を設定する場合、追加の作業が必要です。

注

サードパーティーの決済代行業者と連携する場合、PSP との取り決めや適用法など、法的要件に準拠する責任を負います。

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

はじめに

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

ダッシュボードでカスタムの決済手段を作成する
ダッシュボード

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

適切なロゴを選択

透明な背景のロゴを提供する場合は、ページの 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 が読み込まれると、カスタムの決済手段が表示されます。

PM Name というカスタムの決済手段を示すStripe Payment Element。

オプション埋め込みカスタムコンテンツを表示する
プレビュー
クライアント側

embedded customPaymentMethod を使用して、Payment Element のコンテキスト内にコンテンツを表示します。埋め込みコンテンツを使用することで、カスタムの支払いフォームロジックを Payment Element UI に実装できます。

PM Name というカスタム決済手段を示し、カスタムコンテンツがフォームコンテナーにオーバーレイされた Stripe Payment Element。

埋め込み機能を使用するには、type: 'embedded' を使用してカスタムの支払い方法を追加します。カスタムコンテンツを管理する際は、次の 2 つのコールバックを使用してください。

handleRender: handleRender は、決済手段が選択されたときに呼び出されます。このフックには、コンテンツをレンダリングできるコンテナ DOM ノードへの参照が含まれています。
(オプション) handleDestroy: handleDestroy フックは、支払い方法の選択が解除されたとき、および Payment Element がマウント解除されたときに呼び出されます。これを使用して、イベントリスナーやカスタム SDK の削除などのクリーンアップを実行します。

セキュリティのヒント

handleEmbed によって提供される container 内でのみ、信頼できるコンテンツをレンダリングすることが可能です。制御下にないマークアップをレンダリングする場合、特にユーザーやサニタイズされていないソースからクロスサイトスクリプティングの脆弱性 (XSS)を持ち込んでしまうリスクがあります。

React Portals などのツールを使用すると、レンダリングロジックをアプリケーションコードに実装できます。

checkout.js
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

export default function App() {
  const [embedContainer, setEmbedContainer] = useState();

  const options = {
    customPaymentMethods: [
      {
        id: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
        options: {
          type: 'embedded',
          subtitle: 'Embedded payment method',
          embedded: {
            handleRender: (container) => {
              setEmbedContainer(container);
            },
            handleDestroy: () => {
              setEmbedContainer(null);
            }
          }
        }
      }
    ]
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutFormWithPaymentElement />
      {embedContainer && createPortal(<EmbeddedCpmContent />, embedContainer)}
    </Elements>
  );
};

決済手段の送信を処理
クライアント側

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

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

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

オプションカスタムの決済手段の順序を指定
クライアント側

デフォルトでは、Payment Element はカスタムの決済手段を最後に表示します。決済手段の順序を手動で指定するには、Payment Element インスタンスを作成するときに、オプション設定で paymentMethodOrder プロパティを設定します。

checkout.js
const paymentElement = elements.create('payment', {
  // an array of payment method types, including custom payment method types
  paymentMethodOrder: [...]
});

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

Payment Element にカスタムの決済手段を追加します。

注

はじめに

ダッシュボードでカスタムの決済手段を作成するダッシュボード

適切なロゴを選択

Stripe の Elements 設定にカスタムの決済手段タイプを追加クライアント側

オプション埋め込みカスタムコンテンツを表示するプレビュークライアント側