@medipass/checkout-sdk

v3.4.0

Published

8 days ago

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.

Medipass Checkout SDK

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

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>
  <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. The recommended approach is to create the payment method update URL on your server, then pass that URL to the SDK.

Preferred URL usage

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

const paymentMethodUpdateUrl = await getPaymentMethodUpdateUrl();

await medipassCheckoutSDK.requestUpdatePaymentDetails({
  paymentMethodUpdateUrl, // the URL returned after creating a payment method update request
  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
});

Using `<script>` tag

<html>
  <head>
    <script src="https://unpkg.com/@medipass/checkout-sdk/dist/umd/index.min.js"></script>
  </head>
  <body>
    <script>
      const paymentMethodUpdateUrl = getPaymentMethodUpdateUrl();

      medipassCheckoutSDK.requestUpdatePaymentDetails({
        paymentMethodUpdateUrl, // the URL returned after creating a payment method update request
        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
      });
    </script>
  </body>
</html>

Legacy credential usage

Passing an apiKey or token directly to the SDK is still supported for backwards compatibility. Prefer paymentMethodUpdateUrl for new integrations so business-wide credentials are not exposed in the browser.

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
});

Take note of the following:

medipassCheckoutSDK.init() should not be called when using requestUpdatePaymentDetails
Pass paymentMethodUpdateUrl for new integrations, or either apiKey or token for legacy integrations

API

sdk.init(config)

config

Object | required

{
  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

{
  paymentRequestUrl: string,
}

sdk.requestUpdatePaymentDetails(config)

config

Object | required

Preferred URL mode:

{
  paymentMethodUpdateUrl: string,
  env: 'stg' | 'prod',
  onSuccess: function() {},
  onFailure: function() {},
  onCancel: function() {},
  onClose: function() {}
}

Legacy credential mode:

{
  apiKey: string, // or token: string
  patientRefId: string,
  env: 'stg' | 'prod',
  onSuccess: function() {},
  onFailure: function() {},
  onCancel: function() {},
  onClose: function() {},
  callbackOrigin: string,
  appId: string, // optional
  sendSms: boolean // optional
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Medipass Checkout SDK

Table of Contents

Install

Create Checkout

Basic Usage

With a <script> tag

Request To Update Patient Card Details

Preferred URL usage

Using <script> tag

Legacy credential usage

API

sdk.init(config)

config

sdk.createCheckout(config)

config

sdk.requestUpdatePaymentDetails(config)

config

With a `<script>` tag

Using `<script>` tag