コンテンツにスキップ
アカウントを作成
または
サインイン
Stripe ドキュメントのロゴ
/
AI に質問する
アカウントを作成
サインイン
始める
支払い
財務の自動化
プラットフォームおよびマーケットプレイス
資金管理
開発者向けのツール
始める
支払い
財務の自動化
始める
支払い
財務の自動化
プラットフォームおよびマーケットプレイス
資金管理
概要
Stripe Payments について
構築済みのシステムをアップグレード
支払いの分析
オンライン決済
概要ユースケースを見つけるManaged Payments
Payment Links を使用する
決済ページを構築
高度なシステムを構築
アプリ内実装を構築
決済手段
決済手段を追加
決済手段を管理
Link による購入の迅速化
支払いインターフェイス
Payment Links
Checkout
Web Elements
アプリ内 Elements
決済シナリオ
カスタムの決済フロー
    概要
    既存の顧客の支払い
    支払いのオーソリとキャプチャーを分離する
    2 段階の確認機能を構築する
    インテントを作成する前に支払いの詳細を収集
    サーバーで支払いを確定する
    通信販売 / 電話販売 (MOTO) の受け付け
    アメリカとカナダのカード
    サードパーティーの API エンドポイントにカード情報を転送する
      複数の決済代行業者に対して Payment Element を使用
      自社のトークンボールトにカード情報を転送
    支払い項目
柔軟なアクワイアリング
オーケストレーション
店頭支払い
端末
他の Stripe プロダクト
Financial Connections
仮想通貨
Climate
ホーム支払いCustom payment flowsForward card details to third-party API endpoints

複数の決済代行業者に対して Payment Element を使用する

Payment Element でカード情報を収集し、それをサードパーティーの決済代行業者で使用する方法をご紹介します。

ページをコピー

Payment Element を使用して、カード情報の収集、PaymentMethod の作成、サードパーティーの決済代行業者への支払い方法の転送を可能にするカスタムの決済フローを作成します。

アクセスをリクエストする

Stripe の転送サービスを使用するには、Stripe サポートにお問い合わせください。

PaymentMethod を作成する
クライアント側

Payment Element を使用して支払いの詳細を収集します。Payment Element を導入していない場合は、利用を開始する方法をご覧ください。顧客が決済フォームを送信したら、stripe.createPaymentMethod を呼び出して、PaymentMethod を作成します。サーバーの ForwardingRequest エンドポイントに PaymentMethod ID を渡します。

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'
); const options = { mode: 'payment', amount: 1099, currency: 'usd', paymentMethodCreation: 'manual', // Fully customizable with appearance API. appearance: { theme: 'stripe' } }; // Set up Stripe.js and Elements to use in checkout form const elements = stripe.elements(options); const paymentElementOptions = { layout: "tabs", }; // Create and mount the Payment Element const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); 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) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); // Prevent multiple form submissions if (submitBtn.disabled) { return; } // Disable form submission while loading submitBtn.disabled = true; // Trigger form validation and wallet collection const { error: submitError } = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentMethod using the details collected by the Payment Element const { error, paymentMethod } = await stripe.createPaymentMethod({ elements, params: { billing_details: { name: 'John Doe', } } }); if (error) { // This point is only reached if there's an immediate error when // creating the PaymentMethod. Show the error to your customer (for example, payment details incomplete) handleError(error); return; } // Call the ForwardingRequest endpoint on your server const res = await fetch("/create-forwarding-request", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ paymentMethodId: paymentMethod.id, }), }); const data = await res.json(); // Handle the response or errors handleServerResponse(data); });

ForwardingRequest を作成する

Stripe サポートに連絡して、送信先エンドポイントを設定し、取引の転送を開始します。システムをサードパーティーの決済代行業者に連結する前に、このテスト用エンドポイントにカード情報を送信します。

app.js
const stripe = require("stripe")(
"sk_test_BQokikJOvBiI2HlWgH4olfQ2"
); 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'); });

レスポンスを処理する
クライアント側

リクエストを送信した後、レスポンスに対応する必要があります。

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