Shopify Plus
Set up the look and checkout experience for your store with a new
checkout.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.b. Make sure the app is installed properly: Go to Settings -> Payments ->Splitit -> Manage and click Enable test mode, then run a test transaction.
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:<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>;
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