WooCommerce
Use the instructions below to enable Splitit installments on your WooCommerce site, including On-Site Messaging.
Installing the Plugin
Before installing, make sure your site meets the recommended WooCommerce requirements, as documented here.
- In your WordPress admin area select Plugins -> Add Plugin, and search for "Splitit" in the search bar.
- Once the Plugin has been located, click the Install Now button and WordPress will download and install the plugin.
- Once installed, the Install Now button will change to Activate. Click on the Activate button to start using the plugin.
- You will see a "Welcome to Splitit Message"
-
Choose either My demo account or My live account. A demo account is for testing and will take you to the Splitit sandbox login page, while a live account is for real transactions and will connect you to Splitit's production login page.
-
After logging into Splitit, a popup will allow you to choose your merchant. Find your merchant by beginning to enter its name.
- Once you select a merchant, dropdowns for your terminal and Client ID will appear. Click on each of these to select the prepopulated values from your account. When you are finished, click Connect my merchant.
- Now that you have finished installing the plugin and logging into it, you will be directed back to the WordPress admin where you need to enable Splitit as a payment method. Go to WooCommerce->Settings->Payments. Then click Enable for the Splitit plugin.
- Once you have enabled the plugin, click Manage to be brought to your main configuration page:
Note that you can adjust the order of payment methods here (WooCommerce->Settings->Payments) but it is better to adjust them in the plugin's configuration under Sort Order.
Configuring the Plugin
Begin by defining your payment method settings; each is addressed below.
Payment Method Settings
Require Checkout with 3DS
3D secure verification can be enabled or disabled here. If Enabled, the user must pass through a 3D-secure verification shown as a popup. It needs to be successful for an order to be placed.
Pending Shipment
This option defines how transactions are handled. When enabled, transactions are simply authorized at checkout and are fully captured later (e.g., when you ship). This is useful for stores that capture upon order fulfillment.
Default Order Status
Pending Shipment is OFF – The default order status to apply if Pending Shipment is off (choose from the available statuses in the dropdown).
Pending Shipment is ON – The default order status to apply if Pending Shipment is on (choose from the available statuses in the dropdown).
Title - The name shown to shoppers for the payment method at checkout (default: Monthly credit card payments - no fees).
Payment Method - How Splitit is presented at checkout: Inline means that Splitit card fields and plans are embedded directly into checkout and Redirect mean that the shopper is sent to a Splitit-hosted page to complete payment.
Sort Order - The position of Splitit relative to the other payment methods at checkout.
Settings Managed in Your Splitit Account
The two settings at the bottom are readable here but are managed at Splitit (notice the lock icon).
If these settings are changed at Splitit, make sure to refresh to view the updated values.
Phone requirement - Whether a customer phone number is required (Required or Optional).
Order amount range - The minimum–maximum cart range for which Splitit is offered (e.g., "23 - 20000"). Splitit is hidden at checkout for carts outside of this range, at either end.
Choosing On-Site Messages
On-Site Messaging shows Splitit graphics throughout your website with installment breakdowns—notifying shoppers that you offer installment payments early on in their session on your site. There are two types of On-Site Messages, Strips and One Liners, and they are configured separately for your Shop/Catalog Page, Product Page, Cart Page, Checkout Page and Home Page (Home Page offers Strips only). You can only set one type of message per page.
Begin by defining the global setting for number of payments at the top of the On-Site settings section:
Then set messaging for the individual page types, clicking on the dropdown for each:
The settings for each page type are nearly identical so are only covered one time below.
Strip
Strips are full-width notification bars across a page (for example “Pay with installments. No application or fees.”). On your storefront they will appear as promotional bars:
Strip Settings
Enabled Strip/Disabled Strip- This switch allows you to turn on or turn off Strips for the current page type. Only one message type can be enabled for each page type.
Text Size- Set the size of the Strip's text; options are Small, Medium or Large.
Position- Defines where the Strip is docked; set Top or Bottom.
Alignment- Set the horizontal alignment of the Strip's text; options are Left, Center, or Right.
Text Color- Set the color of the text on the Strip. 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.
Background Color - Set the background color of the Strip. 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.
The Preview button applies the changes to the message example in the Live Preview box.
One Liner
One Liners are short installment texts placed next to product prices.
One Liner Settings
Enabled One Liner/Disabled One Liner - This switch allows you to turn on or turn off One Liners for the current page type. Only one message type can be enabled for each page type.
Text Size - Set the size of the One Liner's text; options are Small, Medium or Large.
Payment Frequency - Set the installment cadence show in the message; options are Monthly or Bi-Weekly.
Text Option - Choose alternative wordings; set Option 1, Option 2, or Option 3.
Show Info Icon - Shows the (?) tooltip icon, which opens a Learn More popup.
Text Color - Set the One Liner's 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.
One Liner Position - Sets where the One Liner is injected: the options are Default or Custom. With the Default setting, the plugin attempts to find a proper location and adds the One Liner there. With Custom, you need to enter the proper CSS selector manually for regular items and/or sale items.
The Preview button applies the changes to the message example in the Live Preview box.
Custom CSS
In this section, you can add custom CSS to your Splitit UI, for example to match your brand or in-house style.
On-Site Messaging CSS - Custom styles here will be applied to your Strips and One Liners (for example, you might want to add top padding so a Strip does not overlap your header: .page-wrapper {padding-top: 54px;}).
Flex Fields CSS - Custom styles here will be applied to the Splitit card fields ("Flex Fields") shown in your inline checkout form (will only apply if you are using Splitit inline fields rather than fully redirecting to a Splitit checkout page).
Make sure to click Save Changes at the bottom of the page to store any changes.
Admin Utilities
View Orders and/or Capture Payments (Ship)
You can see details from an order in your WooCommerce admin by going to WooCommerce->Orders, then clicking on the order for which you'd like to see details.
If the Pending Shipment setting is enabled in your Splitit plugin, your order's status will be Pending (unless you have changed the default), until you capture payment. To capture payment, click on the SHIP button at the bottom of the order.
This will start installments and capture money. The order status will be changed to Processing.
If the Splitit plugin's Pending Shipment setting is off, order status will already be Processing.
Refund Orders
To issue a refund, go to WooCommerce-> Orders. Click an individual order to go to its details then click the Refund button (you can issue a full or a partial refund).
- Choose the quantity of each item to refund by clicking the up-and-down arrows in the QTY box(es) next to the item(s)
- Specify the shipping amount you'd like to refund (if applicable) in the appropriate box
- Add a reason
- Click the Refund $AMOUNT via Splitit for WooCommerce button
- A full refund will refund the total amount and will close the order (Refunded status); the shopper will receive a message that the plan has been cancelled
- A partial refund will refund the specified amount and keep the plan open
- For orders made with Splitit, manual refunds, i.e., amounts not tied to an actual purchased item, should not be used (i.e., all refunds should use the item quantities approach described above)
Understanding Checkout Flow (With 3DS)
The Splitit payment option will show up on your storefront if it is enabled at the top of your plugin:
Your shoppers will have the ability to choose Splitit as a payment method at checkout if the product amount is not outside of the price range you set with Splitit. They can then enter their card info and select installment plan duration (based on plugin settings):
If 3D secure is not enabled on your account and if the transaction is successful, shoppers will see a success page upon clicking the Place Order button. If the transaction isn't successful, shoppers will see an error message.
If 3D secure is enabled on your account, shoppers will see a popup after clicking on the Place Order button. Once the 3D secure verification is successful, shoppers will be redirected to the order success page. However, if the verification fails, shoppers will see an error on the payment page.