Nothing boosts conversions more than speed and trust during checkout. Express payment methods like Apple Pay, Google Pay, PayPal Express, Amazon Pay, or Shop Pay—which is being made available to merchants outside of Shopify—offer both features. With one click, customers can complete a purchase through a trusted provider. Adding those payment methods to your ecommerce website is one of the quickest and most effective ways to convert more customers and increase sales.
Express payments can be added to your checkout in two ways. First, you can just offer them as a payment option. After the customer adds their address and selects a shipping method, they can accelerate the last checkout step by paying with a digital wallet.
The second option is to offer an express checkout flow directly from the cart page or even the product page, bypassing the checkout flow completely. This is when the process is dramatically sped up and conversions can be more significantly improved.
It is a path that merchants love, and developers should too. The problem is that bypassing a standard checkout flow hides some possible challenges that can complicate the customer experience. In this article, we'll discuss some of those challenges and how to streamline integration.
Initiating the payment
Apple Pay, Google Pay, and other digital wallets can be complex and time-consuming to integrate directly. Because of this, leveraging a payment provider such as Stripe or Adyen is often a good idea.
Depending on the customer's browser and device, some payment methods may be available while others may not. For example, Apple Pay is available on Safari and Google Pay is available on Chrome. Since you don't know which browser the customer will use, all you can do is reserve a placeholder on the website and let the payment service provider present the available express payment options.
In order to respect the privacy of their customers, the payment service provider will only reveal a limited amount of information when you activate the payment button. When the payment has been successfully completed, you will receive all the information, but this can cause problems since the order amount may need to be calculated using that information.
As an example, when the payment button is initialized, the customer's shipping address might not be exposed, but only their country code. If your site offers different shipping options depending on a customer's zip code, how can you calculate the shipping cost?
Tax calculation can also be a challenge. In Europe, VAT is included in the price, so this scenario is straightforward. Instead, if you sell in the United States, sales taxes are added to the total amount based on the customer's address, which means you can't determine the total amount until you know the shipping address.
Generally speaking, the order amount you pass to the payment provider during an express checkout session can change, and it is your responsibility to ensure that amount is updated based on specific events.
Keeping the total amount updated
After the express payment button is initialized, the customer begins the checkout process using the provider's interface. During this session, the customer will select the credit card they wish to use for payment and the shipping and billing addresses associated with the order.
With each selection, the payment provider triggers events that enable you to update the total order amount and available shipping methods. The majority of payment providers allow you to update the checkout session in real time and update the customer interface accordingly. You should ensure that your code (or the commerce engine you use) can respond promptly to those events.
You should also keep in mind that the customer can always abandon their cart or choose another payment method. In some cart systems, you will need to add placeholder data to start the payment process when real customer information has not yet been entered. For the sake of consistency, make sure that data is cleaned up from your system in case the express checkout process is abandoned.
Handling coupons or gift cards
As a matter of fact, if speed and trust are the two main drivers of checkout conversions, discounts are right behind them. That said, it is generally not possible to enter a coupon code or gift card number when making an express payment. Therefore, if you run promotions based on discount codes or want to accept gift cards as an additional payment method, you should design a UI that allows customers to enter their codes before an express payment session begins. By doing this, any discount or partial payment will simply be added to the order total and it will be passed to the payment provider when the payment button is activated.