複数の決済代行業者に対して Payment Element を使用する
Payment Element でカード情報を収集し、それをサードパーティーの決済代行業者で使用する方法をご紹介します。
利用可能な国:
Payment Element を使用して、カード情報の収集、PaymentMethod の作成、サードパーティーの決済代行業者への支払い方法の転送を可能にするカスタムの決済フローを作成します。
アクセスをリクエストする
Stripe の転送サービスを使用するには、Stripe サポートにお問い合わせください。
PaymentMethod を作成するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
クライアント側
Payment Element を使用して支払いの詳細を収集します。Payment Element を導入していない場合は、利用を開始する方法をご覧ください。顧客が決済フォームを送信したら、stripe.createPaymentMethod を呼び出して、PaymentMethod を作成します。サーバーの ForwardingRequest エンドポイントに PaymentMethod ID を渡します。
ForwardingRequest を作成する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Stripe サポートに連絡して、送信先エンドポイントを設定し、取引の転送を開始します。システムをサードパーティーの決済代行業者に連結する前に、このテスト用エンドポイントにカード情報を送信します。
app.js
const stripe = require("stripe")(
); const express = require('express'); const app = express(); app.set('trust proxy', true); app.use(express.json()); app.use(express.static(".")); app.post('/create-forwarding-request', async (req, res) => { try { const forwardedReq = await stripe.forwarding.requests.create( { payment_method: req.body.paymentMethodId, url: '{{DESTINATION_ENDPOINT}}', request: { headers: [{ name: 'Destination-API-Key', value: '{{DESTINATION_API_KEY}}' },{ name: 'Destination-Idempotency-Key', value: '{{DESTINATION_IDEMPOTENCY_KEY}}' }], body: JSON.stringify({ "amount": { "currency": "USD", "value": 1099 }, "reference": "Your order number", "card": { "number": "", "exp_month": "", "exp_year": "", "cvc": "", "name": "", } }) }, replacements: ['card_number', 'card_expiry', 'card_cvc', 'cardholder_name'], } ); if (forwardedReq.response_details.status != 200) { // Return error based on third-party API response code } else { // Parse and handle the third-party API response const forwardedResult = JSON.parse(forwardedReq.response_details.body); res.json({ status: forwardedReq.response_details.status }); } } catch (err) { res.json({ error: err }); } }); app.listen(3000, () => { console.log('Running on port 3000'); });"sk_test_4eC39HqLyjWDarjtT1zdp7dc"
レスポンスを処理するクライアント側![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
クライアント側
リクエストを送信した後、レスポンスに対応する必要があります。
const handleServerResponse = async (response) => { if (response.error) { // Show error on payment form } else if (response.status != 200) { // Show error based on response code } else { // Parse the response body to render your payment form } }