SimpleCheckout SDK

A modern, reusable TypeScript package for securely storing credit card information using SimpleCheckout.

Installation

npm install simplecheckout-sdk

Quick Start

Credit Card Form

import SimpleCheckout from 'simplecheckout-sdk';

// Initialize SimpleCheckout with your publishable key
const simplecheckout = new SimpleCheckout('pk_sandbox_xxxx');

// Create and mount a credit card form
const creditCardForm = await simplecheckout.initEmbeddedCreditCardForm({
  customerId: 'customer_uuid',  // Required: Your customer's unique identifier
  onSuccess: (result) => {
    console.log('Card stored! Token:', result.token);
    // Use the token in your application
  },
  onError: (error) => {
    console.error('Error:', error.message);
  }
});

// Mount the form to a container
creditCardForm.mount('#container');

CVC Verification Form

const simplecheckout = new SimpleCheckout('pk_sandbox_xxxx');

// Create and mount a CVC verification form
const cvcForm = await simplecheckout.initCVCVerificationForm({
  code: 'verification_code_from_url',
  onSuccess: (result) => {
    console.log('CVC verified successfully!');
  },
  onError: (error) => {
    console.error('Verification failed:', error.message);
  }
});

// Mount the form to a container
cvcForm.mount('#container');

Account Form

Connect customer accounts for third-party shops (e.g., Zara, Nike) in a secure, write-only manner.

const simplecheckout = new SimpleCheckout('pk_sandbox_xxxx');

// Create and mount an account form to connect shop accounts
const accountForm = await simplecheckout.initAccountForm({
  customerId: 'customer_uuid',       // required - your customer's ID
  loginSourceId: 'login_source_uuid',// required - the shop/service ID
  onSuccess: (result) => {
    console.log('Account connected successfully!');
    console.log('Account ID:', result.id);
    console.log('Is default:', result.is_default);
  },
  onError: (error) => {
    console.error('Error connecting account:', error.message);
  }
});

// Mount to a DOM container
accountForm.mount('#account-container');

Key Features:

• Personalized experiences: Enable your customers to connect their accounts from other shops for tailored recommendations and personalized shopping
• Simple integration: Easy-to-use form that seamlessly fits into your application flow.

Response Format:

{
  id: string;            // Account record ID
  customer_id: string;   // Your customer's ID
  login_source_id: string; // The shop/service ID
  is_default: boolean;   // Whether this is the default account
  label: string;         // Optional label for the account
  created_at: string;    // ISO 8601 timestamp
  updated_at: string;    // ISO 8601 timestamp
}

HTML Setup

<!-- Just provide a container element -->
<div id="container"></div>

That's it! The SimpleCheckout package will handle everything else.

API Reference

SimpleCheckout(publishableKey)

Creates a new SimpleCheckout instance.

Parameters:

• publishableKey (string, required) - Your SimpleCheckout publishable key

Returns: SimpleCheckout instance

simplecheckout.listLoginSources()

Fetches all available login sources (shops/services) that customers can connect their accounts to.

const simplecheckout = new SimpleCheckout('pk_sandbox_xxxx');

const response = await simplecheckout.listLoginSources();
console.log(response.login_sources); // Array of login sources
console.log(response.total);         // Total count

Returns: Promise

Response Format:

{
  login_sources: [
    {
      id: string;      // Login source ID (use this for initAccountForm)
      domain: string;  // e.g., "zara.com"
      name: string;    // e.g., "Zara"
    }
  ],
  total: number;
}

simplecheckout.initEmbeddedCreditCardForm(options)

Creates a new embedded credit card form.

Parameters:

• options (object, required) - Form configuration options

Options:

• customerId (string, required) - Your customer's unique identifier
• onSuccess (function, optional) - Callback when card is stored successfully
• onError (function, optional) - Callback when an error occurs
• styling (object, optional) - Custom field styling

Returns: Promise - The credit card form instance

creditCardForm.mount(selector)

Mounts the form to a container element.

Parameters:

• selector (string) - CSS selector for the container element

Returns: CreditCardForm - Returns self for chaining

creditCardForm.unmount()

Unmounts the form from its container.

Returns: CreditCardForm - Returns self for chaining

creditCardForm.submit()

Submits the form programmatically.

Returns: Promise - Promise resolving to the card token data

creditCardForm.getState()

Gets the current form state.

Returns: Object - Current form state

creditCardForm.updateStyling(styling)

Updates the form styling.

Parameters:

• styling (object) - New styling options

Returns: CreditCardForm - Returns self for chaining

simplecheckout.initCVCVerificationForm(options)

Creates a new CVC verification form.

Parameters:

• options (object) - Form configuration options

Options:

• code (string, required) - The verification code from the URL
• onSuccess (function) - Callback when CVC is verified successfully
• onError (function) - Callback when verification fails
• styling (object) - Custom field styling (optional)

Returns: Promise - The CVC verification form instance

cvcVerificationForm.mount(selector)

Mounts the form to a container element.

Parameters:

• selector (string) - CSS selector for the container element

Returns: CVCVerificationForm - Returns self for chaining

cvcVerificationForm.unmount()

Unmounts the form from its container.

Returns: CVCVerificationForm - Returns self for chaining

cvcVerificationForm.submit()

Submits the form programmatically.

Returns: Promise - Promise resolving to the verification result

cvcVerificationForm.updateStyling(styling)

Updates the form styling.

Parameters:

• styling (object) - New styling options

Returns: CVCVerificationForm - Returns self for chaining

simplecheckout.initAccountForm(options)

Creates a new account form for connecting customer accounts to third-party shops.

Parameters:

• options (object) - Account form configuration options

Options:

• customerId (string, required) - Your customer's unique ID
• loginSourceId (string, required) - The shop/service ID to connect
• onSuccess (function) - Callback when account is connected successfully
• onError (function) - Callback when an error occurs

Returns: Promise - The account form instance

accountForm.mount(selector)

Mounts the form to a container element. The form will be automatically styled with the shop's branding (logo, name, colors).

Parameters:

• selector (string) - CSS selector for the container element

Returns: AccountForm - Returns self for chaining

accountForm.unmount()

Unmounts the form from its container.

Returns: AccountForm - Returns self for chaining

License

MIT License - see LICENSE file for details.