Express Checkout

Steps to use Express checkout methods in custom components

Currently, Limio supports the use of express checkout for Apple Pay and Google Pay. ⚠️ To use Google Pay, your Limio environment must be on at least v102.

Apple Pay Express Checkout

Before starting you will need to have configured Apple Pay in Limio and Zuora. Learn more on how to configure it here for more details. Once Apple Pay is set up as a payment method to be used in Limio, you can use the custom hook provided by Limio to display the Apple Pay button. The button will allow users to checkout in one click using Apple Pay as a payment method.

The useZuoraApplePayButton hook returns the following:

1. isApplePayAvailable: Boolean indicating whether Apple Pay is an available payment method to be used i.e. when Apple Pay's canMakePaymentsWithActiveCard function returns true.

2. hasError: Boolean that is true when there has been an error in fetching the Apple Pay payment method and submitting the order.

3. ApplePayButton: A react component that displays the Apple Pay Button.

import React, { useState } from "react"
import { usePage } from "@limio/sdk"
import { useZuoraApplePayButton } from "@limio/payment-sdk"

const ExpressCheckoutButton = () => {
  const { getOffers } = usePage()  
  const offers = getOffers()
  
  const [selectedOffer, setSelectedOffer] = useState(offers[0])
  const { ApplePayButton, isApplePayAvailable, hasError } = useZuoraApplePayButton()
    
   return (
    <section>
      {offers.map(offer => (
        <div key={offer.id}>
          <h1>{offer.name}</h1>
          <button onClick={() => setSelectedOffer(offer)}>
          </button>
        </div>
      ))}
      {isApplePayAvailable && 
       <ApplePayButton offer={selectedOffer} quantity={1} orderCompleteURL={"/complete/"}> 
         Pay with Apple Pay Quickly
       </ApplePayButton>
       {hasError && 
        <p>
         There has been an error 
        </p>
       }
      }
    </section>
  )
}

The ApplePayButton component is returned from the useZuoraApplePayButton hook and accepts three props:

1. Offer: This is the Limio Offer that is intended to be purchased when the user clicks. If no offer is passed into the component, order processing will not take place.

2. Quantity:The amount intended to be purchased. If not declared, this will default to 1.

3. orderCompleteURL: The url where the user will be redirected on successful purchase.

Known Limitations

1. A user must be authenticated for the order to be processed. This implementation uses the user details from the auth token and passes them to the order. This is unlike a 'standard' checkout flow where a user may be able to change their details. If the user details are not available, then an error message will be output in the console.

2. With the current implementation, it is possible to only purchase digital offers, i.e. offers that do not require a delivery address.

As well as these, the normal limitations of using Apple Pay in Limio and Zuora apply:

• Currently, Zuora only supports setting up Apple Pay with credit cards and processing Apple Pay payments on specific payment gateway integrations.

• Recurring transactions through Apple Pay will be processed identically to credit card transactions.

• Apple only allows users to make web-based Apple Pay payments on Safari. Therefore, you should explicitly inform your customers to visit your website using Safari.

Google Pay Express Checkout

The Payment SDK exposes 2 potential uses of the Google Pay Button.

The possible imports are:

import { useGooglePay, GooglePayButton } from "@limio/payment-sdk"

In both options below, the button has a click handler registered and the checkout flow set up to populate all fields as required with information from Google Pay. If the offer has delivery, then the request to Google Pay will handle this and present a form in the payment sheet.

Option 1

GooglePayButton is a component - it takes offer, buttonType, buttonColor, buttonRadius, orderCompleteUrl, redirectUrl = "" where offer is the offer being purchased from the page/campaign, orderCompleteUrl is the page the user will end up on after success, redirectUrl is a fallback to access a checkout with a populated basket (more later), and the others are configurable button aspects.

For more information on customising a button, read the Google documentation here. The component will internally interact with our provided hook and will return html in the format:

<div data-testid="google-pay-container"> 
    <div id="google-pay-button-container" ref={setButtonContainer}></div>
</div>

The button will automatically load and register as soon as the Google Pay script has loaded and the setup is complete. If the user is not able to make a purchase using Google Pay according to the settings (no valid card, not registered for Google Pay etc), the component should render a html button which will add the item to the basket and it can redirect to wherever the target redirectUrl is (such as “/checkout”). This button is unstyled and will use the cta text of the offer or the string Subscribe as the CTA.

Option 2

Use the hook and provide your own flow and create the button as necessary.

It requires useGooglePay(initialOffer, orderCompleteURL = "/complete")

which returns

{ 
    createButton: Function, 
    setOffer: Function, 
    client: Google Pay Window Object, 
    initialized: Boolean 
}

• createButton → (containerRef, fallbackButton, { phoneRequired, buttonConfig })

  • containerRef is the ref of the html element that is being targeted

  • fallbackButton should be a React component to render in the ref in event of a lack of capability to use Google Pay

  • phoneRequired is an option

  • buttonConfig is an option and should be an object in the form

There is no return value for createButton. It will render either the Google Pay Button or the fallback button at the ref of the target container.

{ 
    buttonColor: buttonColor, 
    buttonType: buttonType, 
    buttonRadius: buttonRadius, 
}

• initialized will be true when Google Pay is available, as well as the client populated.

• setOffer is a stateful variable which can be set to any offer allowing for a selectable offer flow and a single button to initiate purchase. Changing an offer can be done by setOffer(offer). It is important that this is the user selected item as it is used in the order process. It is suggested to check the client, initialized and html ref are truthful prior to calling createButton to prevent errors.

Test the Integration:

The mode key for Google Pay is set in the Limio App Google Settings. It should be "TEST". If it is TEST Google pay should work in a recent chrome browser. There is no additional configuration expected for express checkout. If Google Pay is testable in the normal checkout flow and the component works it should display the button as expected. If testing an iframe Limio already adds the allow payment value to the framed response. Google Pay test cards are available here for the respective integration. Google Pay has a group available on the page to sign up to which will provide test cards in TEST environments automatically.