Payment Request Button

Using Elements with React

If you intend to use Stripe Elements with React, use
react-stripe-elements,
our open source library that wraps Stripe Elements in a set of convenient React components.

The paymentRequestButton Element gives you a single integration
for Apple Pay, Google Pay, and the Payment Request
API—a browser standard that gives your
customers the ability to quickly provide you payment and address information
they’ve stored with their browser.

Using this Element, your customers are shown either an Apple Pay button or
Payment Request button, depending on what is supported by their device
and browser combination. If neither is available, the button is not
displayed.

Try it out

You can see what it's like right here on this page. Don't worry, your card
won't be charged.

Either your browser does not support Apple Pay or the Payment
Request API, or you do not have a saved payment method. To try out the
Payment Request Button, switch to one of the
supported browsers below, and make sure you have a saved payment
method.

Step 3: Create and mount the paymentRequestButton Element

Create the paymentRequestButton Element and check to make sure that your
customer has an active payment method using canMakePayment().
If they do, mount the Element to the container to display the
Payment Request Button. If they do not, you cannot mount the Element, and
we encourage you to show a traditional checkout form instead.

Next, listen to the shippingaddresschange event to detect
when a customer selects a shipping address. Use the address to fetch
valid shipping options from your server, update the total, or perform
other business logic. The address data on the shippingaddresschange
event may be anynomized by the browser to not reveal sensitive information that is
not necessary for shipping cost calculation.

Note that valid shippingOptions must be supplied at this point for the customer
to proceed in the flow.

Verifying your domain with Apple Pay

To use Apple Pay, you need to register with Apple all of your web domains
that will show an Apple Pay button. This includes both top-level
domains (e.g., stripe.com) and subdomains (e.g.,
shop.stripe.com). You need to do this for domains you
use in both production and testing. When testing locally, use a tool like
ngrok to get an HTTPS domain.

Important note: Apple's
documentation for Apple Pay on the Web describes their process of
"merchant validation", which Stripe handles for you behind the scenes.
You do not need to create an Apple Merchant ID, CSR, etc., as described
in their documentation, and should instead just follow these steps:

Download this
domain association file and host it at /.well-known/apple-developer-merchantid-domain-association
on your site.

For example, if you're registering https://example.com,
make that file available at https://example.com/.well-known/apple-developer-merchantid-domain-association.

Next, tell Stripe to register your domain with Apple. You can do this by
either going to
the Apple Pay tab in the Account Settings of your Dashboard, or by
directly using the API with your live secret key as shown below.

Note that we've redacted your live secret key here—head to your
Dashboard and
replace sk_live_•••••••••••••••••••••••• below with your live
secret key. All domains, whether in production or testing, must be registered
with your live secret key.

Register all domains on which the Payment Request Button will be shown
with Apple Pay. You can use the Stripe API for this, using your
platform's secret key to authenticate the request, and setting the
Stripe-Account header to your connected account's Stripe
ID, as described in Authentication with Connect.

Next steps

Congrats! You’re now using the Payment Request Button to collect your
customer’s information with Stripe. Once you’ve sent your token to your
server, you’ll be able to use the token to perform a charge or to save
to a customer. Learn more about how to create charges or make use of
subscriptions.