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.

Apple Pay Express Checkout

⚠️ To use Apple Pay Express Checkout, your Limio environment must be on at least v107.

Prerequisites

Before getting started, ensure that Apple Pay is properly configured in Limio and Zuora. You can find setup instructions here.

Once Apple Pay is set up as a payment method, you can use the OrderForm and ExpressApplePayButton components to display an Apple Pay button. This allows customers to complete their purchase in one click using Apple Pay.

OrderForm Component

The OrderForm component serves as a wrapper for Express Apple Pay and is responsible for:

• Validating the order

• Submitting the order

• Redirecting the user to the order completion page upon success

Props

• orderCompleteURL (Optional) The page the user will be redirected to after a successful order. Defaults to "/complete".

• onError A callback function triggered if an error occurs during order submission. It receives an error object with an error message and error code.

How It Works

• Once an order is successfully submitted, the component redirects the user to orderCompleteURL, appending the checkout ID and persisting tracking tags.

• If an error occurs, onError is triggered with the error details.

---

ExpressApplePayButton Component

The ExpressApplePayButton component renders an Apple Pay button that processes payments via the Apple Pay wallet and submits orders to Limio.Props

• onClick (Optional but recommended) Callback function executed before triggering Apple Pay. Useful for resetting errors or handling UI updates.

• children (Optional) Any child components to be rendered inside the button.

---

Example Usage

Here’s how you can use the OrderForm, and ExpressApplePayButton components to enable Apple Pay:

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


function ExpressApplePayComponent() {
const { offers } = useCampaign();
const { addOfferToBasket } = useBasket();
const [error, setError] = useState("");

function handleError(error) {
  setError(error.message);
}

return (
  <section>
    {offers.map((offer) => (
      <div key={offer.id}>
        <p>{offer.name}</p>
        <button
          onClick={() => {
            addOfferToBasket(offer, { quantity: 1 });
          }}
        >
          Add offer to cart
        </button>
      </div>
    ))}
    <OrderForm orderCompleteURL="/complete-2/" onError={handleError}>
        <ExpressApplePayButton onClick={() => setError("")}>
          Pay with Apple Pay
        </ExpressApplePayButton>
      {error && <div>{error}</div>}
    </OrderForm>
  </section>
);

}

How are customer details handled in the order?

• For authenticated users, the first name, last name and email on the order are pulled from the authentication token.

• For anonymous users, the first name, last name and email come from Apple Pay.

Known Limitations

1. Authentication

   • Unlike a standard checkout flow, users cannot change their details during checkout.

2. Digital Offers Only

   • This implementation only supports digital offers (i.e., products that do not require a delivery address).

3. Apple Pay Limitations in Zuora & Limio

   • Supported Payment Methods: Zuora only supports Apple Pay with credit cards on specific payment gateway integrations.

   • Recurring Payments: Apple Pay recurring transactions are processed like credit card transactions.

   • Browser Compatibility: Apple Pay for the web only works in Safari. Customers must be informed to use Safari for checkout.

Google Pay Express Checkout

⚠️ To use Google Pay, your Limio environment must be on at least v102.

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.