| [ Web Proxy ] |
| Viewing: https://docs.stripe.com/payments/forwarding-third-party-processors | [Back] [Original] |
Use Payment Element to build a custom payment flow that allows you to collect card details, create a PaymentMethod, and forward the payment method to a third-party processor.
To gain access to use Stripes forwarding service, contact Stripe support.
Use a Payment Element to collect payment details. If youre not integrated with the Payment Element, learn how to get started. After the customer submits your payment form, call stripe.createPaymentMethod to create a PaymentMethod. Pass the PaymentMethod ID to the ForwardingRequest endpoint on your server.
// 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_YVzIqUTwiCYcEXO1DPqDrM98'); 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); });
Contact Stripe support to configure your destination endpoint and begin forwarding transactions. Send the card details to this test endpoint before you connect your integration with your third-party processor.
// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices. const stripe = require("stripe")("sk_test_wU7nrJCZspk1NPDxiQgAF05q"); 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'); });
After you send the request, you must handle the response.
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 } }
| Web Proxy Viewer | New URL | Original Page |