Supporting Apple Pay / Google Pay / Samsung Pay / Microsoft Pay, etc.

Owned by Jonathan Tew
Last updated: Feb 07, 2023 by Hunter Schaeffer
4 min read

Introduction

This tutorial will cover how to add support to your StoreFront for:

  • Apple Pay

  • Google Pay

  • Samsung Pay

  • Microsoft Pay

Supporting these payments methods allows for efficient checkout scenarios using already-on-file and secure payment and address information via mobile and desktop browsers.

Benefits

The benefits of allowing these payments methods are:

  • Very fast checkout experience for customers on mobile devices.

  • Strongly authenticated payments as most mobile devices will require biometrics or pin authentication to use.

Prerequisites

  • Stripe Connect payment gateway

  • StoreFront Visual Builder theme of a minimum version shown below

Theme

Version

Theme

Version

Elements

2.06

Hero

1.08

Jewel

1.05

Lifty

1.06

Native

1.06

Natural VB

1.05

Why only Stripe?

This is probably the biggest question we’re going to get from merchants on this functionality. We’ve chosen to implement Stripe because they have solved several problems elegantly:

  • Support Apple Pay without requiring the merchant to 1) generate a CSR, generate encryption certificates, 2) setup an Apple Developer account, and 3) whitelist domains. These are all very complicated steps.

  • Unifying the API necessary to interact with Apple Pay and all the other payment methods that use the W3C Payment Request API.

Will you support Authorize.net or NMI?

Maybe down the road if they evolve their SDKs to have a similar friendly unified interface to support all of the various payment mechanics. They are just not there at this point. We imagine that they will take a page out of the Stripe book and work on their SDKs so they can function in a similar fashion.

What if I don’t use Stripe at this time?

That is not a problem. You will want to migrate your existing gateway configuration over to a rotating transaction gateway. Then you can configure Stripe as a second rotating transaction gateway. You can make it active, but give it zero percent of the regular traffic. UltraCart will only use the Stripe gateway for Apple Pay, etc.

How do I add these payments if I’ve customized the checkout?

This is similar. The StoreFront Visual Builder element that you need to add to your checkout is:

“checkout express checkout credit card”

You’ll typically want to place this element in a column along the other express checkout elements for Amazon and PayPal.

What are the limitations of using Apple Pay, etc.?

Similar to other payment, methods there are two important limitations to consider:

  • Upsells are not supported

  • Auto orders are not supported

The “checkout payment method” element can also be used to provide Apple Pay, etc. as an option. This element is used in themes like Natural VB. The checkout payment method element will only show the option when the “checkout express checkout credit card” element is NOT on the page simultaneously. Only one of these buttons is allowed on the page at a given time. We figure if you’re giving them the option as an express checkout button then they will take that quicker than scrolling down and interacting with the larger checkout form.

Why doesn’t the element appear in the checkout?

The button is intelligent. If the customer’s browser does not support the functionality then it will not display and distract/confuse the customer. For example on an iPhone, the Safari browser will not show Apple Pay unless the customer already has a credit card in their wallet. Other browsers will do a similar things.

Why does the button change appearance?

On an iPhone/Mac the button will appear as Apple Pay. On an Android phone the button will appear as G Pay. On a regular desktop browser like Chrome the button will simply say “Pay Now”. If you don’t like the “Pay Now” variant of the button on desktop you may choose to hide the button so that it is only visible on mobile.

Will this work if I have Stripe instead of Stripe Connect?

No, last winter we upgraded the Stripe integration to the newer Stripe Connect to lay the foundation for implementing this new functionality. There is a huge banner on your dashboard that has been encouraging you to upgrade. All you need to do is migrate your connection. It’s easy, takes about 5 minutes, and will make it possible for you to utilize this new functionality.

Example of the Google Pay button in a mobile checkout

 

Example of the Google Pay button in a Desktop view

Frequently Asked Questions

Q: Reviewing our order history, we are seeing that some of our orders do not contain an CC number and the order was just recently placed. Why is the credit card missing?

A: If an order is processed via the Google/Apple pay method, the customer never provides their credit card details, the CC details are passed directly to your payment gateway. This is why upsell after offers and auto orders are not supported.

Q: I’m testing the apple Pay option from my iPhone, but it’s not appearing?

A: The apple pay payment option only appears in the Safari Browser. (The browser must also have a credit card on file in the browser.)

Related Documentation

https://ultracart.atlassian.net/wiki/spaces/ucdoc/pages/1377182/Stripe+Gateway+Integration?src=search