iDEAL | Wero の決済中に銀行口座の詳細を保存する

iDEAL | Wero での決済から顧客の IBAN 銀行口座の詳細を保存する方法をご紹介します。

注意

支払い中に支払いの詳細を保存するためのガイドに従うことをお勧めします。すでに Elements との連携が完了している場合は、Payment Element 移行ガイドをご覧ください。

iDEAL | Wero (旧 iDEAL) はオランダで普及している 1 回限りの決済手段であり、顧客は決済の認証を求められます。顧客は iDEAL | Wero で決済します。WebView にリダイレクトされ、決済をオーソリすると、アプリに戻されます。そこで、決済が成功したか失敗したかに関する即時の通知が届きます。

iDEAL | Wero を使用して、顧客の IBAN 銀行口座の詳細を SEPA ダイレクトデビットPaymentMethod に保存することもできます。その後、SEPA ダイレクトデビット PaymentMethod を使用して決済を受け付けるか、サブスクリプションを設定できます。これにより、顧客は IBAN を再度入力する必要がなくなるため、手間が軽減されます。また、検証済みの名前と検証済みの IBAN も届きます。

注意

iDEAL | Wero を使用して SEPA ダイレクトデビット決済を設定するには、ダッシュボードで SEPA ダイレクトデビットを有効にする必要があります。また、iDEAL 利用規約と SEPA ダイレクトデビット利用規約に準拠する必要があります。

Elements

モバイル

iDEAL | Wero での決済の受け付けは、決済を追跡するための PaymentIntent オブジェクトの作成、決済手段の詳細と同意書の承認の収集、および決済を処理するための Stripe への送信で構成されます。Stripe は PaymentIntent を使用して、決済が完了するまでの決済の状態をすべてトラックおよび処理します。最初の iDEAL | Wero PaymentIntent から収集された SEPA ダイレクトデビット PaymentMethod の ID を使用して、以降の決済を作成します。

Stripe を設定する
サーバー側

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

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

Customer を作成する
サーバー側

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

PaymentIntent を作成する
サーバー側

サーバーで PaymentIntent を作成し、徴収する金額、eur 通貨、顧客 ID、および今後の使用設定の引数として off_session を指定します。最小決済金額はなく、iDEAL | Wero は他の通貨に対応しません。既存の Payment Intents API の組み込みがある場合は、決済手段タイプのリストに ideal を追加してください。

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/clover/stripe.js"></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'
);

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 に支払いを送信する
クライアント側

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

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`.
  }
});

メモ

stripe.confirmPayment の完了には数秒かかる場合があります。この間、フォームを再送信することがないように無効化し、スピナーのような待機中の印を表示します。エラーが発生した場合は、それを顧客に表示し、フォームを再度有効化し、待機中の印を非表示にします。支払いを完了するために顧客による認証などの追加の手順が必要な場合は、Stripe.js がそのプロセスをステップごとに顧客に提示します。

支払いが成功した場合、カードは Customer オブジェクトに保存されます。この内容は、PaymentMethod の customer フィールドに反映されます。この時点で、Customer オブジェクトの ID を独自の内部的な顧客の表記 (設定している場合) に関連付けます。これにより、今後は顧客に再度支払いの詳細を求めずに、保存した PaymentMethod オブジェクトを使用して顧客から支払いを回収できます。

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;
  }
});

後日 SEPA ダイレクトデビット PaymentMethod に請求する

顧客に再度請求する必要がある場合は、新しい PaymentIntent を作成します。以前の PaymentIntent を取得し、 payment_method_details 内に generated_sepa_debit ID がある latest_charge フィールドを展開して、SEPA ダイレクトデビットの決済手段の ID を見つけます。

SEPA ダイレクトデビットの決済手段 ID は、レスポンス内の payment_method_details にある generated_sepa_debit ID になります。

{
  "latest_charge": {
    "payment_method_details": {
      "ideal": {
        "bank": "ing",
        "bic": "INGBNL2A",
        "iban_last4": "****",
        "generated_sepa_debit": "pm_1GrddXGf98efjktuBIi3ag7aJQ",
        "verified_name": "JENNY ROSEN"
      },
      "type": "ideal"
    },
  },
  "payment_method_options": {
    "ideal": {}

SEPA ダイレクトデビットと顧客 ID を使用して PaymentIntent を作成します。

構築したシステムをテストする

テスト API キーを使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。

Authorize test payment (テスト支払いをオーソリする) をクリックして、支払い成功のケースをテストします。PaymentIntent が requires_action から succeeded に変わります。
Fail test payment (テスト支払いを失敗させる) をクリックして、認証失敗のケースをテストします。PaymentIntent が requires_action から requires_payment_method に変わります。

SEPA ダイレクトデビット組み込みのテスト

payment_method.billing_details.email を以下のいずれかの値に設定して、PaymentIntent のステータス遷移をテストしてください。任意のテキストとアンダースコアをメールアドレスの前に追加することもできます。例えば、test_1_generatedSepaDebitIntentsFail@example.com を使用すると、PaymentIntent で使用した際に必ず失敗する SEPA ダイレクトデビットの PaymentMethodになります。

メールアドレス	説明
`generatedSepaDebitIntentsSucceed@example.com`	`PaymentIntent` のステータスが `processing` から `succeeded` に遷移します。
`generatedSepaDebitIntentsSucceedDelayed@example.com`	`PaymentIntent` のステータスが 3 分後に `processing` から `succeeded` に遷移します。
`generatedSepaDebitIntentsFail@example.com`	`PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移します。
`generatedSepaDebitIntentsFailDelayed@example.com`	`PaymentIntent` のステータスが 3 分後に `processing` から `requires_payment_method` に遷移します。
`generatedSepaDebitIntentsSucceedDisputed@example.com`	`PaymentIntent` のステータスが `processing` から `succeeded` に遷移しますが、不審請求の申し立てがすぐに作成されます。
`generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com`	`PaymentIntent` のステータスが `processing` から `requires_payment_method` に遷移し、`insufficient_funds` のエラーコードが返されます。

オプション支払い後のイベントを処理する

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

クライアントからのコールバックを待つのではなく、これらのイベントをリッスンします。クライアント側では、コールバックが実行される前に顧客がブラウザーのウィンドウを閉じたり、アプリを終了したりする可能性があります。また、悪意を持つクライアントがレスポンスを不正操作する恐れもあります。非同期型のイベントをリッスンするよう構築済みのシステムを設定することで、これ以降はより多くの決済手段を簡単に受け付けられるようになります。サポートされているすべての決済手段の違いをご確認ください。

イベントを受信し、ビジネスアクションを実行する

ビジネスアクションを受信して実行するためのいくつかのオプションがあります。

手動

Stripe ダッシュボードは、すべての Stripe での支払いの確認、メール領収書の送信、入金処理、または失敗した支払いの再試行に使用できます。

ダッシュボードでテスト支払いを確認する

カスタムコード

Webhook ハンドラを作成してイベントをリッスンし、非同期型のカスタムの支払いフローを作成します。Stripe CLI を使用して、ローカルで Webhook 組み込みのテストとデバッグを行います。

Build a custom webhook

事前構築のアプリ

オートメーションやマーケティングとセールスなどの一般的なビジネスイベントを、パートナーアプリケーションとの連携によって処理します。

オプションiDEAL | Wero リダイレクトの手動処理

iDEAL | Wero のリダイレクトと決済を confirmIdealPayment で処理するには、Stripe.js を使用することをお勧めします。ただし、サーバーで決済を完了し、顧客を手動でリダイレクトすることもできます。

決済手段の詳細を収集したら、stripe.createPaymentMethod を呼び出して PaymentMethod を作成します。

const paymentMethod = await stripe.createPaymentMethod({
  type: 'ideal',
  billing_details: {
    name: accountholderName.value,
  },
});

サーバーで PaymentIntent と PaymentMethod ID を確認し、支払い完了後に顧客をリダイレクトする return_url を指定します。

PaymentIntent のステータスが requires_action であり、next_action が redirect_to_url であることを確認します。

{
  "next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "ideal": {
          "bank": "ing",
          "bic": "INGBNL2A",

next_action プロパティに指定されている URL に顧客をリダイレクトします。これで、顧客は認証して支払いを完了できます。
```
const action = intent.next_action;
if (action && action.type === 'redirect_to_url') {
  window.location = action.redirect_to_url.url;
}
```
顧客は支払いを完了すると、return_url にリダイレクトされます。この URL には、クエリパラメーター payment_intent および payment_intent_client_secret が含まれています。上記のように独自のクエリパラメーターを追加することもできます。