Checkout integration

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

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 Limepay. Never share your Secret API Key.

Limepay uses an authentication key header to authenticate API calls.

Step 2 - Displaying the Limepay 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="limepay-cont"></div>
<script src="https://checkout-v3.limepay.com.au/v3/checkout-v3.0.0.min.js"></script>
<script>
    var LimepayCheckout = window.LimepayCheckout.createCheckout();
    LimepayCheckout.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. */
        }
    });
    LimepayCheckout.render({
        elementId: "limepay-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)
    });
    LimepayCheckout.errorHandler(function (err) {
        // Handle errors
    });
    LimepayCheckout.eventHandler(function (event) {
        // Handle events
    });
</script>

LimepayCheckout.init inputs:

LimepayCheckout.render inputs:

Outputs:

The Limepay checkout will be rendered onto the web page.

Step 3 - Integrating the checkout

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

Error handler

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

LimepayCheckout.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 LimepayCheckout generates events which the host application can listen to through a callback function. Use

LimepayCheckout.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" } }

Limepay 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 Limepay 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.