Capturing payment sources

After registering and signing in Limepay customers, Merchants can integrate the Limepay payment source UI to capture payment sources and process card payments.

Registering and signing in a Limepay customer

IMPORTANT

These instructions are for consumer (B2C) merchants only. Business to business (B2B) merchants should follow the B2B customer onboarding documentation.

Steps

  1. Register a new Limepay customer by calling Consumer Customer [Upsert] to retrieve a customerId .
  2. Sign in a customer by calling Customer With Customer Id [Signin] with a customerId to retrieve a customToken .

Integrating the Limepay payment source UI

Initialise the Limepay payment source UI with a signed in customer customToken and register a submitCallbackFunction to retrieve a cardPaymentSourceId.

Load the Limepay checkout script

Copy
Copied
<script src="https://checkout-v3.limepay.com.au/v3/checkout-v3.0.0.min.js"></script>

Initialise and render the Limepay payment source UI

Copy
Copied
const paymentSourceUI = window.LimepayCheckout.createPaymentSource();
paymentSourceUI.init({
    publicKey: 'live_pk_xxxxxxxxxxxxxxxxxxxxx', // required, merchant public key
    customerToken: customToken, // signed in customer token
    submitCallbackFunction: (paymentSource) => {
        if(paymentSource.cardPaymentSource) {
            // retrieve cardPaymentSourceId
            const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
        }
    },
    errorCallbackFunction: (error) => {
        // handle errors
    }
});
paymentSourceUI.render({
    elementId: 'payment-source-container', // required, parent HTML element ID
    showSubmit: true, // hide the Submit button
    hideSavedCards: false, // hide previously saved cards
    primaryColor: '#b29572' // theme primary color (HEX)
});
WARNING

If a valid customerToken is not provided the payment source UI will create a temporary cardPaymentSourceId which will expire in 10 minutes.

Optional: submit a payment source programmatically

Copy
Copied
paymentSourceUI.render({
    ...options,
    showSubmit: false // hide the Submit button
});
paymentSourceUI.submit((paymentSource) => {
    if(paymentSource.cardPaymentSource) {
        // retrieve cardPaymentSourceId
        const cardPaymentSourceId = paymentSource.cardPaymentSource.cardPaymentSourceId;
    }
});

The paymentSource object

Copy
Copied
type CardPaymentSource = {
  cardPaymentSourceId: string;
  last4: string;
  cardBin: string;
  brand: '' | 'American Express' | 'MasterCard' | 'Visa';
  funding: 'credit' | 'debit' | 'chargecard' | 'prepaid' | 'deferreddebit' | 'unknown';
  expMonth: number;
  expYear: number;
  country: string;
}
type PaymentSource = {
  cardPaymentSource?: CardPaymentSource;
}
info

Merchants can also retrieve a signed in customer paymentSource from the Limepay checkout paymentData object, as described here.

Processing payments using a card payment source

Steps

  1. Create a new order by calling Order [Create] to retrieve a merchantOrderId .
  2. Request a card payment by calling Saved Pay Card [Create] with a cardPaymentSourceId to retrieve a paymentTokenId .
  3. Pay for an order by calling Order [Pay] with a merchantOrderId and paymentTokenId .
Copyright © April Solutions 2023. All right reserved.