Katapult JavaScript Plugin

Overview

The Katapult JavaScript Plugin will provide you the functionality to integrate with Katapult so customer may checkout with our payment solution.

Before Getting Started
Please carefully review the onboarding timeline in preparation for your development.

The steps below will allow you to get the Katapult module up and running on our website.

Katapult JavaScript Plugin

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.

📘

Token details

Remember, your public token varies depending on whether you’re testing with the Katapult sandbox or your project is live in production.

Update the environment and API in the script below accordingly.

• Sandbox : https://sandbox.katapult.com
• Live : https://www.katapult.com

<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>

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>

❗️

Checkout button is not initializing Katapult

If you are getting redirected to the top of the checkout page when clicking the checkout button, instead of the Katapult module popping up you will need to add javascript:void(0).

Example:

<a class="btn-katapult-checkout" href="javascript:void(0)"></a>

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.

• 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.
• The cancel URL is where we will redirect if a customer cancels a checkout with Katapult.

For more details go to the Initialize Checkout Page to see examples and a breakdown of the response and requests.