Payment Element bei mehreren Abwicklern verwenden

Erfahren Sie, wie Sie Kartendaten mit Payment Element erfassen und mit einem Drittanbieter-Abwickler verwenden können.

Verfügbar in:

Verwenden Sie Payment Element, um einen benutzerdefinierten Zahlungsablauf zu erstellen, über den Sie Kartendaten erfassen, eine PaymentMethod erstellen und die Zahlungsmethode an einen von Ihnen erstellten Drittanbieter weiterleiten können.

Zugriff anfordern

Um Zugriff auf den Weiterleitungsdienst von Stripe zu erhalten, wenden Sie sich an den Stripe-Support.

Eine PaymentMethod erstellen
Clientseitig

Verwenden Sie ein Payment Element, um Zahlungsdetails zu erfassen. Wenn Sie nicht in das Payment Element integriert haben, erfahren Sie, wie Sie loslegen können. Nachdem der Kunde/die Kundin Ihr Zahlungsformular abgeschickt hat, rufen Sie stripe.createPaymentMethod auf, um eine PaymentMethod zu erstellen. Übergeben Sie die ID der PaymentMethod an den ForwardingRequest-Endpoint auf Ihrem Server.

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 erstellen

Wenden Sie sich an den Stripe-Support, um Ihren Ziel-Endpoint zu konfigurieren und mit der Weiterleitung von Transaktionen zu beginnen. Senden Sie die Kartendaten an diesen Test-Endpoint, bevor Sie Ihre Integration mit Ihrem Drittanbieter-Zahlungsabwickler verbinden.

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');
});

Antwort verarbeiten
Clientseitig

Nachdem Sie die Anfrage gesendet haben, müssen Sie die Antwort bearbeiten.

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
  }
}