Salesforce CC
Use the guides below to enable the Splitit installments payment option in the payment and checkout experience on your Salesforce site, along with messaging that will introduce your customers to installment payment options early in their shopping experience.
SiteGenesis
Overview
The Splitit payment cartridge enables a CC store to integrate with the Splitit payment service. This document provides detailed instructions on installing a Splitit payment cartridge into a CC store.
The integration is based on the SiteGenesis demo store, provided by SFCC.
The integration consists of an archive with contents as described in the below table.
Name | Purpose |
---|---|
cartridges | Contains Splitit integration cartridges |
cartridges\int_splitit_sg | This cartridge contains the SiteGenesis specific changes required for Splitit integration |
cartridges\int_splitit | This cartridge contains the API calls for Splitit integration and common code extensions |
cartridges\splitit_sg_changes | This cartridge references all the changes done to OOB SiteGenesis files. Please do not include this in the cartridge path and this is for reference purposes only |
cartridges\bm_splitit | This cartridge contains Business Manager UI, BM-related system extensions to add/update general, API, payment, and upstream messaging configurations |
cartridges\bm_splitit_demo | This cartridge contains BM-related system extensions to testing and validating payment flows (cancel, refund, and capture of charges) |
metadata | Contains custom objects and settings required for the integration |
documentation | Contains this document “Splitit SiteGenesis Integration Document” |
Features
The integration described in this document supports the following features:
- Embedded card form checkout using Splitit Flex Fields payment
- Hosted page checkout using Splitit Hosted payment.
- Installment banners that have been implemented using Splitit Upstream Messaging
- Ability to enable/disable the payment methods based on currency and country.
- Ability to configure Splitit settings via a customer-friendly UI interface.
Splitit Flex Fields Payment
Splitit's Flex Fields is a unique product that allows you to fully integrate Splitit into the checkout process on your website, both stylistically and functionally. Flex Fields are individual iFrames plugged directly into the Splitit servers, however, you can extensively customize them. For this customization, we have implemented an intermediate page for the checkout process.
Splitit Hosted Payment
Splitit's Hosted Payment features a full redirect from the merchant site to Splitit's. To use it, fetch a URL from the Splitit API then send your customer there to enter credit card data. After the customer is done checking out, based on the outcome of the transaction, the customer is redirected to the appropriate endpoint within SFCC (success, cancel, or failure).
Splitit Upstream Messaging
Splitit's Upstream Messaging informs the customer early on in their journey on your website that Splitit will be available at checkout. It uses banners, price breakdowns, and Splitit messages that can be added to your home page, footer, product page, cart page, and checkout pages.
Payment Types Supported
Credit cards supported currently
- Visa
- Mastercard
Limitations, Constraints
Please check with Splitit to find out which languages are currently supported.
Compatibility
Available since Commerce Cloud Platform Release 21.2, Site Genesis 105.1.1.
Installation
Cartridges
Upload the following cartridge to the BM code version
- int_splitit_sg
- int_splitit
- bm_splitit
- bm_splitit_demo (Ony on developer sandboxes)
Configure the cartridge path as shown in the below tables. Cartridges should be added to the beginning of the cartridge path.
Site Cartridge Path | int_splitit_sg:int_splitit |
BM Cartridge Path | int_splitit:bm_splitit:bm_splitit_demo |
Metadata
All BM configurations related to the below components have been configured within metadata/site-template folder.
- System/Custom object definitions
- Payment Methods
- Payment Processors
- Services
- Jobs
- Content
Please follow the below steps to import the BM configurations for the above-mentioned components
- Locate the folder metadata in the installation package.
- Review the contents within site-template folder.
- Change the site ID under path site-template\sites to your site ID.
- Change the library ID under path site-template\libraries to your library ID
- Archive the folder to ‘site-template.zip’ and then Import the file via Site Import & Export
Services
Two new services, “splitit.http.sandbox” and “splitit.http.production”, has been created as part of the integration.
Service ID | Service Profile | Service Credential |
---|---|---|
splitit.http.sandbox | splitit.http.sandbox.profile | splitit.http.sandbox.credentials |
splitit.http.production | splitit.http.production.profile | splitit.http.production.credentials |
The URLs for the sandbox and production endpoints have been configured within the cartridge.
Environment | URL |
---|---|
Non-production instances | https://webapi.sandbox.splitit.com/api |
Production instances | https://webapi.splitit.com/api |
Payment Processor
Two new payment processors have been created as part of the cartridge.
- SPLITIT_FLEXFIELDS
- SPLITIT_HOSTED
Payment Processor ID | Purpose |
---|---|
SPLITIT_FLEXFIELDS | Payment processor for processing transactions using the FlexFields (embedded card form) integration |
SPLITIT_ HOSTED | Payment processor for processing transactions using the Hosted page (external redirection) integration |
Payment Methods
A new payment method, Splitit has been created as part of the cartridge.
Jobs
A new job SplititWebhookNotifications has been created as part of the cartridge and is available under Administration > Operations > Jobs. This job processes the CreateSucceeded webhook notifications received from Splitit and processes them in recurring intervals.
Please follow the below steps to configure the job:
- Navigate to Administration > Operations > Jobs > SplititWebhookNotifications
- Select the Schedule and History tab.
- Check the Enabled checkbox.
- Set the Trigger as Recurring Interval
- Configure the start date and recurring interval duration. It is recommended that the recurring interval is >= 5 minutes.
The below image is for reference purpose only.
- Click on the Job Steps tab.
- Click on Scope and select the relevant sites
Content
The following content assets have been created as part of the cartridge
- splitit_homepage_banner
- splitit_footer_banner
- splitit_hostedpayment_paymenttab_message
The following content slots have been created as part of the cartridge
- splitit-home-page-banner
Custom BM Module
A custom BM module has been developed to allow merchants to be able to configure all the Splitit related configurations in one place. This module has been developed using custom objects and not site preferences due to limitations around data replication and API availability for updating site preferences.
IMPORTANT: The custom objects are non-replicable. Hence please complete Splitit production configurations directly on the SFCC Production Instance itself. Configurations through this module cannot be replicated via data replication.
Please follow the below steps to provide permissions to view this BM module.
- Navigate to Administration > Organization > Roles & Permissions.
- Select the role that you would want to give access to the BM module.
- Select the Business Manager Modules tab.
- Select all the relevant sites where Splitit would be configured.
- Select the following modules from the popup and apply the changes
- Confirm that the following section is visible in the Merchant Tools overlay
Configurations
The below sections explain how to set up the Splitit integration-related configurations within Business Manager.
Payment Methods
Please refer to the below table while configuring the Splitit payment method.
Payment Method Setting | Value | Description |
---|---|---|
Payment Processor | SPLITIT_FLEXFIELDS OR SPLITIT_HOSTED | Please select the relevant Payment Processor based on your mode of integration – FlexFields or Hosted |
Min/Max Payment Ranges | Do not configure | Do not configure the min/max payment ranges for currencies. This will be handled via a separate set of configurations. |
Currencies | Based on requirements | Please configure the applicable currencies based on your requirements. |
Countries | Based on requirements | Please configure the applicable countries based on your requirements. |
IMPORTANT: When any of the Payment Method settings have been modified, ensure that the Splitit custom cache is always cleared. Please refer to this link for more details regarding custom cache – Splitit Custom Cache.
Splitit General Configurations
The General Configurations section within Merchant Tools > Splitit allows merchants to configure the following:
Configuration | Purpose |
---|---|
Enable Splitit On/Off | Controls whether the Splitit integration is enabled for the site |
API failure email recipients | Configure email addresses where notifications regarding email failure should be sent to. |
Splitit API Configurations
The API Configurations section within Merchant Tools > Splitit allows merchants to configure the following:
Configuration | Purpose |
---|---|
API Username | This configuration is used within the Login API call which generates the Splitit session id. The value for this configuration can be retrieved from Splitit Dashboard > Credentials > Splitit Integration Credentials > API User Name |
API Password | This configuration is used within the Login API call which generates the Splitit session id. The value for this configuration can be retrieved from Splitit Dashboard > Credentials > Splitit Integration Credentials > API User Password |
API Key | This configuration is set within the header of all the Splitit API calls (except Login). The value for this configuration can be retrieved from Splitit Dashboard > Credentials > Gateway Provider Credentials > Payment Terminal API Key |
Splitit Environment | Configure the Splitit environment this integration would use. On Production SFCC instances, this must be set to Production. On non-production SFCC instances, this must be set to Sandbox |
The Check Credentials button when clicked validates the following
- Format of API Key (does not check if the API key value is valid)
- API User Name and API Password against the Splitit Environment selected
Splitit Payment Configurations
The Payment Configurations section within Merchant Tools > Splitit allows merchants to configure the following:
Configuration | Purpose |
---|---|
Enable 3DS | This configuration is used to enable/disable 3DS validation while processing payments. |
Payment Action | This configuration indicates whether the first installment must be captured on order placement or once the order is dispatched. |
Splitit Upstream Messaging Configurations
The Upstream Messaging Configurations section within Merchant Tools > Splitit allows merchants to configure the following:
Configuration | Purpose |
---|---|
Minimum amount to display the Splitit installment price on PDP | This configuration determines what is the minimum product price required to display the Upstream messaging banners on PDP. Currency-specific amounts can be set. All currencies enabled for the site will be listed here. |
Upstream messaging selection | This is a multi-select configuration with which merchants can decide which pages should display the Upstream Messaging Banner. |
Footer allowed card brands | This is a multi-select configuration that indicates which of the card brand logos must be displayed within the Footer upstream messaging banner. The values selected here would also be used to render the card logos shown against the Splitit payment method tab on the checkout page. |
Splitit Installment Configurations
The Installment Configurations section within Merchant Tools > Splitit allows merchants to configure the following:
Configuration | Purpose |
---|---|
Installment Configurations Min/Max currency | This is a currency dropdown that lists all the currencies enabled on the site. Merchants can configure currency-specific installment ranges and the applicable number of installments by selecting the currency from this dropdown. |
Amount From | Indicates the lower limit of the order total range. |
Amount To | Indicates the upper limit of the order total range |
No. of installments | Comma-separated list of installment options to be presented to the customer on the checkout page for the particular range |
Steps to be followed while configuring installment range and options:
- Pre-determine the different order total ranges and the number of installments to be presented to the customers on the checkout page.
- Select the currency from the currency dropdown.
- Using the Add button creates an entry for the range.
- Enter the lower amount of the order total range within the Amount From column
- Enter the upper amount of the order total range within the Amount To column
- Enter the number of installments to be presented to the customers for this particular order total range.
- Repeat steps 4 – 6 if more than one range is applicable as per business requirements.
- Click on Save
- Repeat steps 1 – 8 for other currencies (if applicable)
Storefront Cartridge Changes
For the Splitit integration to work on SiteGenesis, a few changes are required to be made on the SiteGenesis storefront cartridges.
Controller Changes
COPlaceOrder.js
File location: "sitegenesis storefront controller cartridge}\cartridge\controllers\COPlaceOrderjs"
Global Changes
Add the following lines of code in orange at the class level:
The changes should reflect as shown below.
Function - handlePayments()
Add the following lines of code in orange to the function handlePayments as shown below:
The changes should reflect as shown below:
Function (NEW) – handleSplititRedirect()
Add this new function to the controller:
Function - start() Add the following lines of code in orange to the function start() as shown below:
The changes should reflect as shown below:
COBilling.js
File location: sitegenesis-storefront-controller-cartridge\cartridge\controllers\COBilling.js
Function (NEW) – handleSplititPayments()
Add this new function to the controller:
Function - returnToForm()
Add the following lines of code in orange to the function returnToForm() as shown below:
The changes should reflect as shown below:
Function - publicStart()
Add the following lines of code in orange to the function publicStart() as shown below:
The changes should reflect as shown below:
Client-Side JS Changes
Billing.js
File location: sitegenesis-storefront-core-cartridge/cartridge/js/pages/checkout/billing.js
Function - updatePaymentMethod()
Add the following lines of code in orange to the function updatePaymentMethod() as shown below:
The changes should reflect as shown below:
Function - init()
Add the following lines of code in orange to the function init() as shown below:
The changes should reflect as shown below:
Index.js
File location: sitegenesis-storefront-core-cartridge/cartridge/js/pages/checkout/ index.js
Global Changes
Add the following lines of code in orange at class level:
Function – init()
Add the following lines of code in orange before the end of function init() as shown below
The changes should reflect as shown below:
Shipping.js
File location: sitegenesis-storefront-core-cartridge/cartridge/js/pages/checkout/shipping.js
Global Changes
Add the following lines of code in orange at class level:
Function – updateSummary()
Add the following lines of code in orange to the function updateSummary() as shown below:
The changes should reflect as shown below:
Index.js
File location: sitegenesis-storefront-core-cartridge/cartridge/js/pages/product/index.js
Global Changes
Add the following lines of code in orange at class level:
Function – initializeEvents()
Add the following lines of code in orange to the function initializeEvents() as shown below:
The changes should reflect as shown below:
ProductSet.js
File location: sitegenesis-storefront-core-cartridge/cartridge/js/pages/product/productSet.js
Add the following lines of code in orange at class level:
Function – module.exports
Add the following lines of code in orange to the function module.exports as shown below:
The changes should reflect as shown below: