Payment Element を使用して、ウェブサイトまたはアプリケーションにカスタムの Stripe 決済フォームを埋め込み、顧客に決済手段を提供します。高度な設定とカスタマイズについては、決済の受け付けに関する導入ガイドをご覧ください。
開始するには、Stripe アカウントを作成を作成します。
アプリケーションから Stripe APIにアクセスするには、公式ライブラリを使用してください。
Payment Element を使用してクライアントで支払い詳細を収集する準備ができました。Payment Element は事前構築された UI コンポーネントであり、多様な支払い方法の支払い詳細の収集を容易にします。
Payment Element には、HTTPS 接続を介して支払い情報を Stripe に安全に送信する iframe が含まれています。決済手段によっては、支払い確認のために別のページにリダイレクトする必要があるため、Payment Element を別の iframe 内に配置しないでください。
実装を機能させるには、決済ページのアドレスの先頭を http://
ではなく 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>
上記のフォームが読み込まれたら、mode
、amount
、currency
を指定して Elements インスタンスを作成します。これらの値によって、顧客に表示される決済手段が決まります。フォームで新しい決済手段を指定するには、必ずダッシュボードで有効にしてください。
const options = {
mode: 'payment',
amount: 1000,
currency: 'gbp',
appearance: {},
};
const elements = stripe.elements(options);
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
Elements
プロバイダーを作成する際に Appearance (デザイン) オブジェクト を options
に渡すことで、サイトのデザインに合わせて Payment Element をカスタマイズできます。
住所を収集
デフォルトでは、Payment Element は必要な請求先住所情報のみを収集します。(たとえば、デジタル商品およびサービスの税金を計算するなどの目的で) 顧客の詳細な請求先住所または配送先住所を収集するには、Address Element を使用します。
支払い確定の直前にカスタムのビジネスロジックを実行する
支払いの確定ガイドのステップ 5 に移動して、支払い確定の直前にカスタムのビジネスロジックを実行します。または、以下のステップに従って既存のシステムをシンプルにします。ここでは、クライアント側で stripe.confirmPayment
を使用して、支払いの確定と次のアクションの処理の両方を行います。
顧客が支払いフォームを送信したら、PaymentIntent を使用して確認と支払いのプロセスを適切に管理します。amount
と currency
を指定してサーバー側で PaymentIntent を作成します。悪意のある顧客が独自の価格を選択できないように、請求金額はクライアント側ではなく、常にサーバー側 (信頼できる環境) で決定してください。
PaymentIntent には、client secret が含まれています。 この値をクライアントに返し、Stripe.js がこれを使用して支払いプロセスを安全に完了できるようにします。
require 'stripe'
Stripe.api_key = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
post '/create-intent' do
intent = Stripe::PaymentIntent.create({
customer: customer.id,
amount: 1000,
currency: 'gbp',
})
{client_secret: intent.client_secret}.to_json
end
stripe.confirmPayment を使用して、Payment Element の詳細を使って支払いを完了します。
この関数に return_url を指定して、支払い完了後に Stripe がユーザーをリダイレクトする場所を示します。ユーザーは、最初に銀行の認証ページなどの中間サイトにリダイレクトされてから、return_url
にリダイレクトされる場合があります。カード支払いでは、支払いが成功するとすぐに return_url
にリダイレクトされます。
支払い完了後にカード支払いのリダイレクトを行わない場合は、redirect を if_required
に設定できます。これにより、リダイレクトベースの決済手段で購入した顧客のみがリダイレクトされます。
const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message;
submitBtn.disabled = false;
}
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (submitBtn.disabled) {
return;
}
submitBtn.disabled = true;
const {error: submitError} = await elements.submit();
if (submitError) {
handleError(submitError);
return;
}
const res = await fetch("/create-intent", {
method: "POST",
});
const {client_secret: clientSecret} = await res.json();
const {error} = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: 'https://example.com/order/123/complete',
},
});
if (error) {
handleError(error);
} else {
}
});
実装内容をテストするには、決済手段を選択して支払うをタップします。サンドボックスでは、テスト決済ページにリダイレクトされ、そこで決済を承認または拒否できます。
本番環境では、支払うをタップすると、Kriya のウェブサイトにリダイレクトされます。Kriya で支払いを承認または拒否するオプションはありません。
エラーコード
次の表に、一般的なエラーコードと推奨される対応の詳細を示します。
エラーコード | 推奨される対応 |
---|
payment_intent_invalid_currency | 対応している通貨を入力してください。 |
missing_required_parameter | 必須パラメーターの詳細については、エラーメッセージをご確認ください。 |
payment_intent_payment_attempt_failed | このコードは、PaymentIntent の last_payment_error.code フィールドに表示されることがあります。エラーメッセージで、エラーの詳細な理由とエラー処理に関する提案を確認してください。 |
payment_intent_redirect_confirmation_without_return_url | PaymentIntent を確定する際は、return_url を指定します。 |