Embedded Payment Tracking Integration Overview
Convera provides a fully integrated sandbox environment which allows you to test your integration. The sandbox environment will have all the features and functionality that are available in the production environment.
Sandbox : https://sandbox-uat.spm.convera.com/static/js/main.js
Production: https://paymentmodule.convera.com/static/js/main.js
Integration Steps
Step 1 - Import the Embedded Tracking Solution SDK
Using the below statement, import the Embedded Solution SDK.
Convera recommends loading the JavaScript SDK from the CDN URL rather than saving the JavaScript locally
<script src="https://sandbox-uat.spm.convera.com/static/js/main.js"></script>
Step 2 - Initiate Script
Once imported, the script needs to be initiated by passing the required fields below:
The merchant specific merchantID and merchantSecret are generated by Convera
| Field Name | Description | Type | Format |
|---|---|---|---|
| clientId | This is a unique ID that identifies a merchant in Convera's ecosystem | Required | String |
| merchantId | This is a unique ID that is generated by Convera | Required | String |
| merchantSecret | This is a unique secret that is generated by Convera | Required | String |
{
"paymentInformation": {
"clientId": 1000452465,
"merchantId": "0c420d9cae0f4f6f85aaddbde33e8063",
"merchantSecret": "K7jkj12hjhkjbdd"
}
}
Step 3 - White labeling (optional)
The Embedded Payment Tracker can be fully customized to align with your company's branding and design guidelines, ensuring consistency with your brand image.
Sample including theme:
Step 4 - Embed the Custom Tag
Insert the following HTML code into your website to integrate the payment tracking feature:
<!doctype html>
<html lang="en">
<head>
<script src="https://sandbox.spm.convera.com/static/js/main.js"></script>
<script>
var DATA_INPUT = '{"paymentInformation": {"clientId": 1000452465,"merchantId": "0c420d9cae0f4f6f85aaddbde33e8063","merchantSecret": "K7jkj12hjhkjbdd"}} ';let themeInfo=JSON.stringify({"primaryColor":"#ff595e","secondaryColor":"#6a4c93","accentColors":["#ff595e","#6a4c93","#2133AF"],"warningColor":"#6a4c93","primaryButtonColor":"\"Jersey 10\", sans-serif","fontName":"\"Jersey 10\", sans serif","fontUrl":"https://fonts.googleapis.com/css2?family=Jersey+10&display=swap"});let sellerInfo = `<convera-payment data-seller-info='${DATA_INPUT}' data-theme='${themeInfo}'></convera-payment>`;$('#sellerInput').html(sellerInfo);
</script>
</head>
<body>
<div id="sellerInput"></div>
</body>
</html>
Updated 8 days ago