Payment Request Button
Collect payment and address information from customers who use Apple Pay, Google Pay, Microsoft Pay, and the Payment Request API.
The Payment Request Button Element gives you a single integration for Apple Pay, Google Pay, Microsoft Pay, and the browser standard Payment Request API.
Customers see a “Pay now” button or an Apple Pay button, depending on what their device and browser combination supports. If neither option is available, they don’t see the button. Supporting Apple Pay requires additional steps, but compatible devices automatically support browser-saved cards, Google Pay, and Microsoft Pay.
Apple Pay with the Payment Request Button requires macOS 10.12.1+ or iOS 10.1+.
Collect shipping information
To collect shipping information, begin by including requestShipping: true
when creating the payment request.
You may also provide an array of shippingOptions
at this point, if your shipping options do not depend on the customer’s address.
var paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
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 anonymized 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.
paymentRequest.on('shippingaddresschange', function(ev) { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }).then(function(response) { return response.json(); }).then(function(result) { ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); }); } });
paymentRequest.on('shippingaddresschange', async (ev) => { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options const response = await fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }); const result = await response.json(); ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); } });
Style the button
Use the following parameters to customize the Element:
elements.create('paymentRequestButton', { paymentRequest: paymentRequest, style: { paymentRequestButton: { type: 'default', // One of 'default', 'book', 'buy', or 'donate' // Defaults to 'default' theme: 'dark', // One of 'dark', 'light', or 'light-outline' // Defaults to 'dark' height: '64px' // Defaults to '40px'. The width is always '100%'. }, }, });
elements.create('paymentRequestButton', { paymentRequest, style: { paymentRequestButton: { type: 'default', // One of 'default', 'book', 'buy', or 'donate' // Defaults to 'default' theme: 'dark', // One of 'dark', 'light', or 'light-outline' // Defaults to 'dark' height: '64px', // Defaults to '40px'. The width is always '100%'. }, }, });
Using your own button
If you wish to design your own button instead of using the paymentRequestButton
Element,
you may show your custom button based on the result of paymentRequest.canMakePayment().
Then, use paymentRequest.show() to display the browser interface when your button is clicked.
When building your own button, follow Apple Pay’s Human Interface Guidelines.
Use the Payment Request Button with Stripe Connect
Connect platforms that either create direct charges or add the token to a Customer on the connected account must take some additional steps when using the Payment Request Button.
-
On your frontend, before creating the
PaymentRequest
instance, set thestripeAccount
option on the Stripe instance:var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', { apiVersion: "2020-08-27", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', { apiVersion: "2020-08-27", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });
-
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 Making API calls for connected accounts.curl https://api.stripe.com/v1/apple_pay/domains \ -u {PLATFORM_SECRET_KEY}: \ -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}" \ -d domain_name="example.com"
Stripe.api_key = "sk_live_••••••••••••••••••••••••" Stripe::ApplePayDomain.create({ domain_name: 'example.com', },{ stripe_account: '{{CONNECTED_STRIPE_ACCOUNT_ID}}', })
stripe.api_key = "sk_live_••••••••••••••••••••••••" stripe.ApplePayDomain.create( domain_name='example.com', stripe_account='{{CONNECTED_STRIPE_ACCOUNT_ID}}', )
\Stripe\Stripe::setApiKey("sk_live_••••••••••••••••••••••••"); \Stripe\ApplePayDomain::create([ 'domain_name' => 'example.com', ],[ 'stripe_account' => '{{CONNECTED_STRIPE_ACCOUNT_ID}}', ]);
var stripe = require("stripe")("sk_live_••••••••••••••••••••••••"); const domain = await stripe.applePayDomains.create({ domain_name: 'example.com', },{ stripe_account: '{{CONNECTED_STRIPE_ACCOUNT_ID}}', });
Stripe.apiKey = "sk_live_••••••••••••••••••••••••"; ApplePayDomainCreateParams params = ApplePayDomainCreateParams.builder() .setDomainName("example.com") .build(); RequestOptions requestOptions = RequestOptions.builder() .setStripeAccount("{{CONNECTED_STRIPE_ACCOUNT_ID}}") .build(); ApplePayDomain domain = ApplePayDomain.create(params, requestOptions);
stripe.Key = "sk_live_••••••••••••••••••••••••" params := &stripe.ApplePayDomainParams{ DomainName: stripe.String("example.com"), } params.SetStripeAccount("{{CONNECTED_STRIPE_ACCOUNT_ID}}") domain, _ := applepaydomain.New(params)
StripeConfiguration.ApiKey = "sk_live_••••••••••••••••••••••••"; var options = new ApplePayDomainCreateOptions { DomainName = "example.com", }; var requestOptions = new RequestOptions(); requestOptions.StripeAccount = "{{CONNECTED_ACCOUNT_ID}}"; var service = new ApplePayDomainService(); var domain = service.Create(options, requestOptions);
The Payment Request Button Element gives you a single integration for Apple Pay, Google Pay, Microsoft Pay, and the browser standard Payment Request API.
Customers see a “Pay now” button or an Apple Pay button, depending on what their device and browser combination supports. If neither option is available, they don’t see the button. Supporting Apple Pay requires additional steps, but compatible devices automatically support browser-saved cards, Google Pay, and Microsoft Pay.
Apple Pay with the Payment Request Button requires macOS 10.12.1+ or iOS 10.1+.
Collect shipping information
To collect shipping information, begin by including requestShipping: true
when creating the payment request.
You may also provide an array of shippingOptions
at this point, if your shipping options do not depend on the customer’s address.
var paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
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 anonymized 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.
paymentRequest.on('shippingaddresschange', function(ev) { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }).then(function(response) { return response.json(); }).then(function(result) { ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); }); } });
paymentRequest.on('shippingaddresschange', async (ev) => { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options const response = await fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }); const result = await response.json(); ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); } });
Style the button
Use the following parameters to customize the Element:
const options = { paymentRequest, style: { paymentRequestButton: { type: 'default', // One of 'default', 'book', 'buy', or 'donate' // Defaults to 'default' theme: 'dark', // One of 'dark', 'light', or 'light-outline' // Defaults to 'dark' height: '64px', // Defaults to '40px'. The width is always '100%'. }, } } <PaymentRequestButtonElement options={options} />
Using your own button
If you wish to design your own button instead of using the paymentRequestButton
Element,
you may show your custom button based on the result of paymentRequest.canMakePayment().
Then, use paymentRequest.show() to display the browser interface when your button is clicked.
When building your own button, follow Apple Pay’s Human Interface Guidelines.
Use the Payment Request Button with Stripe Connect
Connect platforms that either create direct charges or add the token to a Customer on the connected account must take some additional steps when using the Payment Request Button.
-
On your frontend, before creating the
PaymentRequest
instance, set thestripeAccount
option on the Stripe instance:var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', { apiVersion: "2020-08-27", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx', { apiVersion: "2020-08-27", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });
-
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 Making API calls for connected accounts.curl https://api.stripe.com/v1/apple_pay/domains \ -u {PLATFORM_SECRET_KEY}: \ -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}" \ -d domain_name="example.com"
See also
Use of Apple Pay on the web is subject to the Apple Pay on the web terms of service.