npm package: @medipass/checkout-sdk
Description: Medipass Checkout SDK
Latest version: 3.3.0

# Medipass Checkout SDK

The Medipass Checkout SDK is a client-side TypeScript library which allows you to interact with Medipass from your web interface. It has full TypeScript support.

## Table of Contents

- [Medipass Checkout SDK](#medipass-checkout-sdk)
  - [Table of Contents](#table-of-contents)
  - [Install](#install)
  - [Create Checkout](#create-checkout)
    - [Basic Usage](#basic-usage)
    - [With a `<script>` tag](#with-a-script-tag)
  - [Request To Update Patient Card Details](#request-to-update-patient-card-details)
    - [Example](#example)
    - [Using `<script>` tag](#using-script-tag)
  - [API](#api)
    - [sdk.init(config)](#sdkinitconfig)
      - [config](#config)
    - [sdk.createCheckout(config)](#sdkcreatecheckoutconfig)
      - [config](#config-1)

## Install

```
yarn add @medipass/checkout-sdk
```

or NPM:

```
npm install @medipass/checkout-sdk
```

## Create Checkout

A payment request URL is passed to the createCheckout function, which opens a secure pop-up window to Medipass to take the payment.

### Basic Usage

```jsx
import medipassCheckoutSDK from '@medipass/checkout-sdk';
// or: const medipassCheckoutSDK = require('@medipass/checkout-sdk');

medipassCheckoutSDK.init({
  env: 'stg',
  onSuccess: ({ transactionId }) => {
      // handle success
  },
  onFailure: ({ transactionId }) => {
      // handle failure
  },
  onCancel: ({ transactionId }) => {
      // handle cancel
  },
  onClose: () => {
      // handle close
  }
});

const paymentRequestUrl = getPaymentRequestUrl();

await medipassCheckoutSDK.createCheckout({
  paymentRequestUrl // the paymentRequestUrl returned after creating a Medipass invoice
});

```

### With a `<script>` tag

```html
<html>
  <head>
    <script src="https://unpkg.com/@medipass/checkout-sdk/dist/umd/index.min.js"></script>
  </head>
  <body>
    <script>
      medipassCheckoutSDK.init({
        env: 'stg',
        onSuccess: ({ transactionId }) => {
            // handle success
        },
        onFailure: ({ transactionId }) => {
            // handle failure
        },
        onCancel: ({ transactionId }) => {
            // handle cancel
        },
        onClose: () => {
            // handle close
        }
      });

      const paymentRequestUrl = getPaymentRequestUrl();

      medipassCheckoutSDK.createCheckout({
        paymentRequestUrl // the paymentRequestUrl returned after creating a Medipass invoice
      });
    </script>
  </body>
</html>
```

## Request To Update Patient Card Details

You can update a patient's payment details using the requestUpdatePaymentDetails function.

### Example

```jsx
import medipassCheckoutSDK from '@medipass/checkout-sdk';
// or: const medipassCheckoutSDK = require('@medipass/checkout-sdk');


await medipassCheckoutSDK.requestUpdatePaymentDetails({
  apiKey, // apiKey | undefined
  token, // token | undefined
  patientRefId, // patientRefId
  env, // 'stg' | 'prod'
  onSuccess, // Invoked when the payment method update has been successful
  onFailure, // Invoked when the payment method update has failed
  onCancel, // Invoked when the payment method update has been rejected
  onClose, // Invoked when the pop-up window has been closed by the user
  callbackOrigin // The origin of the window invoking the checkout SDK
});

```

### Using `<script>` tag

```html
<html>
  <head>
    <script src="https://unpkg.com/@medipass/checkout-sdk/dist/umd/index.min.js"></script>
  </head>
  <body>
    <script>

  medipassCheckoutSDK.requestUpdatePaymentDetails({
    apiKey, // apiKey | undefined
    token, // token | undefined
    patientRefId, // patientRefId
    env, // 'stg' | 'prod'
    onSuccess, // Invoked when the payment method update has been successful
    onFailure, // Invoked when the payment method update has failed
    onCancel, // Invoked when the payment method update has been rejected
    onClose, // Invoked when the pop-up window has been closed by the user
    callbackOrigin // The origin of the window invoking the checkout SDK
});
    </script>
  </body>
</html>
```

Take note of the following:

1. medipassCheckoutSDK.int() should not be called when using requestUpdatePaymentDetails
2. it is required that you pass either an apiKey or a token

## API

### sdk.init(config)

#### config

> `Object` | required

```js
{
  env: 'stg' | 'prod',
  onSuccess: function({ transactionId }) {}, // Invoked when the payment has been successful
  onFailure: function({ transactionId }) {}, // Invoked when the payment has failed
  onCancel: function({ transactionId }) {}, // Invoked when the payment has been rejected
  onClose: function() {} // Invoked when the pop-up window has been closed by the user before approving or rejecting the payment
}
```

### sdk.createCheckout(config)

#### config

> `Object` | required

```js
{
  paymentRequestUrl: string,
}
```