Checkout Payments – Frontend Enabler SDK

TypeScript SDK for building frontend payment enablers. The Enabler Module is a JavaScript library that runs in the browser during the commercetools checkout process. This library helps you to spin up your own enabler in no time.

Installation

# Using pnpm
pnpm add @commercetools/checkout-payments-enabler-sdk

# Using npm
npm install @commercetools/checkout-payments-enabler-sdk

# Using yarn
yarn add @commercetools/checkout-payments-enabler-sdk

Key features

• Drop-in component types for pre-built payment UIs
• Web component types for custom payment integrations
• Express checkout types
• Stored payment method types

Drop-in components vs payment components

When integrating with commercetools Checkout, you can use:

| Approach | Description | | -------- | ----------- | | Drop-in components | Pre-built, fully managed UI from the PSP's UI kit. Ideal for quick integration with minimal custom development. Supports multiple payment methods out of the box. | | Web components | Customizable integration. You choose which payment methods to support and implement. Fully customizable UI and logic; requires more development than drop-in. |

What's included

• Drop-in types – DropinBuilder, DropinType for pre-built payment UIs
• Web component types – WebComponentBuilder for custom payment integrations
• Enabler interface – PaymentEnabler with createComponentBuilder, createDropinBuilder, createStoredPaymentMethodBuilder, createExpressBuilder, etc.
• Express checkout types – PaymentExpressBuilder for express payment methods (e.g. PayPal)
• Stored payment method types – StoredComponentBuilder, StoredPaymentMethod for saved payment methods
• Payment method type – Re-exported from @commercetools/checkout-payments-core

Example usage

import type {
  PaymentEnabler,
  WebComponentBuilder,
  DropinBuilder,
  PaymentMethodType,
} from '@commercetools/checkout-payments-enabler-sdk';

// Type your enabler implementation
const enabler: PaymentEnabler = {
  createComponentBuilder: async (type: string) => { /* ... */ },
  createDropinBuilder: async (type) => { /* ... */ },
  createStoredPaymentMethodBuilder: async (type: string) => { /* ... */ },
  createExpressBuilder: async (type: string) => { /* ... */ },
  isStoredPaymentMethodsEnabled: async () => true,
  getStoredPaymentMethods: async (allowedMethodTypes) => ({ /* ... */ }),
};

// Use builders for payment UI
const componentBuilder: WebComponentBuilder = await enabler.createComponentBuilder('card');
const dropinBuilder: DropinBuilder = await enabler.createDropinBuilder('dropin');

For full checkout architecture and processor integration, see the root README of the checkout-sdks monorepo.

Authors

This library is created by Commercetools and the commercetools Checkout team.