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 Or a PayPal Account

• StoreFront Visual Builder theme of a minimum version shown below

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.

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.

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

That is not a problem. You will want to configure PayPal at the top of the payments configuration. You can set PayPal to only be used for Apple Pay and Google Pay.

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 express checkout 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.

Example of the Google Pay button in a mobile checkout

Open

Example of the Google Pay button in a Desktop view

Open

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.)

Q: We released preorders to the A/R department and we are trying to process the released pre-orders, but the Apple Pay orders are not loading, instead we are getting the following error:
Unknown payment method(Apple Pay)specified for this order.
How do we process the order??

A: The apple pay payment option can only pre processed by the customer. In this situation, you’ll either need to reject the order and contact the customer requesting that they replace their order, or you can edit the order to change the payment type to credit card. You can either take the new CC details over the phone or after editing the payment type to credit card, navigate back to the A/R to send the customer the update billing notification.

Related Documentation

Stripe Gateway Integration Upgrading the latest PayPal payment processing integration