Now you can enable Web Payments as a payment method to let customers checkout faster with Apple Pay and other browser based payment methods, right from the shopping cart.
This new checkout option is built on top of the Web Payments API, which essentially lets websites ask browsers if the customer has a stored payment method available. If they do, then those payment and shipping details can be applied by the customer — no need to fill out a lengthy checkout form.
Because Web Payments is all browser based, the specific payment method available to customers depends on the browser they’re using.
Ok, enough explanation of what this thing is — let’s look at how you add this to your site.
Even before you to switch Web Payments on (in your ecommerce payment settings) for your live site, you can style these checkout buttons in the Designer to make sure it’s looking right.
To access these new payment buttons, open your shopping cart and check out the “Web payments” element.
You’ll notice the Web Payments button has three different states that you can style:
While you can style the generic “Pay with browser” button however you’d like, due to Apple’s branding guidelines, you have limited control over the style of your Apple Pay button. (With that said, we’re looking to add additional preset, Apple-approved styles in the future, like a dark and light theme.)
Ok, so you’ve got your buttons all styled and now you want to flip the switch and show these new payment options on your live site. How do you do it?
For starters, to enable Web Payments, you’ll first need to add an ecommerce site plan to your project, connect your Stripe account, and enable checkout.
Once that’s sorted, head to the payment section of your ecommerce settings and toggle web payments on — then publish your site. And boom, you’re set.
With Web Payments enabled and your buttons styled, you’re all set to show these new payment methods on your site.
Let customers checkout faster with stored payment details from their browser, like Apple Pay on Safari or stored credit card details on Chrome and Edge.