Caddi Popup Workflow

The Caddi.launch() functionality provided by caddi.js allows you to launch the Caddi popup workflow. During this process, your merchant checkout page will appear darkened in the background on a desktop view. The customer will be walked through a series of steps to identify themselves, confirm they qualify for credit, and take their initial payment method and details. Upon abandoning the process, receiving an error or upon successful completion, they will be returned to your checkout.

If the customer completes the Caddi popup workflow successfully, the orderToken and the orderStatus CREATED will be passed to the onComplete method, at which stage you should allow the customer to confirm their order. Additionally this method will be passed the properties phoneNumber containing the customer's unique phone number, and downPayment containing the initial amount that will be paid by the customer upon later calling /v1/confirm-order.
If the customer does not successfully complete or cancels the Caddi popup workflow, the orderToken and the orderStatus CANCELLED will be passed to the onComplete method. You should ask the customer to retry, or select an alternative payment method.
If an unexpected problem occurs, the object passed to onComplete will contain a property error which will be a string describing the error. Though the orderStatus should always be ERROR in this instance, it is advisable to check for any orderStatus not equal to CREATED or CANCELLED as per the below example.

If the CREATED status is received, the Merchant website should enable the user to press a button finalizing their order.

If the CANCELLED status is received, the Merchant website should show an appropriate message asking the customer to retry the Caddi process or select an alternative payment method.

If the ERROR status or any other status is received, the Merchant website should encourage the customer to select an alternative payment method.

<html>
  <head>
    // MERCHANT_ID below should be replaced with the public identifier provided to you by Caddi
    // Replace src with https://api-sandbox.caddipay.com/v1/caddi.js?merchant=MERCHANT_ID in your test environments
    <script id="caddijs" type="text/javascript" src="https://api.caddipay.com/v1/caddi.js?merchant=MERCHANT_ID" async></script>
  </head>
  <body>
    <button id="caddi-payment">
      Continue to Payment
    </button>
    <script type="text/javascript">
      var script = document.querySelector("#caddijs");
      script.addEventListener('load', function() {
	      document.getElementById("caddi-payment").addEventListener("click", function() {
	        // ORDER_TOKEN is retrieved on your server uniquely for each checkout
	        // See POST /v1/create-order
	        Caddi.launch("ORDER_TOKEN");
	      });
	      Caddi.onComplete = function(data) {
	        if (data.orderStatus === "CREATED") {
	          // The customer has confirmed payment details and schedule with Caddi
	          // At this point, you may show an option for completing checkout
              // This data object will additionally contain: orderToken, phoneNumber, downPayment
	        } else if (data.orderStatus === "CANCELLED") {
	          // The customer did not provide details or closed the popup
	          // Ask them to retry, or select an alternative payment method
	        } else {
	          // Another error occurred which you should log
	          // See data.error for further details (this will be a string describing the error)
	        }
	      };
      });
    </script>
  </body>
</html>

📘
Testing
Ensure you are using https://api-sandbox.caddipay.com/v1/caddi.js in your test environments. This will allow you to test the Caddi popup workflow without requiring real customer or payment details.

📘Testing

📘
Testing