The Littlepay Checkout Developer Hub

Welcome to the Littlepay Checkout developer hub. You'll find comprehensive guides and documentation to help you start working with Littlepay Checkout as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Javascript SDK

Littlepay Javascript SDK

statusstatus

Code Style: GoogleCode Style: Google

Checkout animationCheckout animation

Include the script

Load the script in your page. It should always be loaded directly from Littlepay, rather than hosted yourself.

Sandbox

<script src="https://static.checkout.sandbox.littlepay.com/littlepay-checkout.min.js"></script>

Production

<script src="https://static.checkout.littlepay.com/littlepay-checkout.min.js"></script>

Usage

Use window.LittlePay(), passing in a Config object, to create a Littlepay instance.

const littlepay = window.LittlePay(config)

Call makePayment() on this instance to launch the checkout. Call manageSavedCards() to launch the Manage Saved Cards ui. The target DOM element id is specified in config object. See payment flow example.

Instance functions

Optionally pass callbacks to handle success and error cases. In the event of any checkout errors, the callback will be called with a LittlePayError. Success callback is called when customer checkout flow is complete and transaction has been processed. The success callback takes no arguments.

makePayment(errorCallBack?: (err: LittlePayError) => void, successCallback?: () => void)

  For collecting payments

manageSavedCards()

  For launching customer card management ui. Not used for capturing payments

LittlePayError

For a list of error types and error codes, see Littlepay error documentation

An example:

{
  name: 'LittlePayError',
  type: 'PAYMENT_PERMANENT_ERROR',
  code: 'PAYMENT_DECLINED'
}

Config object

clientToken?: string (optional)

  (Required when using payOrder or setupSubscription The base64 string you receive when your server creates an Order or sets up a Subscription (see Checkout API Reference)

targetElementId: string

  CSS selector id for the container where Littlepay checkout should launch

options?: object (optional)

   address?: Address (optional)

   theme?: ThemeOptions; (optional)

      Customise the look of the checkout.

Address object

addressLineOne: string

  Line one of the address

townCity: string

postcode: string

country: string

  Country code as ISO-3166 alpha-2. See country codes in the ISO OBP.

ThemeOptions object

btnColor: string (optional)

  Background colour for primary buttons

btnTextColor: string (optional)

  Text colour for primary buttons

backgroundColor: string (optional)

  Used as background colour of card collection form

Payment Flow Example

In the below example, response contains data from the response received when your server calls the Littlepay API to create an Order or Subscription. You are responsible for passing data from the response to your client page.

const response = getclientTokenFromBackend();
const littlePay = window.LittlePay({
  clientToken: response.clientToken,
  targetElementId: 'littlepay-dropin-ui',
  options: {
    address: {
      addressLineOne: '10 Downing Street',
      townCity: 'London',
      postcode: 'SW1A',
      country: 'GB',
    },
    theme: {
      btnColor: '#FFFFFF',
      btnTextColor: '#FF5733',
      secondaryColor: '#3B4BF3',
    },
  },
});
littlePay.makePayment();

Manage Saved Cards Flow Example

In the below example, response contains data from the response received when your server calls the Littlepay API to fetch a clientToken. You are responsible for passing data from the response to your client page.

const response = getclientTokenFromBackend();
const littlePay = window.LittlePay({
  clientToken: response.clientToken,
  targetElementId: 'littlepay-dropin-ui',
  options: {
    address: {...},
    theme: {...},
  },
});
littlePay.manageSavedCards();

Content Security Policy

Content Security Policy is a web browser security feature that limits the origins of resources loaded on a webpage. It can help protect against certain malicious attacks, including Cross Site Scripting.
If your site enforces any of the following CSP directives, you must include the following sources to use Littlepay checkout.

DirectiveSandboxProduction
script-srchttps://static.checkout.sandbox.littlepay.comhttps://static.checkout.littlepay.com
https://verify.qa.au.littlepay.comhttps://verify.uk.littlepay.com
https://*.cardinalcommerce.comhttps://*.cardinalcommerce.com
style-srchttps://static.checkout.sandbox.littlepay.comhttps://static.checkout.littlepay.com
https://verify.qa.au.littlepay.comhttps://verify.uk.littlepay.com
https://fonts.googleapis.comhttps://fonts.googleapis.com
font-srchttps://fonts.gstatic.comhttps://fonts.gstatic.com
img-srchttps://static.checkout.sandbox.littlepay.comhttps://static.checkout.littlepay.com
frame-srchttps://verify.qa.au.littlepay.comhttps://verify.uk.littlepay.com
https://www.sandbox.paypal.comhttps://www.paypal.com
https://checkout.sandbox.littlepay.comhttps://checkout.littlepay.com
https://*.cardinalcommerce.comhttps://*.cardinalcommerce.com
form-actionhttps://*.cardinalcommerce.comhttps://*.cardinalcommerce.com
connect-srchttps://checkout.sandbox.littlepay.comhttps://checkout.littlepay.com
https://*.cardinalcommerce.comhttps://*.cardinalcommerce.com
https://sentry.iohttps://sentry.io
https://*.sentry.iohttps://*.sentry.io
wss://checkout-wss.sandbox.littlepay.comwss://checkout-wss.littlepay.com

Updated 12 days ago

Javascript SDK


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.