Skip to main content

Frontend

Include our javascript library in the section of your HTML

json
   <script src="https://checkout-sandbox.epag.io/checkout-v0.1.js"></script>

Initiate the solution using HTML markup or Javascript:

Method I: HTML​

Mount the checkout and display the pay button. Click on it to lauch the lightbox.

html
  <body>
    <epag-checkout amount="137.76" asset="BRL" reference-id="MY_REFERENCE_ID" contract-id="MY_CONTRACT_ID" method="CREDITCARD">
    </epag-checkout>
  </body>

Method II: Javascript​

Option1: Mount the checkout and display the pay button in the specific element. Click on it to launch the lightbox.

javascript
    const ePagCheckout = new EPagCheckout({
      amount: 137.76,
      asset: "BRL",
      referenceId: "MY_REFERENCE_ID",
      contractId: "MY_CONTRACT_ID",
      method: "CREDITCARD",
    });
    ePagCheckout.mountIn('#checkout-container-element');

Option 2: Mount the checkout and launch immediately the lightbox. With this method the pay button will not get visible.

javascript
    const ePagCheckout = new EPagCheckout({
      amount: 137.76,
      asset: "BRL",
      referenceId: "MY_REFERENCE_ID",
      contractId: "MY_CONTRACT_ID",
      method: "CREDITCARD",
    });
    ePagCheckout.start();