How to Integrate Widget?

1. Copy-paste the following code inside the HTML tag of the page where you want to show the widget:

<script src="https://beta.ekoconnect.in/widget/import-eko-connect-widget.js"></script>

2. Copy-paste the following code inside the HTML tag of the page where you want to show the widget.

<tf-eko-connect-widget
     id="ekowidget"
     transaction-flow="remittance"
     developer-key="becbbce45f79c6f5109f848acd540567"
     secret-key="a6dGwEILHdlezzy1ZycRvKuUr6+6yqAOd7OlL4dvQvc="
     secret-key-timestamp="1512158087256"
     initiator-id="9910028267"
     merchant-document-id-type="1"
     merchant-document-id="AABTG6381M"
     pincode="122003"
     language="en"
     debug>
</tf-eko-connect-widget>

📘

Note

• The value of transaction-flow changes which widget will be shown. Use the following values:

  • remittance: widget for Domestic Money Transfer
  • remittance_refund: widget for Refund of Domestic Money Transfer
  • indonepal: widget for Money Transfer to Nepal

• The values of developer-key & initiator-id should be configured on your server with your own values and replaced within the code mentioned

• The values of secret-key & secret-key-timestamp must be generated on your server and inserted in the page during server-side-rendering. It must not be hard-coded in the page! (For generating these values, please refer to the Authentication section)

• The values of merchant-document-id-type, merchant-document-id & pincode corresponds to your user/retailer/merchant currently using your portal. These values must be inserted into the page from your server after the user logs-in.

• The attribute merchant-document-id-type can have two possible values:

  • 1 - for PAN Card
  • 2 - for Aadhaar Card

🚧

Debugging the Widget

The debug flag is only used for testing the widget and the internal API calls. Remove it from the final code for production.

❗️

Note

Please ensure you implement transaction inquiry API separately in case a transaction fails due to network issues and you need to verify the status of the transaction

NEXT STEPS:

• Implement Debit-Hook Listener to validate transaction and capture transactions in your database (See Security & Validation section)

• Implement Eko-Response Listener to update your database for successful or failed transaction status (See Capture Widget Response section)

• Implement Eko-Network-Error Listener to handle and confirm transaction status in case of network issues (See Capture Widget Response section)