npm package: @payrails/display-sdk
Description: Javascript SDK for displaying sensitive data in compliant way
Author: Payrails GitHub Bot
Latest version: 1.0.7

# 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:

```bash
npm install @payrails/display-sdk
```

## Usage

### Initialization

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

```typescript
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.

```typescript
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.

```typescript
sdk.destroy();
```

## Release Notes

### 1.0.7

- Improved CopyToClipboard Element
  - Reorganized copyToClipboard options
  - Added support for button text
  - Added support for icon position (prefix, suffix)
  - Added new translation fields (error, success, buttonText)
  - Added event option (onClick)
- Legacy copyToClipboard options still supportive but gets overwritten if new
  options are provided

```typescript
displaySDK
  .createElement(DisplayElementType.CopyToClipboard, {
    copyToClipboard: {
      config: {
        fields: [DisplayElementType.ExpiryYear, DisplayElementType.ExpiryMonth],
        template: `{expiryYear} - {expiryMonth}`,
      },

      translations: {
        loading: 'Copying',
        error: 'Error!',
        success: 'Copied',
        buttonText: 'Copy',
      },

      styles: {
        iconPosition: 'suffix', // 'hidden', 'prefix', 'suffix'
        icons: {
          default: 'linkToDefaultIcon.svg',
          success: 'linkToSuccessIcon.svg',
          error: 'linkToErrorIcon.svg',
        },
        base: {
          backgroundColor: 'red',
        },
      },

      events: {
        onClick: (status: 'success' | 'error') => {
          alert(status);
        },
      },
    },
  })
  .mount('#copy-to-clipboard');
```

### 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

```TypeScript
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