Enable Web Payments

Learn how to enable Web Payments on your ecommerce store. Discover how to customize the Web Payment buttons.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Web Payments, such as Apple Pay and Google Pay, allow your customers to skip the default checkout process and quickly check out of your store by using their digital wallets. If you’ve enabled Web Payments for your site, your store’s cart and checkout page will automatically display the relevant Web Payment button on supported browsers.

In this lesson
  1. Enable Web Payments
  2. Style web payment buttons
  3. Understand how customers pay with Web Payments

Enable Web Payments

You can enable Web Payments in your Ecommerce payment settings (Settings → Ecommerce → Payment →  Web Payments) but first, you must:

  1. Connect your Stripe account
  2. Add an ecommerce site plan and enable checkout
  3. Enable Web Payments
  4. Publish your site to your custom domain to verify your domain for Apple pay
Enabling Web Payments

Style web payment buttons

If you’ve enabled Web Payments, you’ll see the default “Apple pay” button in your cart. Then, once you select the button, you’ll be able to access the different payment buttons from the “Web payment settings” section in the Elements settings panel.

Preview the Web Payment options and customize them.

Now, you can select each option in the Web Payments Settings to preview and customize each button.

Need to know
You won't be able to customize the “Apple Pay” button much, that's because the "Apple Pay" button must adhere to the branding and user interface guidelines described in the Apple Pay Identity Guidelines [↗] and Human Interface Guidelines [↗].

You can also customize the look and feel of your web payment buttons even before you enable Web Payments for your live site. To access the payment buttons, in this case, you’ll need to select the “Web Payments" wrapper in the Navigator. Then, you’ll be able to access the “Web payment settings” section in the Elements settings panel.

Access the Web Payments Settings in the cart
Select the "Continue to checkout" button on the canvas, then it will be easier to spot the "Web Payments" wrapper in the Navigator, it's a sibling of the "checkout button".

Web Payments in the checkout page

Web Payments also live in the checkout page. So, don't forget to customize them there as well. If you've removed the Web Payments component from the chekout page, you can add it back from the Add panel.

Learn more: Customizing the checkout experience

Understand how customers pay with Web Payments

Web Payment options are only visible to shoppers visiting your store on supported browsers where they have stored payment methods available. So, the specific payment method available to customers depends on the browser and device they’re using.

Shoppers who can see Web Payments can bypass your site’s native checkout process by clicking the Web Payment button and authorizing the transaction through Touch ID, a PIN, or a passcode. If shoppers have also stored their billing and shipping information, Web Payments can reduce checkout friction, especially on mobile devices.

Apple pay

Apple Pay is available for shoppers who have stored payment details (credit or debit cards) on their iPhone, iPad, or Apple Watch. Apple Pay also supports Web Payments on Safari on iPhone, iPad, or Mac OS.

Resources

Pay with browser

Google Pay and Microsoft Pay are available for users who have stored their payment and shipping details on Android and Windows devices. Google Pay is also available for Chrome desktop and Android, but not iOS. Microsoft pay is also available for websites visited on a Microsoft Edge browser.

Resources

Need to know
Currently, Firefox and other mobile browsers do not support Web Payments. Additional payment methods will become available as these browsers start supporting Web Payments.

The Web Payments checkout process

As we stated above, choosing to pay for an order using a web payment method bypasses your store’s native checkout process. A browser-native checkout process is initiated to complete the purchase. This window shows an order summary and the shipping rates applied. The shopper may have to choose a payment method if they have more than one card stored in their account. The same is true for billing and shipping details. Then, they can authorize the payment and the order will be placed. They'll be taken to your stores "order confirmation page" and receive an email confirming the order as well.

You cannot customize the web payment checkout experience which uses the browser’s native UI.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.