BigCommerce

Overview

In this guide you will learn how to integrate Katpault with BigCommerce to provide a no credit, lease-to-own payment option for your customers.

Before beginning your integration, please review the following:

Online Checkout Flow
Your current checkout process to understand how Katapult will impact operations and customers.
Leasable Items
Deployment Checklist
Tax Exemption Management: Katapult is a wholesale merchant and is responsible for collecting sales tax from customers. In some cases this will require additional development. Please review internally determine the best way to reconcile orders.
Confirm all your products have SKUs & item descriptions. Katapult needs these details for an order to be successful. Products without a SKU may result in a failed checkout, typically resulting in the customer being unable to move past the customer validation screen.

Once your merchant agreement has been completed, you will receive an email with your sandbox login credentials and tokens. If you have not received your tokens, please reach out to [email protected].

Installation

Store API Credentials:

Step 1. Log in to your BigCommerce admin portal.
Step 2. After login to your portal, go to Advanced Settings > API Accounts > Create API Account > Create V2/V3 API Token.
Step 3. Enter the name as Katapult connection, Copy the API Path and select the following OAuth Scopes.

Checkout Content -> modify
Orders -> modify
Order Transactions -> modify
Create Payments -> create
Get Payment Methods -> read-only
Products -> modify
Carts -> modify
Checkouts -> modify
Sites & Routes -> modify

Click on save, copy the Client ID, Client Secret and Access Token.
Step 4. Share the API Path, Client ID, Client Secret and Access Token with Katapult integrations team.
Step 5. Katapult will provide you a Return URL which will be used to create an order.

Deploying frontend code to add Katapult as a payment method:

Step 1. Open Storefront theme files.
Step 2. Navigate to templates > pages > checkout.html.
Step 3. After footer scripts section i.e after {{{ footer.scripts }}} add the following script to the checkout.html :

<script>
  const observer = new MutationObserver(function(mutations, me) {
        const canvas = document.getElementById('radio-instore');
        if (canvas) {            
            if ($('#radio-instore').next().children().text() === 'Katapult') {
                $('#radio-instore').next().children().text('');
                $('#radio-instore').next().children().find('div').remove();
                $('#radio-instore').next().children().first().addClass('btn-katapult-checkout');                
                $('#radio-instore').parent().parent().parent().on('click', function() {                    
                    $('#radio-instore').prop('checked', true);                
                    getCheckoutObject()                
                });

                $(document).on('click','.btn-katapult-checkout',function(e){                    
                    $('#radio-instore').prop('checked', true);                    
                   getCheckoutObject();
                })
            }
        }
    });
    observer.observe(document, {
        childList: true,
        subtree: true,
    });
    
    
    function getCheckoutObject(){
        
     fetch('/api/storefront/cart?includes=consignments.availableShippingOptions', {
            credentials: 'include'
        }).then(function(response) { return response.json();}).then(function(cartJson) { return cartJson[0].id; })
        .catch(function(error) {
        
        }).then(function(cartId) {
            fetch('/api/storefront/checkouts/' + cartId, {
                credentials: 'include'
            }).then(function(response) { return response.json();})
            .then(function(checkoutJson) {
                const cartItems = checkoutJson.cart.lineItems.physicalItems;
                const cartDigitalItems = checkoutJson.cart.lineItems. digitalItems;
                const discountItems = checkoutJson.cart.coupons;
                const cartCustomItems = checkoutJson.cart.lineItems.customItems;

                   
               var items = cartItems.map( function(cartItem) {
                    return {
                        'display_name': cartItem.name,
                        'sku': cartItem.sku,
                        'unit_price': cartItem.salePrice,
                        'quantity': cartItem.quantity,
                        'leasable': (cartItem.sku.includes("-LE-") || cartItem.sku.includes("-LE")) ? true  : false
                    };
                });
               var digitalItems = cartDigitalItems.map( function(cartDigitalItems) {
                    return { 
                        'display_name': cartDigitalItems.name,
                        'sku': cartDigitalItems.sku,
                        'unit_price': cartDigitalItems.salePrice,
                        'quantity': cartDigitalItems.quantity,
                        'leasable': false
                    };
                });
              
              var customItems = cartCustomItems.map( function(cartCustomItems) {
                    return {
                        'display_name': cartCustomItems.name,
                        'sku': cartCustomItems.sku,
                        'unit_price': cartCustomItems.listPrice,
                        'quantity': cartCustomItems.quantity,
                        'leasable': (cartItem.sku.includes("-LE-") || cartItem.sku.includes("-LE")) ? true  : false
                    };
                });
              const allCartItems = items.concat(digitalItems, customItems);

               const discount = discountItems.map(function(discountItem){
                    return {
                        'discount_name': discountItem.displayName,
                        'discount_amount': discountItem.discountedAmount
                    };
                });
                if (checkoutJson.grandTotal < 100) {
                    alert('Cart amount is to low');
                    return false;
                }

                const checkout = {
                    items: allCartItems,
                    urls: {
                        return: 'https://cj5je1qw84.execute-api.us-east-1.amazonaws.com/dev/BcOrder',
                        cancel: window.location.href
                    },
                    customer: {
                        shipping: {
                            first_name: checkoutJson.consignments[0].shippingAddress.firstName,
                            middle_name: '',
                            last_name: checkoutJson.consignments[0].shippingAddress.lastName,
                            address: checkoutJson.consignments[0].shippingAddress.address1,
                            address2: checkoutJson.consignments[0].shippingAddress.address2,
                            city: checkoutJson.consignments[0].shippingAddress.city,
                            state: checkoutJson.consignments[0].shippingAddress.stateOrProvinceCode,
                            country: checkoutJson.consignments[0].shippingAddress.country,
                            zip: checkoutJson.consignments[0].shippingAddress.postalCode,
                            phone: checkoutJson.consignments[0].shippingAddress.phone,
                            email: checkoutJson.cart.email
                        },
                        billing:{
                            first_name: checkoutJson.billingAddress.firstName,
                            middle_name: '',
                            last_name: checkoutJson.billingAddress.lastName,
                            address: checkoutJson.billingAddress.address1,
                            address2: checkoutJson.billingAddress.address2,
                            city: checkoutJson.billingAddress.city,
                            state: checkoutJson.billingAddress.stateOrProvinceCode,
                            country: checkoutJson.billingAddress.country,
                            zip: checkoutJson.billingAddress.postalCode,
                            phone: checkoutJson.billingAddress.phone,
                            email: checkoutJson.cart.email
                        }
                    },
                    checkout: {
                        shipping_amount: checkoutJson.shippingCostTotal,
                        customer_id: checkoutJson.id,
                        discounts: discount
                    }
                    
                }; 
                katapult.checkout.set(checkout);
                katapult.checkout.load();
            }).catch(function(error) {
                console.log(error);
            })
        });
    }
</script>
<script>
    var _katapult_config = {
    api_key: "<Api-Key-Provided-By-Katapult>",
    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 4. Replace the return-url, api-key in Step 3 with the Return URL and Api Key provided by Katapult.
Step 5. Set the environment in Step 3 based on the environment you are using if it's a sandbox or test environment use the url https://sandbox.katapult.com or if it’s a production or live environment use the url https://www.katapult.com.
Step 6. Configure Stencil to work with the theme and push the changes to the storefront.

Configure Payment Method:

❗️
This setting will enable a Pay in Store option to be available as a payment option at customer's checkout. Please confirm with your integration specialist when this setting can be activated.

Step 1. Log in to your BigCommerce admin portal.
Step 2. After login to your portal, go to Store Setup > Payments > Pay in Store Settings.
Step 3. We will be using the Pay in Store option to add the Katapult checkout button. Display name should be written as Katapult to match with front end store coding and save the payment method.

Have more questions or need help? Email [email protected]

Leasable and Non leasable items:

We ask that our merchants mark the appropriate items as leasable during setup. We still allow customers to checkout with leasable and non leasable items. However they must pay for non leasable items in full at the time of checkout, don’t worry we’ll take care of the taxes and the payment. For this to happen you must update your product attributes as leasable.
For items that are leasable, you will need to add to the product's SKU "-LE-".

Not sure which items are leasable? Look at our merchant guide for a list of non leasable items or reach out to us directly at [email protected].