コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要構築済みのシステムをアップグレード
オンライン決済
概要ユースケースを見つけるManaged Payments を使用する
対面決済
決済手段
決済シナリオ
決済以外の機能

メモ

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

iDEAL を使用して将来の SEPA ダイレクトデビット支払いを設定する

iDEAL での支払いから銀行詳細を保存し、後から SEPA ダイレクトデビットで顧客に請求する方法をご紹介します。

注意

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

iDEAL は 1 回限りの使用の支払い方法で、顧客が支払いごとに認証する必要があります。このシステムを使用する場合、Stripe は iDEAL を通じて顧客に 0.01 EUR を請求して顧客の銀行詳細を収集します。顧客が支払いを認証すると、Stripe は支払いを返金して、顧客の IBAN を SEPA ダイレクトデビット支払い方法に保存します。その後、この SEPA ダイレクトデビット PaymentMethod (支払い方法) を使用して決済を受け付けるまたはサブスクリプションを設定することができます。

注意

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

アプリでの iDEAL を使用した将来の SEPA ダイレクトデビット支払いの設定は、プロセスを追跡する SetupIntent (支払い方法設定インテント) の作成、同意書承認の収集、および iDEAL への顧客のリダイレクトで構成されます。Stripe はこの SetupIntent を使用して、設定が完了するまでの設定の状態のすべてを追跡および処理します。

Stripe を設定する
サーバー側

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

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

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Customer を作成する
サーバー側

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

SetupIntent を作成する
サーバー側

顧客 の ID を使用して SetupIntent を作成し、payment_method_types を ideal に設定します。SetupIntent は、設定プロセスのステップを追跡します。iDEAL の場合、このステップには顧客からの SEPA ダイレクトデビット同意書 の収集と、同意書の有効性の追跡が含まれます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}}

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

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/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 に渡します。

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

SetupIntent オブジェクト全体をクライアントに送信するのではなく、client secret を使用します。これは、Stripe API リクエストを認証する API キーとは異なります。client secret は設定を完了できるため、慎重に扱う必要があります。記録したり、URL に含めたり、当該の顧客以外に漏洩することがないようにしてください。

stripe.confirmSetup を使用し、Payment Element の詳細を参照して設定インテントを完了します。この関数に return_url を指定して、設定インテントを完了した後に Stripe がユーザーをリダイレクトする場所を指示します。ユーザーは、return_url にリダイレクトされる前に、まず銀行の認証ページなどの中間サイトにリダイレクトされる場合があります。

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

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

  const {error} = await stripe.confirmSetup({
    //`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 setup intent. 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 が、設定インテントのステータスを表示するウェブサイトのページに対応していることを確認します。Stripe が顧客を return_url にリダイレクトするときに、次の URL クエリパラメーターが提供されます。

パラメーター説明
setup_intentSetupIntent の一意の識別子。
setup_intent_client_secretSetupIntent オブジェクトの client secret。

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

顧客に再び請求する必要が生じたときは、新しい PaymentIntent を作成します。SetupIntent を 取得し、latest_attempt フィールドを展開して payment_method_details 内の generated_sepa_debit ID を探すことで、SEPA ダイレクトデビットの支払い方法の ID を見つけます。

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_attempt

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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

導入をテストする

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

  • Authorize test payment (テスト支払いをオーソリする) をクリックして、設定成功のケースをテストします。SetupIntent が requires_action から succeeded に変わります。
  • Fail test payment (テスト支払いを失敗させる) をクリックして、顧客が認証に失敗するケースをテストします。SetupIntent が 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.comPaymentIntent のステータスは、3 分後以降に processing から succeeded に移行します。
generatedSepaDebitIntentsFail@example.comPaymentIntent のステータスは、processing から requires_payment_method に移行します。
generatedSepaDebitIntentsFailDelayed@example.comPaymentIntent のステータスは、3 分後以降に processing から requires_payment_method に移行します。
generatedSepaDebitIntentsSucceedDisputed@example.comPaymentIntent のステータスは、processing から succeeded に移行しますが、すぐに不審請求の申請が作成されます。

オプション設定後のイベントを処理する

SetupIntent が完成すると、Stripe は setup_intent.succeeded イベントを送信します。ダッシュボード、カスタム Webhook、またはパートナーソリューションを使用してこれらのイベントを受信して、生成された SEPA ダイレクトデビット PaymentMethod をデータベースに保存したり、トライアル期間の終了後に顧客に請求するなどのアクションを実行します。

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

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

手動

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

カスタムコード

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

事前構築のアプリ

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

参照情報