How to embed EPASS Click to Pay in your website

EPASS Support

25-Jun-2024

About this Article

This document outlines the procedure to embed EPASS Click to Pay (CTP) in your website. This integration will likely require the active participation of your IT and website development teams. Note that they may bill for their services.

Steps to Embed Click to Pay into your Website 

CTP can be integrated into your website in three steps, given below. These steps need to be performed in the order given.

Step 1 – Create a new page in your website

Start by creating a new page in your website called payment in which you can integrate Click to Pay in an iframe element. This page could have the URL /payment, where refers to the URL of your company website. For example, the URL of the new page could look like: https://epass.software/payment

Step 2 – Add the code snippet

Insert the following code snippet into the new page where you wish to display Click to Pay. If you are using WordPress or any similar CMS, make sure to add this code snippet as HTML code. If using CSS class for the iframe, make sure to have its height set to 100vh.

<iframe id="frame-epass-ctp" style="width: 100%;" height="100vh" frameborder="0"></iframe> 
<script type="text/javascript"> 

const baseUrl = "https://clicktopay-stage.epass.software/epass"; 
const profileId = "6dc604a4-4f4f-4152-ba19-35cbb3cb04e1"; 
function getQueryParam(name) { 
 try { 
 const urlParams = new URLSearchParams(window.location.search); 
 const temp = urlParams.get(name); 
 if (!temp) { 
 return temp; 
 } 
 return encodeURIComponent(temp); 
 } 
 catch { return ""; } 
} 
var tnValue = getQueryParam('tn'); 
if (!tnValue || tnValue.length < 1 || tnValue.trim() === '') { 
 tnValue = profileId; 
} 
const newSrc = `<span class="cke_token">__baseUr__</span>?tn=<span class="cke_token">__tnValu__</span>`; 
document.getElementById('frame-epass-ctp').src = newSrc; 
</script> 

   Important Notes: The code is customized for the Staging environment of Click to Pay. To use it in the Production environment, please make the following two changes to the script:

1. Replace the value of const baseUrl from "https://clicktopay-stage.epass.software/epass" to "https://clicktopay.epass.software/epass".
2. Replace the value of const profileId with the Profile GUID given to you by EPASS Support.

Step 3 – Optional: Add Pay Your Invoice button

Before going live with Click to Pay, you may optionally add a Pay Your Invoice button somewhere on your website that points to the new payment page you created.

What Does Click to Pay Look Like?

After completing the above steps, your new payment page should display Click to Pay in an iframe as shown below: