Accept a payment with the Express Checkout Element (2024)

Before you start, you must:

• Add a payment method to your browser. For example, you can add a card to your Google Pay account or to your Wallet for Safari.
• Serve your application over HTTPS. This is required in development and in production. You can use a service such as ngrok.
• Register and verify your domain in both test mode and live mode.
• Create a PayPal Sandbox account to test your integration.

First, create a Stripe account or sign in.

Use our official libraries to access the Stripe API from your application:

# Available as a gemsudo gem install stripe

# If you use bundler, you can add this line to your Gemfilegem 'stripe'

Enable the payment methods you want to support in your payment methods settings. You must enable at least one payment method.

By default, Stripe enables cards and other common payment methods. You can enable additional payment methods that are relevant for your business and customers. See our payment method integration options for product and payment method support and our pricing page for fees.

The Express Checkout Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https://, rather than http://, for your integration to work.

<div id="express-checkout-element"> <!-- Express Checkout Element will be inserted here --></div><div id="error-message"> <!-- Display error message to your customers here --></div>

// Create and mount the Express Checkout Elementconst expressCheckoutElement = elements.create('expressCheckout');expressCheckoutElement.mount('#express-checkout-element');

Stripe uses a PaymentIntent object to represent your intent to collect payment from a customer, tracking charge attempts and payment state changes throughout the process.

Create a PaymentIntent on your server with an amount and currency. This must match what you set on the stripe.elements instance in step 3. Always decide how much to charge on the server-side, a trusted environment, as opposed to the client-side. This prevents malicious customers from choosing their own prices.

require 'stripe'Stripe.api_key = 
'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
post '/create-intent' do intent = Stripe::PaymentIntent.create({ # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, amount: 1099, currency: 'usd', }) {client_secret: intent.client_secret}.to_jsonend

The returned PaymentIntent includes a client secret, which the client-side uses to securely complete the payment process instead of passing the entire PaymentIntent object. You can use different approaches to pass the client secret to the client-side.

Use stripe.confirmPayment to complete the payment using details from the Express Checkout Element.

Provide a return_url to this function to indicate where Stripe should redirect the user after they complete the payment. Your user might be initially redirected to an intermediate site before being redirected to the return_url. Payments immediately redirect to the return_url when a payment is successful.

If you don’t want to redirect after payment completion, set redirect to if_required. This only redirects customers that check out with redirect-based payment methods.

const handleError = (error) => { const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message;}expressCheckoutElement.on('confirm', async (event) => { const {error: submitError} = await elements.submit(); if (submitError) { handleError(submitError); return; } // Create the PaymentIntent and obtain clientSecret const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); const {error} = await stripe.confirmPayment({ // `elements` instance used to create the Express Checkout Element elements, // `clientSecret` from the created PaymentIntent clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point is only reached if there's an immediate error when // confirming the payment. Show the error to your customer (for example, payment details incomplete) handleError(error); } else { // The payment UI automatically closes with a success animation. // Your customer is redirected to your `return_url`. }});

Click the tabs below to view details for each payment method. See more information on supported browsers to see which payment methods work with specific browsers. If you use the Express Checkout Element within an iframe, the iframe must have the allow attribute set to equal “payment *”.