Widget v2.0

Read on setting up widget

It is required to use widget v2.0 to provide the KYC information which are sensitive and cannot be updated via KYC API. You need to follow the steps mentioned below to initialize and setup the widget v2.0.

To initialize the widget, you will need to first generate a Widget Token, which will only be valid for a certain time period. You will need to pass this token along with the Sender ID to widget initialization snippets.

GET /v2/senders/{senderId}/widget-token

Parameters

Field	Required	Type	Description
token	Response	String	Token Details
senderId	Yes	UUID	User ID
expiry_minutes	Response	Numeric	Token validity time

Request Sample

curl -X GET {{url}}/v2/senders/{senderId}/widget-token \
  -H 'Accept: application/json' \
  -H 'X-Client-Id: clientid' \
  -H 'X-Client-Secret: clientsecret'

Response Sample

{
  "token": "string",
  "sender_id": "UUID",
  "expiry_minutes": 60
}

1. Include the Widget Script

<script src="https://sandbox.api.machpay.com/v2/widget/widget.js" charset="utf-8"></script>

2. Create a div where widget needs to be placed.

<div id="widget-root"></div>

3. Initialize the Widget

<script>
  var widget = new MachnetWidget({
    elementId: "widget-root",
    width: "100%",
    height: "200px",
    type: "kyc",
    locale: "en",
    version: '2.0',
    fields: 'senderIdInfo|senderFullSSN',
    stylesheet: "https://example.com/mystyle.css",
    senderId: "62018cb0-e183-4a72-a691-844c213a693a",
    token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzZW5kZXJJZCI6Ik1qaGtZbVU1WkRBdFpURXlNQzAwTkRreExXSTRNREl0WVRCak16ZGlaV1EzWTJKbFxyXG4iLCJleHAiOjE1NjE2NDExNTcsIm10b0lkIjoiT1FcclxuIn0.f0yKZUt35VC_Mo2D8vk0Cbc_D-c2zAv9MAtmQi2zah8",
  });
  widget.init();
</script>

Property Name	Required	Type	Description
elementId	Yes	String	Target element where widget will be rendered.
senderId	Yes	String	senderId for whom the widget should be rendered.
width	Yes	Standard Size Dimension eg. 100px, 100%, 100em	Width of widget
height	Yes	Standard Size Dimension e.g. 100px, 100%, 100em	Height of widget
type	Yes	String	Type of Widget. kyc Widget v2.0 supports kyc widget type only.
locale	No	String	By default, this is set to English, For Korean pass ko and for English pass en. If left blank or invalid locale is sent it will fall back to default language.
stylesheet	No	URL	This stylesheet will override the default design of the widget.
token	Yes	String	Unique Token that needs to be generated using Generate Widget Token API.
version	Yes	String	1.0 is the default value. To use version 2.0 please include the version number in the script.
fields	Yes	String	The kyc fields provided will be rendered by the widget. To render multiple fields, fields will be concatenated and delimited by a pipe '|' character.

4. Add an Event Handler

Widget will trigger an event anytime there is changes in a resource. To listen to the events generated by the widget include below code snippet.

window.addEventListener("message", function (e) {
  <!--Here e.data holds the information about the event triggered. 
     e.data.type    = kyc
     e.data.status  = eventName
     e.data.message = additional message

 -->
  if(e.data.status === 'eventName'){
    //your action
  }
});

Event Name	Widget Type	Description
KYC FIELD FOUR_DIGIT_SSN SUBMITTED	kyc	Four digit SSN has been submitted by the user.
KYC FIELD FULL_DIGIT_SSN SUBMITTED	kyc	Full SSN has been submitted by the user.
KYC FIELD ID_INFO SUBMITTED	kyc	ID details have been submitted by the user.
KYC FIELD PROOF_OF_ADDRESS SUBMITTED	kyc	Proof of address document has been submitted by the user.
KYC FIELD SOURCE_OF_FUND SUBMITTED	kyc	Source of fund details have been submitted by the user.