コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成
サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つける
支払い方法
支払いインターフェイス
決済シナリオ
店頭支払い
他の Stripe プロダクト

注

このページはまだ日本語ではご利用いただけません。より多くの言語で文書が閲覧できるように現在取り組んでいます。準備が整い次第、翻訳版を提供いたしますので、もう少しお待ちください。

iDEAL での支払い中に銀行詳細を保存する

iDEAL での支払いから顧客の IBAN 銀行詳細を保存する方法をご紹介します。

ページをコピー

注意

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

iDEAL はオランダで普及している 1 回限りの使用の支払い方法であり、顧客は支払いの認証を求められます。iDEAL を使用して支払う場合、顧客は WebView にリダイレクトされ、支払いをオーソリすると、お客様のアプリに戻されます。ここで、お客様は支払いが成功したか失敗したかについて即時の通知を受け取ります。

iDEAL を使用して、顧客の IBAN 銀行詳細を SEPA ダイレクトデビット PaymentMethod に保存することもできます。保存した SEPA ダイレクトデビット PaymentMethod は、支払いの受け付けや、サブスクリプションの設定に使用できます。これにより、顧客が IBAN の入力を繰り返す必要がなくなるため、顧客の負担が軽減されます。また、確認済みの氏名と検証済みの IBAN も受け取ります。

注意

iDEAL を使用して SEPA ダイレクトデビットの支払いを設定するには、ダッシュボードで SEPA ダイレクトデビットを有効にする必要があります。さらに、iDEAL 利用規約および SEPA ダイレクトデビット利用規約に従う必要もあります。

iDEAL での支払いの受け付けは、支払いを追跡するための PaymentIntent (支払いインテント) オブジェクトの作成、支払い方法に関する情報と同意書承認の収集、および支払いを処理するための Stripe への送信で構成されます。Stripe は、PaymentIntent を使用して、支払いが完了するまでの支払いの状態のすべてを追跡して処理します。以降の支払いの作成には、最初の iDEAL PaymentIntent から収集された SEPA ダイレクトデビット PaymentMethod の ID が使用されます。

Stripe を設定する
サーバー側

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

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Customer を作成する
サーバー側

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

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

PaymentIntent を作成する
サーバー側

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

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}} \
  -d setup_future_usage=off_session

client secret を取得する

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

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

main.rb
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

その後、クライアント側で 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'
);

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_intentPaymentIntent の一意の識別子。
payment_intent_client_secretPaymentIntent オブジェクトの 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 を 取得し、latest_charge フィールドを展開して payment_method_details 内の generated_sepa_debit ID を探すことで、SEPA ダイレクトデビットの支払い方法の ID を見つけます。

Command Line
curl -G https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_charge

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 を作成します。

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

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

Use your test API keys to confirm the PaymentIntent. After confirming, you’re redirected to a test page with options to authorize or fail the payment.

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

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

payment_method.billing_details.emailを以下の値のいずれかに設定して PaymentMethod のステータスの移行をテストします。メールアドレスの先頭に独自のカスタムのテキストを含め、その後ろにアンダースコアを付けることができます。 たとえば、test_1_generatedSepaDebitIntentsFail@example.com は、PaymentIntent とともに使用された場合に常に失敗する、SEPA ダイレクトデビットの PaymentMethod です。

メールアドレス説明
generatedSepaDebitIntentsSucceed@example.comPaymentIntent のステータスは、processing から succeeded に移行します。
generatedSepaDebitIntentsSucceedDelayed@example.comThe PaymentIntent status transitions from processing to succeeded after at least three minutes.
generatedSepaDebitIntentsFail@example.comPaymentIntent のステータスは、processing から requires_payment_method に移行します。
generatedSepaDebitIntentsFailDelayed@example.comThe PaymentIntent status transitions from processing to requires_payment_method after at least three minutes.
generatedSepaDebitIntentsSucceedDisputed@example.comPaymentIntent のステータスは、processing から succeeded に移行しますが、すぐに不審請求の申請が作成されます。

参照情報

このページはお役に立ちましたか。
はいいいえ
お困りのことがございましたら 、サポートにお問い合わせください。
早期アクセスプログラムにご参加ください。
変更ログをご覧ください。
ご不明な点がございましたら、お問い合わせください。
LLM ですか？llms.txt を読んでください。
Powered by Markdoc