Skip to main content

Quick Install

This button


can be inserted into your web page and styled with the javascript and css snippets below:

Sample page
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Test Page</title>
  </head>
  <body>
    BOPP in action
    <div id="bopp_button">
      <div id="bopp_msg"></div>
      <div id="bopp"></div>
    </div>
  </body>
  <script type="text/javascript">
 
      const sdk_url = "https://bopp.io/public/scripts/sdk.js";
      const merchantKey = "insert your merchant key here"

      //The below two lines are required
      const orderTotal = 12.12;
      const orderReference = "Cheetah food";

      //The below settings are optional...
      //You can leave them empty or find more information about these settings here: https://bopp.io
      const buttonLookAndFeel = "DarkWide";
      const onsuccessurl = "https://www.sample.com/success";
      const oncancelurl = "https://www.sample.com/cancel";
      const onfailureurl = "https://www.sample.com/failure";
      const onsuccessposturl = "https://www.sample.com/listener";

      const bopp_msg_alert_default_style = {

      };


      const buttonMsgContainer = document.getElementById("bopp_msg");
      
      const script = document.createElement("script");
      script.src = sdk_url;
      script.type = "text/javascript";
      script.addEventListener("load", () => {
        const boppButton = BoppButton({
          key: merchantKey,
          container: document.getElementById("bopp"),
          buttonStyle: buttonLookAndFeel,
        });

        boppButton.setAmount(parseFloat(orderTotal), "GBP");
        boppButton.setPaymentReference(orderReference);

        if (onsuccessurl.length > 0) {
          boppButton.setSuccessRedirectUrl(onsuccessurl);
        }
        if (oncancelurl.length > 0) {
          boppButton.setCancelRedirectUrl(oncancelurl);
        }
        if (onfailureurl.length > 0) {
          boppButton.setFailRedirectUrl(onfailureurl);
        }
        if (onsuccessposturl.length > 0) {
          boppButton.setOnSuccessPost(onsuccessposturl);
        }

        function showMessage(msg, success) {
          if (success) {
            buttonMsgContainer.innerHTML(
              "The payment is successful! <br/> <b>Payment Instruction ID: " +
                msg +
                "</b>"
            );
            buttonMsgContainer.classList.add("bopp_msg_success");
            return;
          }
          var reason = "";
          if (msg.length) {
            reason = "<br>Reason: " + msg;
          }

          buttonMsgContainer.innerHTML("The payment attempt failed!" + reason);
          buttonMsgContainer.classList.add("bopp_msg_failure");
        }

        boppButton.setCallback(
          //This is the callback function that will be called when the payment is successful
          function (instId, signature) {
            showMessage(instId, true);
          },
          function (error) {
          //This is the callback function that will be called when the payment is canceled due to a non-technical issue (the payer cancels, the banks rejects, limit reached and etc.)
            var reason = "";
            if (error && error.hasOwnProperty("message")) {
              reason = error.message;
            }
            showMessage(reason, false);
          },
          function (error) {
            //This is the callback function that will be called when the payment has failed due to a technical issue (technical issue with the backend, the bank is down and etc.)
            var reason = "";
            if (error && error.hasOwnProperty("message")) {
              reason = error.message;
            }
            showMessage(reason, false);
          }
        );

        boppButton.setEnabled(true);
      });

      document.head.appendChild(script);

  </script>
  <style type="text/css">
    #bopp_msg {
        color: "white";
        padding: "5px";
        border-radius: "5px";
    }

    .bopp_msg_success{
        background-color: "red"
    }

    .bopp_msg_failure{
        background-color: "green"
    }
    </style>
</html>

Sign Up for Sandbox​

To sign up to the Sandbox and get a developer API Key, you will need to give us your Name and email address. You will receive an API for the Sandbox environment via email. This will allow you to test your BOPP Checkout implementation.

Start accepting live payments​

Once you are ready to accept payments on your site using BOPP Checkout, sign up for a BOPP Account. With this you will be able to access the BOPP Dashboard and generate a live API Key for your site and BOPP Checkout, you will also be able to revoke API Keys when no longer needed and review all transactions.

Next Steps​