Shopify Plus

Set up the look and checkout experience for your store with a newcheckout.liquid layout for Shopify Plus. To follow the instructions below, you'll need to first open a support chat with Shopify from your store and have them add the Shopify Pluscheckout.liquid template. Once this is enabled, follow the instructions below to install.
1. Install the Regular Splitit Shopify Checkout App
a. Follow the instructions here.
b. Make sure the app is installed properly: Go to Settings -> Payments ->Splitit -> Manage and click Enable test mode, then run a test transaction.
2. Add the Splitit Snippet to Your Layout

a. Log into your Shopify Admin Panel -> Online Store
b. Under Themes, make a copy of your live theme and rename it to something descriptive — this theme is where you will perform the integration work
c. Click Customize on your new theme then select Edit code
d. Select the Snippets folder -> Add a new snippet
e. Enter a name for the new snippet , splitit-checkout-extension, and select Done
f. Open the newly created snippet file
g. Copy and paste the following code:
Splitit Checkout Extension
<script type="application/javascript">
  (function(window){
    window.splititEnvironment = 'production'; // production - is default. Switch to 'sandbox' if you want to test
    window.splititWhiteLabel = true; // false - is default. Switch to 'true' if you want to hide "Splitit labels"
    window.splititWhiteLabelText = 'Monthly credit card payments - no fees'; // Specify the text you want to see in the name of the payment method if splititWhiteLabel = true
    window.splititMinOrderAmount = 100; // The minimum amount for adding payment through Splitit
​
    const formatPhone = (phoneNumber) =>  {
        let formattedPhone= phoneNumber.replace(/\D/g,'');
        const PhoneLength = 10;
        if (formattedPhone.length > PhoneLength) formattedPhone = formattedPhone.slice(formattedPhone.length - PhoneLength);
​
        return formattedPhone;
    };
​
    window.setSplititSettingParams = function()
    {
        const shippingContact = {
            addressLine: '{{ checkout.shipping_address.address1 }}',
            addressLine2: '{{ checkout.shipping_address.address2 }}',
            zip: '{{ checkout.shipping_address.zip }}',
            city: '{{ checkout.shipping_address.city }}',
            state: '{{ checkout.shipping_address.province_code }}',
            country: '{{ checkout.shipping_address.country }}',
        };
​
        let billingAddress ={};
        let firstName= '';
        let lastName= '';
​
        {% if checkout.billing_address != null %}
            billingAddress = {
                addressLine: '{{ checkout.billing_address.address1 }}',
                addressLine2: '{{ checkout.billing_address.address2 }}',
                zip: '{{ checkout.billing_address.zip }}',
                city: '{{ checkout.billing_address.city }}',
                state: '{{ checkout.billing_address.province_code }}',
                country: '{{ checkout.billing_address.country }}',
            };
            firstName = '{{ checkout.billing_address.first_name }}';
            lastName = '{{ checkout.billing_address.last_name }}';
        {% else %}
            billingAddress = shippingContact;
            firstName = '{{ checkout.shipping_address.first_name }}';
            lastName = '{{ checkout.shipping_address.last_name }}';
        {% endif %}
​
        let phoneNumber = '';
​
        {% if checkout.customer.phone != null %}
            phoneNumber = '{{ checkout.customer.phone }}';
        {% else %}
            phoneNumber = '{{ checkout.billing_address.phone }}';
        {% endif %}
​
        const consumerData= {
            fullName: `${firstName} ${lastName}`,
            email: '{{ checkout.customer.email }}',
            phoneNumber: formatPhone(phoneNumber),
            cultureName: Shopify.Checkout.locale
        };
​
        return JSON.stringify({
            splititEnvironment: window.splititEnvironment,
            splititWhiteLabel: window.splititWhiteLabel,
            splititWhiteLabelText:window.splititWhiteLabelText,
            token: Shopify.Checkout.token,
            shop: Shopify.Checkout.apiHost,
            estimatedPrice: {{ checkout.total_price }} / 100,
            currency: Shopify.Checkout.currency,
            consumerData,
            billingAddress,
        });
    }
  })(window);
</script>;
​
​
​
​
​
​
​
​
h. Click Save
3. Connect the Splitit Snippet to checkout.liquid
a. While still in your development theme, open the Layout folder and select checkout.liquid
b. Within checkout.liquid, add the following lines inside the head tag:

{% include 'splitit-checkout-extension' %}
<script src="https://shop-checkout.production.splitit.com/shopify/v-1.0.0/shopify-embedded.js"></script>

a. Preview your development theme
b. Add an item to cart and proceed to checkout
c. Enter a shipping address, select a shipping method, and proceed to the final step of the Shopify checkout flow
d. Select the Splitit payment method  and confirm that the Splitit checkout form displays properly
​
Last modified 2mo ago