Express Checkout

Steps to use Express checkout methods in custom components

Currently, Limio supports the use of express checkout for Apple Pay only. ⚠️ Your Limio environment must be on at least V88.0 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.