The Katapult Test Developer Hub

Welcome to the Katapult Test developer hub. You'll find comprehensive guides and documentation to help you start working with Katapult Test as quickly as possible, as well as support if you get stuck. Let's jump right in!

Katapult JavaScript Plugin

The Katapult JavaScript Plugin enables integration with the Katapult platform without direct API integration. There are two different flows within the plugin: Preapproval and Checkout.

Follow the steps below to get started.

Katapult JavaScript Plugin Preapproval and Checkout

Step 1 Add Katapult Snippet

Place the following script tag on the bottom of your page. This snippet uses an asynchronous loading method that allows you to immediately use the katapult.js plugin without a significant impact on the load time of your page.

📘

Remember, your public token varies depending on whether you’re testing with the Katapult sandbox or your project is live in production. The token you use here must match the environment you define

<script>
    var _katapult_config = {
        api_key: "INSERT YOUR PUBLIC TOKEN HERE",
        environment: "https://sandbox.katapult.com"
    };

    !function(e,t){e.katapult=e.katapult||{};var n,i,r;i=!1,n=document.createElement("script"),n.type="text/javascript",n.async=!0,n.src=t.environment+"/"+"plugin/js/katapult.js",n.onload=n.onreadystatechange=function(){i||this.readyState&&"complete"!=this.readyState||(i=!0,e.katapult.setConfig(t.api_key))},r=document.getElementsByTagName("script")[0],r.parentNode.insertBefore(n,r);var s=document.createElement("link");s.setAttribute("rel","stylesheet"),s.setAttribute("type","text/css"),s.setAttribute("href",t.environment+"/"+"plugin/css/katapult.css");var a=document.querySelector("head");a.insertBefore(s,a.firstChild)}(window,_katapult_config);


</script>

Step 2 Place Katapult Pre Approval Button

Place a button with class btn-katapult-preapprove on the pages where you want the Katapult pre-approval functionality to be available. Clicking this button will load the Katapult pre-approval form.

<a class="btn-katapult-preapprove" href="#"></a>

Step 3 Initialize Pre approval

Start the preapproval process when the button is clicked.

<script>
$('.btn-katapult-preapprove').on('click', function() {
    katapult.preapprove();
});
</script>

Step 4 Add Katapult Payment Method

Place or name the Katapult checkout button within the payment options page of your site.

<a class="btn-katapult-checkout" href="#"></a>

Step 5 Checkout Conditions

To check out with Katapult, you must first initialize the cart object with the following information

  1. Customer information - This is the billing and shipping information that the customer has already entered on your site

  2. Item data - The contents of the customer’s shopping cart

  3. Checkout data - Metadata on the transaction, such as the order id and any applicable discounts

  4. URLS - These are the routes we will send the customer to at the end of the transaction

a. The return URL is where we will redirect to after the customer completes their checkout. We will also POST to that URL the customer_id provided and the katapult_id associated with the order.

b. The cancel URL is where we will redirect if a customer cancels a checkout with Katapult.

👍

Once initialized, the Katapult checkout modal can then be triggered.

<script>


$('.btn-katapult-checkout').on('click', function() {
  var checkout = {
     customer: {
         billing: {
             first_name: "jane",
             middle_name: "Q",
             last_name: "doe",
             address: "123 main street",
             address2: "apt 5b",
             city: "New York",
             state: "NY",
             country: "United States",
             zip: "10009",
             phone: "5554324537",
             email: "[email protected]"
         },
         shipping: {
             first_name: "jane",
             middle_name: "Q",
             last_name: "doe",
             address: "123 main street",
             address2: "apt 5b",
             city: "New York",
             state: "NY",
             country: "United States",
             zip: "10009",
             phone: "5554324537",
             email: "[email protected]"
         }
     },

    items: [{
      display_name:         "4K LG TV",
      sku:                  "LG-4k2352",
      unit_price:           1399.99,
      quantity:             1,
      leasable:             true
    }],

    checkout: {
      customer_id: "1000438727823",
      shipping_amount: 20.00,
      discounts: [
         {discount_name: "Discount name 1", discount_amount: 50.00},
         {discount_name: "Discount name 2", discount_amount: 50.00}
      ]
    },

    urls: {
        return: "https://yoursite.com/return",
        cancel:"https://yoursite.com/cancel"
    }

  };
  katapult.checkout.set(checkout);
  katapult.checkout.load();
});


</script>

Updated 3 months ago

Katapult JavaScript Plugin


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.