Accept a payment with the Express Checkout Element
The Express Checkout Element gives you a single integration for accepting payments through one-click payment buttons, including Link, PayPal, Apple Pay, Google Pay, and Amazon Pay.
Customers see different payment buttons depending on what their device and browser combination supports. Compatible devices automatically support Google Pay and Link. Supporting Apple Pay and PayPal requires additional steps.
Prerequisites
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.
Set up StripeServer-side
First, create a Stripe account or sign in.
Use our official libraries to access the Stripe API from your application:
Enable payment methods
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.
Create and mount the Express Checkout ElementClient-side
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.
Submit the payment to StripeClient-side
Use stripe.confirmPayment to complete the payment using details from the Express Checkout Element.
Note
For Amazon Pay, the amount you confirm in the PaymentIntent must match the amount the buyer pre-authorized to prevent the payment from being declined.
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.
Test the integration
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 *”.
Disclose Stripe to your customers
Stripe collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Stripe to use data in these ways. For more information, visit our privacy center.