Checkout integration

The first stage in integrating the standard April package is integrating the visible checkout onto the web store page.

Before beginning, you may wish to familiarise yourself with the checkout workflow in the technical diagrams documentation pages.

Step 1 - Finding your API access keys

Open your merchant dashboard and find your unique Publishable and Secret API Keys.

Your Publishable API Key is used for all outgoing communications from the frontend of your website and checkout page, while your Secret API Key is used for server-side communication with April. Never share your Secret API Key.

April uses an authentication key header to authenticate API calls.

Step 2 - Displaying the April checkout

Insert the javascript below into your checkout page and replace the publicKey: entry “live_pk_xxxxxxxxxxxxxxxxxxxxx” with your unique Publishable API Key of the same format.

<div id="april-cont"></div>
<script src="https://checkout-v3.au.meetapril.io/v3/checkout-v3.0.0.min.js"></script>
<script>
    const AprilCheckout = window.AprilCheckout.createCheckout();
    AprilCheckout.init({
        publicKey: "live_pk_xxxxxxxxxxxxxxxxxxxxx",
        email: "buyer@gmail.com",  // optional
        customerToken: "",  // optional, note this is used instead of email for B2B and in-store flows.
        customerFirstName: "John",  // optional
        customerMiddleName: "",  // optional
        customerLastName: "Doe",  // optional
        customerResidentialAddress: "283 Clarence Street, Sydney NSW 2000",  // optional
        hidePayLaterOption: false,  /* optional (default false),
            can pass (true or false), it will show/hide the BNPL option */
        paymentToken: function(token, paymentData) { /* Once the checkout is complete this function will be called.
            Use the `token` on your server to complete the transaction. */
        }
    });
    AprilCheckout.render({
        elementId: "april-cont",
        currency: "AUD",
        amount: 15000,  // should be in cents (integer)
        paymentType: "paycard", /* Optional (default "paycard"),
            selected payment option ("paycard" or "payplan") */
        showPayNow: true,  /* Optional,
            enables Pay Now button for pay by card option */
        showPayPlanSubmit: true,  /* Optional,
            enables Submit Payment Plan button for split payments option */
        primaryColor: '#793DE4' // Optional, theme primary color (HEX)
    });
    AprilCheckout.errorHandler(function (err) {
        // Handle errors
    });
    AprilCheckout.eventHandler(function (event) {
        // Handle events
    });
</script>

AprilCheckout.init inputs:

AprilCheckout.render inputs:

Outputs:

The April checkout will be rendered onto the web page.

Step 3 - Integrating the checkout

Implement the following methods, as required, to integrate the April checkout into the merchant's store:

Error handler

The host application can listen to any errors occurring within the AprilCheckout by registering a callback function via the

AprilCheckout.errorHandler(function(err) { // Process });

method. The callback function is passed the single argument err - a JSON object with the following structure:

{ message: "error reason" }

Event handler

The AprilCheckout generates events which the host application can listen to through a callback function. Use

AprilCheckout.eventHandler(function(event) { // Process });

to register a callback function for event handling. The callback function is passed the single argument event - a JSON object with following structure:

{ eventName: "event_name", eventData: { key: "value" } }

April currently supports the following events:

• Toggled payment type
  Copy

  Copied

  {
      eventName: "limepay_toggled_payment_type",
      eventData: {
          paymentType: "payplan"
      }
  }

  info

  PaymentType is either payplan (instalments) or paycard (full payment)

• Payment plan terms accepted
  Copy

  Copied

  {
      eventName: "limepay_payment_plan_terms_accepted"
  }

• First payment amount charged
  Copy

  Copied

  {
      eventName: "limepay_first_payment_amount_changed",
      eventData: {
          previousFirstPaymentAmount: 2500,
          updatedFirstPaymentAmount: 4500,
          currency: "AUD"
      }
  }

The paymentData object

The April checkout will also pass a second paymentData argument to the paymentToken callback containing additional payment details:

paymentToken: (token: string, paymentData: PaymentData) => { }

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;
}
type PaymentData = {
  amount: number;
  currency: 'AUD' | 'NZD';
  payType: 'PayInFull' | 'PayPlan';
  paymentMethodType: 'Card' | 'NetworkToken' | 'DirectDebit';
  paymentSource?: PaymentSource;
}

What's next?

Configure payment processing to enable correct transaction functionality.

Configure error and payment action handling.

Visit the testing documentation page to confirm the integration is fully functional.

Return to the initial direct API integration landing page.

Return to documentation home.