Capturing payment sources

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

Registering and signing in a April 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 April customer by calling Upsert Customer with the UpsertConsumerCustomer action to retrieve a customerId .
  2. Sign in a customer by calling Sign In Customer with the SignInCustomer action providing the customerId from the previous step. This will provide you with a customToken .

Integrating the April payment source UI

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

Load the April checkout script

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

Initialise and render the April payment source UI

Copy
Copied
const paymentSourceUI = window.AprilCheckout.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 that 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 April checkout paymentData object, as described here.

Processing payments using a card payment source

Steps

  1. Create a new order by calling Create Order to retrieve a orderId .
  2. Request a card payment by calling Create Payment Token CreatedSavedCardToken action with a cardPaymentSourceId to retrieve a paymentTokenId .
  3. Pay for an order by calling Pay Order PayByCard action with an orderId and paymentTokenId .
Copyright © April Solutions 2023. All right reserved.