Display SDK

The display-sdk is a library for creating and managing display elements for payment forms. It provides a simple API to initialize the SDK, create elements, and customize their styles and translations.

Installation

Install the SDK via npm:

npm install @payrails/display-sdk

Usage

Initialization

To use the SDK, initialize it with a response object and optional configuration options.

import { DisplaySDK, DisplaySDKOptions } from '@payrails/display-sdk';

const initResponse = 'response from /token/client/init';

const options: DisplaySDKOptions = {
  styles: {
    base: {
      color: 'black',
      fontSize: '16px',
    },
    cardNumber: {
      base: {
        color: 'blue',
      },
    },
  },
  translations: {
    base: {
      loading: 'Loading...',
    },
    cardNumber: {
      loading: 'Loading card number...',
    },
  },
};

const sdk = DisplaySDK.init(initResponse, options);

Creating Elements

You can create display elements for different types of input fields, such as card number, expiry date, etc.

import { DisplayElementType } from '@payrails/display-sdk';

const cardNumberElement = sdk.createElement(DisplayElementType.CardNumber);
const expiryMonthElement = sdk.createElement(DisplayElementType.ExpiryMonth);

Destroying Elements

To clean up and unmount all created elements, use the destroy method.

sdk.destroy();

Release Notes

1.0.5

• Fixed build order to have release notes on NPM

1.0.3

• Fixed README

1.0.2

• Added NEW element: copyToClipboard
• This new element allow users to create an element which allows copy / pasting sensitive card information securely

displaySDK.createElement(
  DisplayElementType.CopyToClipboard,
  {
    copyToClipboard: {
      fields: ['expiryMonth', 'expiryYear'],
      template: `{expiryMonth} / {expiryYear}`,
      icons: {
        default: 'https://some-merchant-assets/img/copy.svg',
        success: 'https://some-merchant-assets/img/check.svg',
        error: 'https://some-merchant-assets/img/error.svg',
      }
    }
  }
).mount('#copy-to-clipboard');

1.0.1

• Fixed a bug where Card Holder Name element uses an incorrect displayElement name

1.0.0

• Display SDK release with initial elements:
  • DisplayElementType.CardNumber
  • DisplayElementType.ExpiryYear
  • DisplayElementType.ExpiryMonth
  • DisplayElementType.SecurityCode
  • DisplayElementType.CardHolderName