Version: 3.2.0

Client SDK Code Library

Introduction

To implement the Charge SDK into a custom application, use the boilerplate below to assist you in the setting up and configuration to match your site.

Note: for optimal performance, it is more ideal to place this code at the bottom of the body tag.

JavaScript Boilerplate

<head>
  <script src="https://{domain-name}/form/v1/payment/dmg-ecomm-sdk.js"></script>
</head>
<body>
  ...

  <script>
    window._DataMeshAPICallback = function () {
      window.DataMesh.load({
        merchant_id: '<your-merchant-id',
        config_id: 'your-intended-config-id',
        order_id: 'order-id',
        locale: 'en-US',
        public_key: 'consumer-public-key',
        container: '#sdk-fe-wrapper',
        callback: () => {
          window.DataMesh.on("payment.completed", response => {
             // merchant payment response logic
          });
        }
      })
    }
  </script>

  ...
    <div id="sdk-fe-wrapper"></div>
  </body>

Replace domain-name with one of the following for the respective environment.
You can also replace <#sdk-fe-wrapper> with your own div element name.

Environment	Domain Name
Staging	https://dmg-ecommerce-backend.ecomm-stg.dmgsecure.io
Production	https://dmg-ecommerce-backend.ecomm.dmgsecure.io

Methods Available

The following methods are available

load()
on()
off()
destroy()

load() Method

This method is used to initialise and load the SDK iframe by passing the required parameters.

The DataMesh object is your entry point to the Client SDK, calling this method will instantiate the object.

Syntax: load(merchant_id,config_id,order_id,locale,public_key,container,callback)

Example

  window.DataMesh.load({
        merchant_id: '<your-merchant-id',
        config_id: 'your-intended-config-id',
        order_id: 'order-id',
        locale: 'en-US',
        public_key: 'consumer-public-key',
        container: '#sdk-fe-wrapper',
        callback: () => {
          window.DataMesh.on("payment.completed", response => {
             // merchant payment response logic
          });
        }
      })

Options

Name	Description	Type
`merchant_id`	REQUIRED - Unique identifier assigned by DataMesh to uniquely identify you. This is called service_id in the Charge API schema.	string
`config_id`	OPTIONAL - Unique identifier of custom configuration you created on the Merchant Dashboard.	string
`order_id`	Used as the order intent which your application back-end creates prior to launching the Charge SDK.	string
`locale`	OPTIONAL - Used to retrieve locale setting of your environment. Default to 'en-US'	string
`public_key`	REQUIRED - Consumer public key provided by DataMesh used to authenticate your request to launch the Charge SDK.	string
`container`	REQUIRED - Name of the element of your page that will contain the Charge SDK iFrame.	string
`callback`	OPTIONAL - Used to attach listens to DataMesh object once initiated.	string

on() Method

This method subscribes an event onto an eventHandler

Syntax: on(eventName, eventHandler)

Name	Description	Type
`eventName`	REQUIRED - The event code to refer to, to receive updates on. Refer to page Handle Client SDK Observer	String
`eventHandler`	REQUIRED - A function for the merchant to implement which allows merchant to implement logic on events being triggered by the SDK	Function(Event eventObject)

Object eventObject

{
  data: {
    type: 'STATUS',
    status: {
      status: 'payment.completed'
    }
  }
}

For example: by implementing the following code, the merchant will be able to run merchant logic for when successful payments have been created:

window.Datamesh.on('payment.completed', (response) => {
  // merchant logic
})

off() Method

This method removes an event handler.

Syntax: off(eventName, eventHandler)

Name	Description	Type
`eventName`	REQUIRED - The event to unsubscribe	String
`eventHandler`	REQUIRED - A handler function previously attached for the event	Function(Event eventObject)

destroy() Method

This method unloads and destroys the iFrame.

Syntax: destroy()

Use the method load() OR
Refresh the browser to load the iFrame again

Introduction​

JavaScript Boilerplate​

Methods Available

load() Method​

Example​

Options​

on() Method​

Object eventObject​

off() Method​

destroy() Method​