複数の決済代行業者に対して 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_4eC39HqLyjWDarjtT1zdp7dc"
);
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
  }
}