Activate Online Payments

Enable Web Payments on your ecommerce store and customize Web Payment buttons.

Online Payments, like Apple Pay and Google Pay, enable your clients to evade the default checkout process and swiftly purchase from your shop using their digital wallets.

If you have turned on Online Payments for your website, the appropriate Web Payment button will automatically appear on the cart and checkout page for supported browsers. You can also manually insert the Web payments feature into your cart or checkout page from the Add panel.

Information in this guide
  1. Activate Online Payments
  2. Customize online payment buttons
  3. Comprehend how customers make payments via Online Payments

Activate Online Payments

Online Payments are enabled by default on all checkout pages. You can deactivate this payment method by removing the Online Payments element from your page.

To validate your domain for Apple pay, you may need to publish your site to your custom domain.

You can also manually activate or deactivate Online Payments in your Ecommerce payment settings (Settings → Ecommerce → Payment →  Stripe → Web Payments) but first, you must:

  1. Link your Stripe account
  2. Incorporate an ecommerce site plan and activate checkout

Customize online payment buttons

Upon activating Online Payments, you will notice the default “Apple pay” button in your cart. Once you click the button, you can explore different payment buttons in the “Online payment settings” section within the Elements settings panel.

You can also include an Online Payments element in your checkout form or cart from the Add panel.

Preview the Web Payment options and customize them.

You can preview and modify each button in the Online Payments Settings before activating Online Payments on your live site. To access the payment buttons, you need to click the “Web Payments” container in the Navigator. Then, you can access the “Online payment settings” section in the Elements settings panel.

Access the Web Payments Settings in the cart
Click the “Continue to checkout” button on the canvas, then it will be easier to spot the “Web Payments” container in the Navigator, it’s a sibling of the “checkout button”.

Online Payments in the checkout page

Online Payments are also integrated into the checkout page. Therefore, remember to tailor them there as well. If you removed the Online Payments component from the checkout page, you can reintegrate it from the Add panel.

Explore further: Personalizing the checkout experience

Comprehend how customers make payments via Online Payments

Online Payment choices are visible only to customers visiting your store on browsers where they have stored payment methods. Thus, the available payment methods for customers vary based on the browser and device they are using.

Shoppers who can view Online Payments can skip your site’s usual checkout process by selecting the Web Payment button and confirming the transaction via Touch ID, a PIN, or a passcode. With pre-stored billing and shipping details, Online Payments help streamline checkout, especially on mobile devices.

Apple pay

Customers can utilize Apple Pay if they have saved payment details (credit or debit cards) on their iPhone, iPad, or Apple Watch. Apple Pay also facilitates Online Payments on Safari on iPhone, iPad, or Mac OS.

References:

Pay with browser

Google Pay and Microsoft Pay cater to users who have stored their payment and shipping details on Android and Windows devices. Google Pay serves Chrome desktop and Android users, while Microsoft Pay is available to websites accessed via Microsoft Edge.

References:

Key information
Presently, Firefox and other mobile browsers do not support Online Payments. As these browsers embrace Online Payments, additional payment methods will become accessible.

The Online Payments checkout process

Opting to pay for an order using a web payment method circumvents your store’s standard checkout process. Instead, a browser-native checkout process is initiated to complete the transaction. This window displays an order summary along with applicable shipping rates. Customers may have to pick a payment method if multiple cards are stored in their account. The same applies to billing and shipping details. Subsequently, they can validate the payment, place the order, and be directed to your store’s “order confirmation page” while also receiving an order confirmation email.

Reminder: Since web payments avoid your store’s standard checkout process, you may not collect extra information during checkout

Important: You cannot modify the web payment checkout process that uses the browser’s default UI.

Web Payments and SCA compliance

If your online store operates in the European Economic Area (EEA) [↗], customers from EEA countries will need to undergo an additional authentication layer to validate payment for their purchase. Card-based payment methods like Apple Pay [↗] and Google Pay [↗] are already equipped with an authentication layer that ensures a smooth checkout process for online buyers while meeting the new PSD2 SCA regulations [↗].

Ewan Mak
Latest posts by Ewan Mak (see all)