Embed the Referral Dashboard
Add the iframe
Insert the following iframe into your webpage. The srcshould be dynamically updated with the URL retrieved from your backend.
html
CopyEdit
<iframe id="payramIframe" src=""
style="width: 100%; min-height: 100%; border: none;"
allow="clipboard-read; clipboard-write">
</iframe>Implement Authentication
Your backend must fetch the iframe URL from Payram's API.
Call your backend when the page loads or when a token refresh is requested.
To receive the URL of the iframe from Payram you will need to send the email and unique reference ID for the user that is trying to access to the dashboard.
Example API request fromyour backend:
curl -X POST "{{server_url}}auth" \\
-H "Content-Type: application/json" \\
-d '{
"email": "user@example.com",
"referenceID": "unique_customer_identifier",
}'The API below must trigger the Payram API using your API key, it will receive the URL which can then be returned to the frontend
curl --location --request POST '<https://payram.resuefas.vip:8443/api/v1/referral/referrers/authenticate>" \\
-H "Content-Type: application/json" \\
-H "x-payram-api-key: YOUR_PAYRAM_API_KEY" \\
-d '{
"email": "user@example.com",
"referenceID": "unique_customer_identifier",
}'Frontend JavaScript Integration
Add the following script to handle authentication, token refresh, and dynamic iframe height adjustments.
html
CopyEdit
<script>
window.addEventListener('message', function(event) {
if (!event.data?.action) return;
if (event.data.action === 'refreshToken') {
authenticateUser();
} else if (event.data.action === 'heightChange') {
document.getElementById('payramIframe').style.height = event.data.payload + 'px';
}
});
function authenticateUser() {
fetch('/your-backend-endpoint')
.then(response => response.json())
.then(data => {
if (data?.iframeUrl) {
document.getElementById('payramIframe').src = data.iframeUrl;
} else {
console.error('Invalid response:', data);
}
})
.catch(error => console.error('Authentication error:', error));
}
authenticateUser(); // Authenticate on page load
</script>Finalizing the Setup
Update iframe
srcupon successful authentication.Listen for iframe messages to handle token refresh and height adjustments.
Implement error handling to ensure smooth user experience.
Next Steps:
Payram needs to understand the relationship between your referrers and referees. Lets see how to implement that.
Last updated