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.

Request

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:

Request

curl -X POST "{{server_url}}auth" \\
  -H "Content-Type: application/json" \\
  -d '{
        "email": "[email protected]",
        "referenceID": "unique_customer_identifier",
      }'

Response

{
"iframeUrl": "<https://payram.resuefas.vip/referral/7ba88788dc8e287ed38e2e36fjst5c90>"
}

• 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

Request

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": "[email protected]",
        "referenceID": "unique_customer_identifier",
      }'

Response

"redirectURL": "https://payram.resuefas.vip/referral/7ba88788dc8e287ed38e2e36fa1e7c90"

Frontend JavaScript Integration

Add the following script to handle authentication, token refresh, and dynamic iframe height adjustments.

Code Sample

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 src upon 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.