Version: 4.0.3

Mounting the Charge SDK

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.

Creating a Payment Configuration

The merchant_id and config_id used to mount the SDK come from a payment configuration in the Merchant Dashboard:

Navigate to the Merchant Dashboard and select Payment Configuration, then Add Config.
Enter a name for the configuration.
Set the allowed origins for the Charge SDK (for development you can use *; lock this down for production).
Select the payment method types to enable.
Set the redirect URL for both approved and declined payments — see Redirect and Popup Flows.
Save, then note the Config ID (your config_id) and Token (your merchant_id).

Create a separate configuration per environment — the redirect URLs and origins differ between staging and production.

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',
        payment_flow_method: 'payment',
        callback: () => {
          window.Datamesh.on("payment.completed", response => {
             // merchant payment response logic
          });
          window.Datamesh.on("payment.failed", response => {
             // merchant payment failure 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 (IN)	https://dmg-ecommerce-backend.ecomm-prd.dmgsecure.io
Production (AU)	https://dmg-ecommerce-backend.ecomm-au.dmgsecure.io
Production (ID)	https://dmg-ecommerce-backend.ecomm-id.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 DMG to uniquely identify you. This is called service_id in the Charge API schema, and is shown as Token on the Merchant Dashboard's Payment Configuration page.	string
`config_id`	OPTIONAL - Unique identifier of custom configuration you created on the Merchant Dashboard (shown as Config ID). The configuration binds environment-specific settings including allowed origins, enabled payment methods, and the result-page redirect URLs — use the correct value for each environment.	string
`order_id`	Used as the order intent which your application back-end creates prior to launching the Charge SDK, via `POST /order_token`.	string
`locale`	OPTIONAL - Used to retrieve locale setting of your environment. Default to 'en-US'	string
`public_key`	REQUIRED - Consumer public key provided by DMG 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
`payment_flow_method`	OPTIONAL - The flow to initiate. Set to `payment` for the standard end-to-end payment flow. See Payment Flows.	string
`callback`	OPTIONAL - Used to attach listens to DMG 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​

Creating a Payment Configuration​

JavaScript Boilerplate​

Methods Available

load() Method​

Example​

Options​

on() Method​

Object eventObject​

off() Method​

destroy() Method​