Shopify
Introduction
Adding Splitit payments to your Shopify store will let your customers use their existing credit cards to pay for items with interest-free monthly installments. Splitit is added using Shopify apps and a new payment method, and it functions by providing your users a Splitit form for checkout.
Checkout Flow
The shopper begins by selecting Splitit as a payment option:
The shopper then uses a Splitit checkout form to complete their order:
About On-Site Messaging for Shopify
In addition to Shopify checkout, you can add installments messaging throughout your Shopify site so that your shoppers are made aware early in their experience that they will have the option to pay in installments at checkout.
On-Site messages include a Learn more link, which displays information about potential plans in a popup:
Installation
Before beginning your Shopify installation, make sure you have signed up for a production Splitit account.
Add Splitit Checkout
1. Log into your Splitit merchant admin (if you aren't already logged in) using either your credentials or Google OAuth.
2. Proceed to the Splitit app's page on Shopify.
Click Add app and then select your Shopify store (if applicable).
3. On the next screen (after you are in your store's admin), click Install app:
4. You will be directed to another screen in the Shopify portal where you will need to select your merchant account, then your terminal in the box that appears (you can also change your order number configuration here and select an order tagging strategy):
Click Save Changes to get a success message:
5. Click on the button that appears: Next step: Activate Splitit in Shopify payment settings:
(Note that this button takes you to the URL yourstore.myshopify.com/admin/settings/payments/alternative-providers/1057713).
6. On the next screen, select the cards you would like to accept, leave Enable test mode unchecked, and then click Activate Splitit:
7. Splitit Checkout is now activated in your store.
8. Proceed to the section below to add On-Site Messaging.
Add On-Site Messaging
Installation and Configuration
1. Go to the On-Site Messaging app's URL and select Add app (you can also search for the app within Shopify).
2. Select your store (login if necessary), then on the next page, click Install app. You will be taken to a configuration page.
3. Enable and disable the app using the switch at the top of the page.
4. Find your Splitit Payment Terminal API Key, which you can get from your Splitit merchant portal. In your merchant portal, go to Credentials -> Gateway Provider Credentials. Enter your key in the field Payment Terminal API Key. (Make sure to Save at the bottom if you aren't changing any other configurations.)
5. In the next box, enter the default number of payments by which you'd like to divide a product's price.
6. In the box after that, select the theme for which you'd like to display On-Site Messaging (this allows you to enable the plugin for certain themes only).
7. Next, define which products will show Splitit messaging on your website. The dropdown includes two values:
-
Show Splitit on All Products (recommended and the default)
-
Show Splitit Customer Journey per product's minimum amount
If you have selected the second option, enter a minimum price for showing On-Site Messaging on a product.
Page Settings
You can configure On-Site Messaging separately for your home page, catalog page, product page, and cart page, and thus each of these pages has a section where you can choose from strips, banners, logos and one liners. Refer below for information about customizing the individual elements.
Strips
Enabled Strip/Disabled Strip - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Selection of Texts - Default: The strip uses the default message. Other: Allows you to enter your own message.
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Position - The strip can be positioned on the page's top or bottom.
Text Alignment - The text can be centered or located at the left or right edges of the strip.
Background Color - The color of the strip. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Background Button Color - The color of the button that contains the “Learn More” link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Button Color - The “Learn More” link text color. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Learn More - This switch enables or disables the “Learn More” button.
Button Reverse Icon - This switch changes the order of the Splitit logo and text “Learn More” on the link.
The Preview button applies the changes to the message example that can be seen on this page.
Banners
Enabled Banner/Disabled Banner - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
CSS Selector - This option is needed to help the plugin identify where the banner should be. Examples: ".yourClassName" or "#yourId"
Text Main - Default: The banner uses the default message. Other: Allows you to enter your own message.
Text Main Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Text Main Color - The color of the text on the banner. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Banner Size - Width and Height - You can enter the overall banner size. Default value is in pixels, but you can specify other measurements, like percentages.
Banner Background Color - The color of the strip. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Background Button Color - The color of the button that contains the “Learn More” link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Text Button Color - The “Learn More” link text color. It can be selected by color picking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Button Reverse Icon - This switch changes the order of the Splitit logo and text “Learn more” on the link.
The Preview button applies the changes to the message example that can be seen on this page.
Logos
Enabled Logo/Disabled Logo - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Regular CSS Selector - This option is needed to help the plugin identify where the logo should be for regular products. Examples: ".yourClassName" or "#yourId"
Sale CSS Selector - This option is needed to help the plugin identify where the logo should be for the products identified as “Sale Products." Examples: ".yourClassName" or "#yourId"
Logo Text - None - The text near the logo is absent. Other - Allows you to enter your own message.
Hide Tooltip - This switch disables the tooltip, which by default shows up when a customer moves the mouse over the logo.
Tooltip Text - An option that allows setting custom text for the tooltip, which by default shows up when a customer moves the mouse over the logo.
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Docking - The relative position of the logo.
Logo Color - The color of the logo. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Background Color - The color of the small square area around the logo. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Learn More - The switch enables or disables the “Learn More” link in the tooltip.
The Preview button applies the changes to the message example that can be seen on this page.
One Liners
Enabled One Liner/Disabled One Liner - This switch allows you to turn on or off the message type for the current page type. Only one message type can be enabled for the current page type.
Regular CSS Selector - This option is needed to help the plugin identify where the one liner should be for regular products. You need to enter the selector for the element that contains the product price. Examples: ".yourClassName" or "#yourId"
Sale CSS Selector - This option is needed to help the plugin identify where the one liner should be for the products identified as “Sale Products”. You need to enter the selector for the element that contains the product price. Examples: ".yourClassName" or "#yourId"
Text Option - A parameter that allows configuring text for the One Liner. Four built-in options are available, but you can also configure your own text.
Font Size - You can enter the font size. Default value is in pixels, but you can specify other measurements, like percentages.
Hide Learn More - This switch enables or disables the “Learn More” link. The Splitit logo stays visible.
Learn More Color - The color of the "Learn More" link. It can be selected by colorpicking or by entering RGB, HSL, or HEX values. To switch from RGB to any other mode, click on the letters "RGB".
Hide Icon - This switch hides the Splitit logo. The “Learn More” link stays visible.
The Preview button applies the changes to the message example that can be seen on this page.
Configuring CSS Selectors
As you learned in Page Settings above, in some cases the app requires that you use CSS selectors to specify proper locations for your On-Site Messages. To place the On-Site Message in the proper location, you must fill in the corresponding field. Below are some tips for finding these selectors.
How to Find and Use Selectors in the App
You can use your web browser's built-in developer tools to find the selector for the element you want to add your element to. Here's how to do it:
Right-click on the element you want to select.
Click "Inspect" or "Inspect Element".
The developer tools will open with the selected element's HTML code highlighted.
Look at the highlighted code for the element's tag name, class, or ID.
Use the corresponding CSS selector syntax to select the element in the extension. For example, if the element has a class of "my-class", use the selector ".my-class".
Also, in many browsers, once the developers' console is open you may use the element inspector to find the most appropriate element.
Once you have the selector for the element, you can enter it into the corresponding field in the extension's settings to position the On-Site Message on the webpage.
It is important to remember that Logos and One Liners use the price information to calculate the payment offers. So, for those elements you have to pick the selector that contains the product price.
Selector Examples:
Improper selector was used for logo. This HTML element contains a lot of other elements inside, so the extension read some unrelated data instead of the price and thus is providing an incorrect payments calculation.
Proper selector “price-item price-item--regular” that contains the price was picked. The extension can find the price and calculate payments accurately.
Custom CSS
The last configurable section block is On-Site Messaging CSS. It allows you to add custom CSS code to modify the styles of the On-Site Messages.
Testing
Use unpublished themes to test your configuration. You can create a duplicate of the theme you’re using, then enable the app for this theme only.
Once that is done, go to Sales Channels > Online Store > Themes, find the theme and preview it.
Shopify Admin Order Management
Note that all order management for Splitit plans originating in Shopify should be done in Shopify, not in your Splitit Merchant Portal.
Choosing When to Start Installment Plans
You have four options for processing payments for installment plans, and they are configured by the Payment Capture setting in Shopify combined with a setting configured by Splitit support. Note that with all four options, the customer's credit card is authorized for the order amount when the customer checks out, what differs is how and when their card is actually charged.
Automatically Charge Card Immediately Upon Order (Default)
- In your user admin, go to Settings -> Payments-> Payment capture-> Manage.
- Choose to Automatically capture payment for orders (the default). Splitit default settings are also maintained.
- Payments will be automatically captured when the order is placed so you don't need to do anything. The plan's status in your Splitit merchant portal will be set to In Progress.
Automatically Charge Card Upon Fulfillment of Order
- In your user admin, go to Settings -> Payments-> Payment capture-> Manage.
- Choose to Automatically capture payment for orders (the default). Contact Splitit to set your Shopify setting to Charge After.
- When customers check out, their cards will be authorized (and their plan status will be Pending Shipment in the Splitit Merchant Portal). To charge their card, you will need to go to their order in Shopify and start the fulfillment process by clicking Fulfill item. Once it's fulfilled, the plan's status in your Splitit merchant portal will be In Progress.
Manually Charge Card (Unrelated to Fulfillment)
- In your user admin, go to Settings -> Payments-> Payment capture-> Manage.
- Choose to Manually capture payment for orders. Splitit's Shopify setting can be left at its default.
- When customers check out, their cards will be authorized, but not charged. (The plan in the Splitit merchant portal be in Pending Shipment.)
- When you are ready to capture payment, go to the order and start the process by clicking Collect payment. When you are finished, the Splitit plan in your merchant portal will change to In Progress.
Manually Charge Card Upon Fulfillment of Order
- In your user admin, go to Settings -> Payments-> Payment capture-> Manage.
- Choose to Manually capture payment for orders. Contact Splitit to set your Shopify setting to "Charge After."
- When customers check out, their cards will be authorized, but not charged. Capturing payment actually requires two steps, and they must be performed in order (although not necessarily at the same time): A. first go to the order and work through the Collect payment dialogue (this can be done any time after the order is placed). After this step, the Splitit plan in your merchant portal will have the status Pending Shipment. B. next click Fulfill item to start the process that will actually charge the customer's card. This actually sets the plan to In Progress in the Splitit merchant portal.
Refunds
Partial and Full Refunds
1. In your Shopify admin, go to Orders then click on the order you wish to refund.
2. Click Refund along the top right of the order (it will only appear if applicable).
3. Under Refund Amount, enter the amount you’d like to refund:
You can also decide whether to refund shipping or not and can add a reason for refunding:
Finally, click Refund $Amount to put the refund through:
4. You will see the amount refunded in your Splitit merchant admin and will see the status updated in your Shopify order list.
Note that refunds are applied using the default Splitit strategy, which is to subtract from a user’s future obligations before returning funds to a user’s card.
Cancelling an Order
Orders that have been created without funds captured can be cancelled.
1. In your Shopify store’s admin, go to Orders then click on the order you wish to cancel.
2. Click More actions along the top right, then Cancel order from the dropdown:
3. In the popup, enter the reason for cancellation then click Cancel Order:
4. In your Splitit merchant admin, you will be able to verify that the plan was successfully cancelled by looking at the list under Transactions, in the Status column:
Configure the Order Number Passed from Shopify to Splitit
1. In your user admin, go to Settings -> Payments.
2. Under Additional payment methods, find "Splitit" and go to Manage, then Account Status -> Manage.
3. Select your order number style, then click Save Changes.
Order number styles are:
- "use only order number" (default) — Use the Shopify order number, which starts at #1001 by default
- "use full order name" — Use the Shopify order number, including prefixes and suffixes set in the Shopify admin (set these at Settings -> EDIT ORDER ID FORMAT)
- "use internal Shopify order id" — Use Shopify's internal order id number as the order number
- "use Shopify checkout id" — Use Shopify's checkout id as the order number
Additional Configurations
Visa Thank You Page
In order to use the Installments by Visa thank you page, you'll need to add a custom script.
- Go to "Settings" at bottom left in your Shopify admin.
- Click on the Checkout section.
- Scroll down to the Order status page area.
- Add the following code in the Additional scripts field:
Code to add
<script>
const addLoader = () => {
Shopify.Checkout.OrderStatus.addContentBox(`
<style>
.spt_visa_blue {
color: #1434CB;
}
.loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="loader-wrapper">
<div class="loader"></div>
</div>`);
};
const hideLoader = () => {
let loaderWrapper = document.querySelector('.loader-wrapper');
if (loaderWrapper) {
loaderWrapper.style.display = 'none';
}
};
const prepareData = (data) => {
return {
numOfInstallments: data.numOfInstallments ?? 'Information unavailable',
card: data.creditCardLast4 ? '****' + data.creditCardLast4 : 'Information unavailable',
symbol: data.currencySymbol ? data.currencySymbol.charAt(data.currencySymbol.length - 1) : '$',
termsAndConditions: data.termsAndConditions ?? '',
termsAndConditionsUrl: data.termsAndConditionsUrl ?? '/',
monthlyPayment: data.numOfInstallments ? (Shopify.checkout.total_price / data.numOfInstallments).toFixed(2) : 'Information unavailable',
img: 'https://cdn.visa.com/v2/assets/images/logos/visa/blue/logo.png',
installmentFee: (data?.installmentProvider === 'Visa' && data?.transactionFee?.installmentFee) ? data.transactionFee.installmentFee : 0,
totalFees: (data?.installmentProvider === 'Visa' && data?.transactionFee?.totalFees) ? data.transactionFee.totalFees : 0,
totalPlanCost: (data?.installmentProvider === 'Visa' && data?.transactionFee?.totalPlanCost) ? data.transactionFee.totalPlanCost : Shopify.checkout.total_price,
monthlyFees: (data?.installmentProvider === 'Visa' && data?.transactionFee?.totalFees) ? (data.transactionFee.totalFees / data.numOfInstallments).toFixed(2) : 0,
};
};
const generateAdditionalBlock = (data) => {
Shopify.Checkout.OrderStatus.addContentBox(`<div class="">
<div class="section__content">
<div class="section__content__column section__content__column--half">
<div class="text-container">
<h3 class="heading-3">Purchase Amount</h3>
<h3 class="heading-3">Payment</h3>
<div class="tracking-info">
<address class="address">
Monthly Payment
<br>
Number of Instalments
<br>
Fees
<br>
Total Amount
</address>
</div>
</div>
</div>
<div class="section__content__column section__content__column--half">
<div class="text-container">
<h3 class="heading-3">` + data.symbol + Shopify.checkout.subtotal_price + `</h3>
<h3 class="heading-3"><img src="` + data.img + `" alt="visa" title="visa" width="13%"> ` + data.card + `</h3>
<div class="tracking-info">
<address class="address">
` + data.symbol + data.monthlyPayment + `
<br>
` + data.numOfInstallments + `
<br>
` + data.symbol + data.monthlyFees + '/month (APR: ' + data.installmentFee + '%)' + `
<br>
` + data.symbol + data.totalPlanCost + ' (incl. ' + data.symbol + data.totalFees + ' fees)' + `
</address>
</div>
</div>
</div>
<hr>
<span class="spt_visa_blue">
Installments enabled by <img src="` + data.img + `" alt="visa" title="visa" width="6%">
</span>
<br>
</div>
<br>
<br>
<div class="section__content">
<div class="section__content__column section__content__column">
<div class="text-container">
<h3 class="heading-3">For questions regarding your instalment plan, contact your <a href="` + data.termsAndConditionsUrl + `">card issuing bank</a></h3>
<div class="tracking-info">
` + data.termsAndConditions + `
</div>
</div>
</div>
</div>
</div>`);
hideLoader();
};
const startSplititProcess = () => {
try {
addLoader();
fetch('https://sh-external-payment-app.splitit.com/order/find', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'Email': Shopify.checkout.email,
'Currency': Shopify.checkout.currency,
'Amount': Shopify.checkout.total_price,
'Timestamp': Shopify.checkout.created_at
})
})
.then(response => {
if (!response.ok) {
throw new Error('Error from server');
}
return response.json();
})
.then(data => {
if (data.creditCardLast4 == 'xxxx') {
hideLoader();
} else {
generateAdditionalBlock(prepareData(data));
}
})
.catch(error => {
hideLoader();
console.error(error);
});
} catch (e) {
hideLoader();
console.error(e);
}
};
if (window.Shopify && Shopify.checkout) {
startSplititProcess();
} else {
document.addEventListener('DOMContentLoaded', function (event) {
startSplititProcess();
});
}
</script>
- Save your settings.
- Your customers will be directed to a thank you page that looks like the below:
Make sure to clear your cache before checking this new functionality.