ダイレクト支払いを作成する

連結アカウントで直接支払いを作成し、手数料を回収します。

顧客が連結アカウントと直接取引を行うときに「ダイレクト支払い」を作成すると、多くの場合、顧客はプラットフォームの存在に気付きません。ダイレクト支払いの特徴は以下のとおりです。

支払いはプラットフォームのアカウントではなく、連結アカウントに支払いとして表示されます。
連結アカウントの残高は、支払いのたびに増加します。
アカウント残高は、支払いごとに発生するプラットフォーム手数料により増加します。

この支払いタイプは、SaaS (サービスとしてのソフトウェア) を提供するプラットフォームに最適です。たとえば、Shopify はオンラインストアフロントを構築するためのツールを提供し、Thinkific は教育者がオンラインコースを販売できるようにしています。

注

Stripe ダッシュボードの全機能にアクセスできる連結アカウントには、ダイレクト支払いを使用することをお勧めします。

ウェブ

iOS

Android

React Native

Stripe Elements を使用して、サイトに UI コンポーネントを埋め込むことでカスタムの決済システムを構築します。クライアント側とサーバー側のコードでさまざまな支払い方法を受け付ける決済フォームを構築します。この実装と、Stripe のその他の実装タイプとの比較をご覧ください。

リピートユーザーに対する Link のしくみを見るには、メールアドレス demo@stripe.com を入力してください。新規登録中の Link のしくみを見るには、他の任意のメールアドレスを入力し、フォームの残りの部分に入力してください。 Google Pay または Apple Pay ウォレットのいずれかが関連付けられた有効カードがある場合、このデモでは対応するウォレットのみが表示されます。

導入作業

コーディングが一部必須

接続方法のタイプ

カスタムの決済フローに UI コンポーネントを組み合わせる

UI のカスタマイズ

Appearance API による CSS レベルのカスタマイズ

まず、Stripe アカウントを登録します。

アプリケーションから Stripe API にアクセスするには、Stripe の公式ライブラリを使用します。

PaymentIntent を作成する
サーバー側

Stripe は PaymentIntent (支払いインテント) オブジェクトを使用して、顧客から支払いを回収する意図を示し、プロセス全体を通して請求の実施と支払い状態の変化を追跡します。

購入プロセスで顧客に表示される支払い方法は、PaymentIntent にも含まれています。Stripe によってダッシュボードの設定から支払い方法を自動的に取得することも、手動でリスト化することもできます。

貴社の構築済みのシステムで支払い方法の提供にコードベースのオプションを必要とする場合を除き、支払い方法を手動でリスト化しないでください。Stripe は通貨、支払い方法の制約、その他のパラメーターを評価し、対応可能な支払い方法のリストを決定します。購入完了率の上昇につながり、使用通貨と顧客の所在地に最も適した支払い方法を優先的に表示します。一方、優先度の低い支払い方法は、オーバーフローメニューに隠された状態になります。

サーバーで金額と通貨を指定して PaymentIntent を作成します。最新バージョンの API では、Stripe はデフォルトで機能を有効にしているため、automatic_payment_methods パラメーターの指定は必要ありません。支払い方法はダッシュボードで管理できます。Stripe は、取引の金額、通貨、決済フローなどの要素に基づいて、適切な支払い方法が返されるように処理します。

client secret を取得する

PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。

ブラウザーの fetch 関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。

その後、クライアント側で JavaScript を使用して client secret を取得します。

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

支払いの詳細を収集する
クライアント側

Payment Element を使用してクライアント側で支払い詳細を収集します。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の詳細の収集をシンプルにします。

Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。一部の支払い方法では、支払いを確定するために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。iframe を使用することを選び、Apple Pay または Google Pay を受け付けることを希望する場合、iframe で allow 属性を ="payment *" に設定する必要があります。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を http:// ではなく https:// にする必要があります。HTTPS を使用しなくてもシステムをテストできますが、本番環境で決済を受け付ける準備が整ったら、必ず、HTTPS を有効にしてください。

Stripe.js を設定する

Payment Element は Stripe.js の機能として自動的に使用できるようになります。決済ページに Stripe.js スクリプトを含めるには、HTML ファイルの head にスクリプトを追加します。常に js.stripe.com から Stripe.js を直接読み込むことにより、PCI 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

決済ページで以下の JavaScript を使用して、Stripe のインスタンスを作成します。

checkout.js
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'

});

Stripe Elements と Payment Element を決済ページに追加する

決済ページには Payment Element を配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Pay</button>
</form>

フォームが読み込まれたら、Payment Element のインスタンスを作成して、それを前のステップの client secret とともに、コンテナーの DOM ノードにマウントします。Elements インスタンスの作成時に、オプションとしてこの値を渡します。

client secret は支払いを完了できるため、慎重に扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩したりすることがないようにしてください。

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with the Appearance API
  appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form using the client secret
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

Payment Element によって動的なフォームが表示され、顧客が支払い方法を選択できるようになります。顧客が選択した支払い方法に必要なすべての支払い詳細が、フォームで自動的に収集されます。Elements オブジェクトを設定するときに、自社のサイトのデザインに合わせて Payment Element のデザインをカスタマイズできます。

Stripe に支払いを送信する
クライアント側

Payment Element からの詳細を指定して stripe.confirmPayment を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 return_url にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに return_url にリダイレクトします。

カード決済で支払いの完了後にリダイレクトを行わない場合は、redirect に if_required を設定できます。これで、リダイレクトベースの決済手段で購入する顧客のみがリダイレクトされます。

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

return_url が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を return_url にリダイレクトするときは、以下の URL クエリーパラメーターが指定されます。

パラメーター	説明
`payment_intent`	`PaymentIntent` の一意の識別子。
`payment_intent_client_secret`	`PaymentIntent` オブジェクトの client secret。

注意

顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに stripe.com ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。

クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。PaymentIntent のステータスを調べて、顧客に表示する内容を決定します。また、return_url を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

支払い後のイベントを処理する
サーバー側

支払いが完了すると、Stripe は payment_intent.succeeded イベントを送信します。ダッシュボードの Webhook ツールを使用するか Webhook のガイドに従ってこれらのイベントを受信し、顧客への注文確認メールの送信、データベースでの売上の記録、配送ワークフローの開始などのアクションを実行します。

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアントでは、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了する場合、また悪意を持つクライアントがレスポンスを不正操作する場合もあります。非同期型のイベントをリッスンするよう組み込みを設定すると、単一の組み込みで複数の異なるタイプの支払い方法を受け付けることができます。

Payment Element を使用して支払いを回収する場合は、payment_intent.succeeded イベントのほかにこれらのイベントを処理することをお勧めします。

イベント	説明	アクション
payment_intent.succeeded	顧客が正常に支払いを完了したときに送信されます。	顧客に注文の確定を送信し、顧客の注文のフルフィルメントを実行します。
payment_intent.processing	顧客が正常に支払いを開始したが、支払いがまだ完了していない場合に送信されます。このイベントは、多くの場合、顧客が口座引き落としを開始するときに送信されます。その後、`payment_intent.succeeded` イベント、また、失敗の場合は `payment_intent.payment_failed` イベントが送信されます。	顧客に注文確認メールを送信し、支払いが保留中であることを示します。デジタル商品では、支払いの完了を待たずに注文のフルフィルメントを行うことが必要になる場合があります。
payment_intent.payment_failed	顧客が支払いを試みたが、支払いに失敗する場合に送信されます。	支払いが `processing` から `payment_failed` に変わった場合は、顧客に再度支払いを試すように促します。

実装内容をテストする

カード番号	シナリオ	テスト方法
	カード支払いは成功し、認証は必要とされません。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	カード支払いには認証が必要です。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	カードは、`insufficient_funds` などの拒否コードで拒否されます。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。
	UnionPay カードは、13 ～ 19 桁の可変長です。	クレジットカード番号と、任意の有効期限、セキュリティコード、郵便番号を使用してクレジットカードフォームに入力します。

実装内容をテストするためのその他の情報については、テストをご覧ください。

オプションその他の支払い方法を有効にする

手数料を回収する

支払いが処理されると、プラットフォームはプラットフォーム手数料という形で取引金額の一部を受け取ることができます。プラットフォーム手数料の料金体系は、次の 2 つの方法で設定できます。

プラットフォームの料金設定ツールを使用して、料金設定ルールを設定してテストします。この Stripe ダッシュボードのノーコード機能は、現時点では Stripe 手数料の支払い責任を負うプラットフォームでのみ利用できます。
社内で料金ルールを設定し、プラットフォーム手数料を PaymentIntent で直接指定します。この方法で設定された手数料は、プラットフォーム料金設定ツールで指定された料金体系ロジックを上書きします。

プラットフォームは、以下の制限でプラットフォーム手数料を請求する場合があります。

application_fee_amount の値は正の値で、請求金額よりも小さくする必要があります。回収するプラットフォーム手数料は、キャプチャーされた支払い金額が上限になります。
プラットフォーム手数料自体に追加の Stripe 手数料はありません。
ブラジルの規制ならびに遵守要件に従い、ブラジルの連結アカウントが含まれ、ブラジル国外を拠点とするプラットフォームは、Stripe を通じてプラットフォーム手数料を回収することはできません。
application_fee_amount の通貨は、複数の通貨のいくつかの要素によって決まります。

その結果として生じる支払いの Balance Transaction (取引残高) には、Stripe 手数料とプラットフォーム手数料の両方の詳細な内訳が含まれます。レポート作成の操作性を高めるために、プラットフォーム手数料の回収後に、Application Fee (プラットフォーム手数料) が作成されます。プラットフォーム手数料オブジェクトの amount プロパティをレポート作成に使用します。これにより、Application Fee (プラットフォーム手数料) エンドポイントでこれらのオブジェクトにアクセスできるようになります。

獲得したプラットフォーム手数料は、通常の Stripe の支払いの売上と同じスケジュールでお客様の利用可能なアカウント残高に追加されます。プラットフォーム手数料は、ダッシュボードの手数料収入の合計セクションで確認できます。

注意

デフォルトでは、ダイレクト支払いのプラットフォーム手数料は非同期で作成されます。支払い作成リクエストで application_fee オブジェクトを拡張すると、リクエストの一部としてプラットフォーム手数料が同期的に作成されます。application_fee オブジェクトを拡張するとリクエストの遅延が増加するため、必要な場合に拡張してください。

非同期で作成されたプラットフォーム手数料に対するプラットフォーム手数料オブジェクトにアクセスするには、application_fee.created Webhook イベントをリッスンします。

手数料を含む売上のフロー

支払いに対するプラットフォーム手数料を指定すると、その手数料の金額がプラットフォームの Stripe アカウントに送金されます。連結アカウントで直接支払いを処理する場合、Stripe 手数料とプラットフォーム手数料を差し引いた支払い額が連結アカウントに入金されます。

たとえば、前の例のように、10 USD の支払いを作成し、そのプラットフォーム手数料が 1.23 USD の場合、1.23 USD がプラットフォームアカウントに送金されます。8.18 USD (10 USD - 0.59 USD - 1.23 USD) が連結アカウントでの手取り額となります (標準的なアメリカの Stripe 手数料を想定した場合)。

複数の通貨で支払いを処理する場合は、Connect でどのように通貨が処理されるかについてもご覧ください。

返金する

プラットフォームは連結アカウントに対して支払いを作成できるのと同様に、連結アカウントに対して支払いの返金を作成することもできます。連結アカウントとして認証済みの状態で、プラットフォームのシークレットキーを使用して返金を作成します。

返金する際に、プラットフォーム手数料は自動的に返金されません。プラットフォームはプラットフォーム手数料を明示的に返金する必要があります。そうしなければ、連結アカウント (支払いが作成されたアカウント) はその金額を失うことになります。返金リクエストで、以下のように refund_application_fee 値として true を渡すことによって、プラットフォーム手数料を返金できます。

デフォルトでは支払いの全額が返金されますが、amount 値を正の整数に設定することで、一部返金を作成することができます。支払いの全額が返金されることになった場合は、プラットフォーム手数料の全額が返金されます。そうでない場合は、プラットフォーム手数料の比例配分された部分が返金されます。別の方法として、refund_application_fee 値に false を指定し、別途プラットフォーム手数料を返金することもできます。

注