今後の PayTo 支払いのために同意書を保存する招待のみ

PayTo 支払いを回収して将来の支払いを承認する方法をご紹介します。

PayTo を使用すると、オーストラリアの顧客は 1 回限りおよび継続支払いに関する PayTo の同意書をバンキングアプリで認証できます。PayTo で支払う顧客は、保留中の契約リクエストに関する通知を受け取り、契約条件を承認してから、アプリに戻り、そこで支払いが成功したか失敗したかについて遅延通知を受け取ります。

将来の支払いに備えて PayTo の契約を設定することで、再度顧客に承認を求めることなく、将来の継続支払いを回収できるようになります。顧客はバンキングアプリで PayTo の同意書を表示、管理、一時停止、取り消すことができます。

注意

Stripe は顧客による PayTo の同意書の変更や一時停止に対応していません。顧客が契約を一時停止または変更しようとした場合、Stripe は契約を取り消して、mandate.updated Webhook をお客様に送信します。Webhook を受信した後で、顧客に連絡を取って契約を調整した理由を確認するとともに、新しい契約を設定できます。

PayTo 決済を受け付けるには、支払いを追跡するための PaymentIntent (支払いインテント) オブジェクトを作成して、決済手段に関する情報を収集し、処理のために Stripe に支払いを送信します。Stripe は、PaymentIntent を使用して、支払いが完了するまでの支払いの状態のすべてを追跡および処理します。以降の支払いの作成には、最初の PayTo PaymentIntent から収集された Mandate (同意書) の ID が使用されます。

注意

Stripe は、顧客の通貨、決済手段の制限、その他のパラメーターを評価して、決済手段オプションを自動的に提示します。決済を受け付けるの手順を使用して、Stripe ダッシュボードから決済手段を設定することをお勧めします。

引き続き、Checkout で顧客に提示する決済手段を手動で設定する場合は、このガイドを使用します。それ以外の場合は、ダッシュボードで決済手段を設定できるように、構築済みのシステムを更新してください。

Stripe を設定する
サーバー側

まず、Stripe アカウントが必要です。今すぐご登録ください。

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

顧客を作成する
サーバー側

顧客がビジネスでアカウントを作成したら、顧客を作成し、アカウントを表す内部表記と関連付けます。このようにすると、保存されている支払い方法の詳細を後で取得して使用することができます。

PaymentIntent を作成する
サーバー側

サーバーで PaymentIntent を作成し、回収する amount、aud 通貨、顧客 ID を指定し、setup future usage (今後の使用のための設定) の引数として off_session を指定します。最少請求金額は 0.50 AUD であり、PayTo は他の通貨に対応していません。既存の Payment Intents API の実装がある場合は、payto を payment method types (決済手段タイプ) のリストに追加します。

PayTo 決済手段オプションで、顧客に同意を求める契約条件を指定できます。

よくある間違い

支払い方法オプションの amount は PaymentIntent の amount と一致させる必要があります。ただし、amount_type を maximum に設定する場合は、PaymentIntent よりも大きい支払い方法オプションの金額を設定できます。

次のコードサンプルは、amount_type が maximum であるため、PaymentIntent の金額が 10 AUD で、支払い方法オプションの金額が 1,500 AUD であることを示しています。

Stripe はさまざまな種類の同意書に対応し、同意書の金額、期間、頻度、目的を管理できます。できる限り忠実に要件に一致する同意条件を指定します。これらの詳細な条件は承認時に顧客に表示されるため、正確にすることで購入完了率を向上できます。

ベータ

デフォルトの purpose は retail に設定されています。retail が契約の目的を正確に表していない場合は、有効値のいずれかを使用してこのフィールドを上書きします。

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 内に配置しないでください。

構築済みのシステムを機能させるには、決済ページのアドレスの先頭を 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/v3/"></script>
</head>

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

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  betas: 'payto_pm_beta_1',
});

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">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。Elements インスタンスを作成する際に、前のステップからの client secret を options に渡します。

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

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

stripe.confirmPayment を使用し、Payment Element からの詳細を指定して支払いを完了します。これにより、オーソリリクエストが買い手に送信されます。

注

顧客による支払いの承認を待っている間、stripe.confirmPayment の完了には数秒かかる場合があります。この間、フォームが再送信されないように無効化し、スピナーのような待機中のインジケーターを表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中のインジケーターを非表示にします。

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

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

  const {error, paymentIntent} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
    confirmParams: {
      mandate_data: {
        customer_acceptance: {
          type: 'online',
          online: {
            infer_from_client: true,
          },
        },
      }
    },
  });

  const message = document.querySelector('#message')
  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)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // payment fails asynchronously.
    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;
    }
  }
});

PayTo PaymentMethod に後で請求する

顧客に再び請求する必要が生じたときは、新しい PaymentIntent を作成します。同意書 ID、顧客 ID、決済手段 ID を確認するため、以前の PaymentIntent を取得し、latest_charge フィールドを拡張します。

以下のレスポンスで必要な ID を確認してください。

{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z", // <---- Here's the customer
  "latest_charge": {
    "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here's the payment method
    "payment_method_details": {
      "payto": {
        "bsb_number": null,
        "last4": null,
        "mandate": "mandate_1Ok4lVA8DuEjWaGwu0uTwI94", // <----- Here's the mandate
        "pay_id": "jenny@example.com"
      },
      "type": "payto"
    },
  },
  "payment_method_types": [
    "payto"
  ],
  // ...
}

PaymentMethod ID、同意書 ID、顧客 ID を指定して PaymentIntent を作成します。

実装内容をテストする

以下のさまざまなテスト用 PayID と銀行口座情報を使用して、テスト API キーで PayTo の実装内容をテストします。各セットによって、本番環境でシステムが直面する各種シナリオが再現されています。

PayID	説明

`{any_prefix}+succeed@{any_domain}`	PaymentIntent のステータスは、60 秒後に `requires_action` から `processing` に移行し、さらに 2 秒後に `succeeded` に移行します。同意書のステータスは `active` になります。
`{any_prefix}+decline@{any_domain}`	PaymentIntent のステータスは、60 秒後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードと `invalid_authorization` 拒否コードを返します。同意書のステータスは `inactive` になります。
`{any_prefix}+expire@{any_domain}`	PaymentIntent のステータスは、5 分後に `requires_action` から `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードと `generic_decline` 支払い拒否コードを返します。同意書のステータスは `inactive` になります。
`{any_prefix}+insufficient_funds@{any_domain}`	PaymentIntent のステータスは、60 秒後に `requires_action` から `processing` に移行し、さらに 2 秒後に `requires_payment_method` に移行します。Stripe は、`payment_method_provider_decline` エラーコードと `insufficient_funds` 支払い拒否コードを返します。同意書のステータスは `inactive` になります。
`{any_prefix}+revoke@{any_domain}`	PaymentIntent のステータスは、60 秒後に `requires_action` から `processing` に移行し、さらに 2 秒後に `succeeded` に移行します。同意書は `active` ステータスで始まり、5 分後に `inactive` ステータスに移行します。