@checkout.com/checkout-web-components

CheckoutWebComponents Loader

Loader for CheckoutWebComponents.

---

Table of contents

• CheckoutWebComponents Loader
  • Table of contents
  • Documentation
  • Installation
  • Usage
  • Example
  • License

---

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.

---

License

This project is licensed under the MIT License.