.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
Shopify Plus
1. Open a support chat with Shopify from your store and request that they add the Shopify Plus
checkout.liquid template1. 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:<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>;
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>
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