@checkout.com/checkout-web-components NPM

CheckoutWebComponents Loader

Loader for CheckoutWebComponents.

CheckoutWebComponents Loader

Documentation

For more information on how to use the CheckoutWebComponents, please refer to the CheckoutWebComponents documentation.

Installation

Use npm to install the package.

npm install @checkout.com/checkout-web-components

Usage

The loadCheckoutWebComponents function is the entry point for the library.

The function returns a Promise resolving with a CheckoutWebComponents instance, and handles loading the CheckoutWebComponents script. This instance can then be used to create a Flow component that can be mounted.

import { loadCheckoutWebComponents } from '@checkout.com/checkout-web-components';

Example

// Insert your public key here
const publicKey = '{your_public_key}';

// Initialise a new Checkout Web Components instance
const checkout = await loadCheckoutWebComponents({
  paymentSession,
  publicKey,
  environment: 'sandbox'
});

// You can now create and mount a Flow component using 'checkout'
const flowComponent = checkout.create('flow');

// Mount Flow component to div element with an ID of 'flow-container'
flowComponent.mount('#flow-container');

You can find/create your public key in the Developers section of your Checkout.com Production Dashboard or Checkout.com Sandbox Dashboard. See our API keys documentation for more information.