iDEAL は 1 回限りの使用の決済手段であり、顧客は支払いの認証を求められます。iDEAL を使用して支払う場合、顧客はお客様のウェブサイトからリダイレクトされ、支払いを承認するとウェブサイトに戻されます。ここで、お客様は支払いが成功したか失敗したかに関する即時通知を受け取ります。
Payment Elements を使用して、ウェブサイトまたはアプリにカスタムの Stripe 決済フォームを埋め込みます。Payment Elements を使用すると、iDEAL とその他の決済手段に自動的に対応できます。高度な設定とカスタマイズについては、決済の受け付けに関する導入ガイドをご覧ください。
まず、Stripe アカウントが必要です。今すぐ登録してください。
アプリケーションから Stripe APIにアクセスするには、公式ライブラリを使用してください。
PaymentIntent (支払いインテント) は、顧客から支払いを回収する意図を表すオブジェクトであり、決済プロセスのライフサイクルをステージごとに追跡します。最初に、サーバーで PaymentIntent
を作成し、回収する金額と eur
通貨 (iDEAL は他の通貨には対応していません) を指定します。iDEAL に最少請求金額はないため、支払いの amount
は 1 まで下げられます。Payment Intents API を使用したシステムがすでにある場合は、ideal
を PaymentIntent
の決済手段タイプのリストに追加します。
金額と通貨を指定して、サーバーで PaymentIntent を作成します。最新バージョンの API では、automatic_payment_methods
パラメーターの機能がデフォルトで有効になっているため、このパラメーターの指定は任意です。決済手段はダッシュボードから管理できます。Stripe は、取引金額、通貨、決済フローなどの要素に基づいて、対象となる決済手段を決定します。決済手段の設定ページで iDEAL を有効にしてください。
クライアント側ではなく、信頼できる環境のサーバー側で常に支払い金額を指定してください。これにより、悪意のある顧客が価格を操作できないようにします。
curl https://api.stripe.com/v1/payment_intents \
-u "sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
-d amount=1099 \
-d currency=eur \
-d "automatic_payment_methods[enabled]"=true
client secret を取得する
PaymentIntent には、client secret が含まれています。これは、支払いプロセスを安全に完了するためにクライアント側で使用されます。client secret をクライアント側に渡す際は、いくつかの方法を使用できます。
ブラウザーの fetch
関数を使用して、サーバーのエンドポイントから client secret を取得します。この方法は、クライアント側が 1 ページのアプリケーションで、特に React などの最新のフロントエンドフレームワークで構築されている場合に最適です。client secret を処理するサーバーのエンドポイントを作成します。
get '/secret' do
intent =
{client_secret: intent.client_secret}.to_json
end
その後、クライアント側で JavaScript を使用して client secret を取得します。
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
})();
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 準拠が維持されます。スクリプトをバンドルに含めたり、そのコピーを自身でホストしたりしないでください。
決済ページで以下の JavaScript を使用して、Stripe のインスタンスを作成します。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
Payment Element を支払いページに追加する
Payment Element を決済ページに配置する場所が必要です。決済フォームで、一意の ID を持つ空の DOM ノード (コンテナー) を作成します。
<form id="payment-form">
<div id="payment-element">
</div>
<button id="submit">Submit</button>
<div id="error-message">
</div>
</form>
前のフォームが読み込まれたら、Payment Element のインスタンスを作成して、それをコンテナーの DOM ノードにマウントします。Elements インスタンスを作成する際に、前のステップからの client secret を options
に渡します。
client secret は支払いを完了できるため、慎重に取り扱う必要があります。記録したり、URL に埋め込んだり、当該の顧客以外に漏洩することがないようにしてください。
const options = {
clientSecret: '{{CLIENT_SECRET}}',
appearance: {},
};
const elements = stripe.elements(options);
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
Payment Element からの詳細を指定して stripe.confirmPayment を使用し、支払いを完了します。ユーザーが支払いを完了した後に Stripe がユーザーをリダイレクトする場所を指定するには、この関数に return_url を指定します。ユーザーはまず、銀行のオーソリページなどの中間サイトにリダイレクトされ、その後 return_url
にリダイレクトされます。カード支払いでは、支払いが正常に完了するとすぐに return_url
にリダイレクトします。
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
} else {
}
});
return_url
が、Web サイト上の支払いステータスを表示するページと対応していることを確認します。Stripe が顧客を return_url
にリダイレクトするときは、以下の URL クエリーパラメーターが指定されます。
パラメーター | 説明 |
---|
payment_intent | PaymentIntent の一意の識別子。 |
payment_intent_client_secret | PaymentIntent オブジェクトの client secret。 |
注意
顧客のブラウザーセッションを追跡するツールを利用している場合、リファラー除外リストに stripe.com
ドメインの追加が必要になる場合があります。リダイレクトを行うと、一部のツールでは新しいセッションが作成され、セッション全体の追跡ができなくなります。
クエリパラメーターのいずれか 1 つを使用して PaymentIntent を取得します。PaymentIntent のステータスを調べて、顧客に表示する内容を決定します。また、return_url
を指定するときにカスタムのクエリパラメーターを追加することもできます。このパラメーターはリダイレクトプロセスの間維持されます。
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const clientSecret = new URLSearchParams(window.location.search).get(
'payment_intent_client_secret'
);
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
const message = document.querySelector('#message')
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.';
break;
default:
message.innerText = 'Something went wrong.';
break;
}
});
テスト API キーを使用して PaymentIntent を確定します。確定すると、決済を承認または失敗させるオプションのあるテストページにリダイレクトされます。
- Authorize test payment (テスト支払いをオーソリする) をクリックして、支払い成功のケースをテストします。PaymentIntent が
requires_action
から succeeded
に変わります。 - Fail test payment (テスト支払いを失敗させる) をクリックして、認証失敗のケースをテストします。PaymentIntent が
requires_action
から requires_payment_method
に変わります。
取引銀行
銀行名 | 値 |
---|
ABN AMRO | abn_amro |
ASN Bank | asn_bank |
Bunq | bunq |
ING | ing |
Knab | knab |
N26 | n26 |
Nationale-Nederlanden | nn |
Rabobank | rabobank |
Revolut | revolut |
RegioBank | regiobank |
SNS Bank (De Volksbank) | sns_bank |
Triodos Bank | triodos_bank |
Van Lanschot | van_lanschot |
Yoursafe | yoursafe |