​
Setup your development

To manually load Checkout.js, simply add the script link to the <head> of any page.

<script src="https://cdn.transactbridge.com/scripts/iframe.js"></script>

​
Sample HTML File

Here is a sample HTML file that demonstrates how to load Checkout.js on a page.

Please change the payUrl and src for production. Below sample file works on sandbox environment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transact Bridge Sample Demo</title>
  </head>
  <body style="margin: 0px">
    <style>
      #close_button {
        font-size: x-large;
        font-weight: lighter;
        padding: 0;
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background-color: #fff;
        border: 1px solid #007aff;
        color: #007aff;
        position: absolute;
        top: -30px;
        right: -20px;
      }
      #tb_root {
        padding: 6px;
        background: #fff;
        border-radius: 6px;
      }

      dialog {
        background: transparent;
        border: none;
        padding: 0;
        margin-top: 10vw;
        overflow: visible;
      }

      dialog::backdrop {
        background-color: #2b2b2b87;
      }

      .container {
        position: relative;
      }
    </style>
    <button id="buynow">Buy</button>
    <dialog>
      <div class="container">
        <button id="close_button">&#215;</button>
        <div id="tb_root"></div>
      </div>
    </dialog>
    <script>
      const payUrl =
        "https://sandboxpay.transactbridge.com/customer/singlePage/product?billingSessionId=67a472a4a991a5786a5e0bb5"; //replace your link

      const buyButton = document.getElementById("buynow");
      const dialog = document.querySelector("dialog");
      const closeButton = document.getElementById("close_button");

      function closeIframe() {
        dialog.close();
        //do somthing...
      }

      function getSessionData(sessionData) {
        //do somthing...
        console.log({ sessionData });
      }

      function getTxnData(txData) {
        //do somthing...
        console.log({ txData });
      }
    </script>

    <script src="https://cdn.transactbridge.com/scripts/iframeSandbox.js"></script>
    <script>
      const tbIframe = new TBIframe();

      function buyNow() {
        dialog.showModal();
        tbIframe.init(payUrl, getSessionData, closeIframe, getTxnData);
      }

      buyButton.addEventListener("click", () => {
        buyNow();
      });

      closeButton.addEventListener("click", () => {
        tbIframe.close();
      });

      // auto closes iframe
      // setTimeout(() => {
      //   tbIframe.close();
      // }, 5000);
    </script>
  </body>
</html>