Links

Shopify Plus

After finishing Installation, you need to take some extra steps for Shopify Plus:

Have Shopify Support Add a checkout.liquid Template

1. Open a support chat with Shopify from your store and request that they add the Shopify Pluscheckout.liquid template

Add a Splitit Snippet to Your Layout

1. Log into your Shopify Admin Panel -> Online Store 2. 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 3. Click Customize on your new theme then select Edit code 4. Select the Snippets folder -> Add a new snippet 5. Enter a name for the new snippet, splitit-checkout-extension, and select Done 6. Open the newly created snippet file 7. 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>;
8. Click Save

Connect the Splitit Snippet to checkout.liquid

1. While still in your development theme, open the Layout folder and select checkout.liquid 2. 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>

Preview your development theme

1. Add an item to cart and proceed to checkout 2. Enter a shipping address, select a shipping method, and proceed to the final step of the Shopify checkout flow 3. Select the Splitit payment method and confirm that the Splitit checkout form displays properly
Last modified 2mo ago