Skip to content
Last updated

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

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

Initialise and render the April payment source UI

const paymentSourceUI = window.AprilCheckout.createPaymentSource();
paymentSourceUI.init({
    publicKey: 'live_pk_xxxxxxxxxxxxxxxxxxxxx', // required, merchant public key
    customerToken: customToken, // signed in customer token
    isB2B: false, // B2B only
    hideB2BUsageScopeOptions: false, // B2B only, hide "Save card for" options
    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

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

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;
}

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.
Previous page
Next page
Copyright © Spenda 2026 (formally known as April). All right reserved.