.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
.png%3Falt%3Dmedia%26token%3D02e7cbad-1e96-42fa-8180-8b13eae9712e)
Quick Start
Try out Flex Fields in the CodePen below. This is a complete working Flex Fields example that consists of a basic Flex Fields HTML layout, some sample CSS as well as an extensive JavaScript that includes config and methods. Additionally, it imports the Flex Fields JavaScript library and the Flex Fields extended stylesheet. Note that this code calls a serverless function (under .ready) to initialize the plugin, but there are many ways to accomplish this using our stable of SDKs, or your own code.
All Flex Field elements can be styled, so you can experiment with changing the CSS. In the JavaScript, note that the default HTML elements need to be assigned. You can make up your own names for these elements but be sure that they have a
splitit prefix to avoid collision with other providers. Other things to notice in the JavaScript are the options to pass user data as well as the space for the initialization (public) token. Try checking out with the card number "4111 1111 1111 1111, exp. 1/28, cvv 123." You can see the result in your browser's console and can also rerun the code.When you are ready to begin using Flex Fields, use the code below, which features the one-line version of Flex Fields, and is set for you to use your own public token to initialize:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
.splitit-flex-field {
border-radius: 20px !important;
background-color: white !important;
padding-top: 7px !important;
padding-bottom: 5px !important;
height: 40px !important;
}
</style>
</head>
<body>
<div style="padding-bottom: 10px; margin-bottom: 10px;">
<button type="button" onclick="flexFields.show()">Pay with Splitit</button>
</div>
<div class="splitit-design-classic" data-splitit-auto-align="standard" id="splitit-card-data"></div>
<script src="https://flexfields.sandbox.splitit.com/v2.0/splitit.flex-fields.sdk.js"></script>
<script>
var flexFields = Splitit.FlexFields.setup({
// debug: true, // <<-- uncomment for extended errors
// whiteLabel: true, // <<--uncomment to remove Splitit branding culture: "en-US",
publicToken: "a51bed04-3b95-492f-941b-468425a3a0aa",
container: "#splitit-card-data",
fields: {
cardholderName: {
selector: "#splitit-cardholder-name"
},
number: {
selector: "#splitit-card-number"
},
cvv: {
selector: "#splitit-cvv"
},
expirationDate: {
selector: "#splitit-expiration-date"
}
},
installmentPicker: {
selector: "#splitit-installment-picker"
},
termsConditions: {
selector: "#splitit-terms-conditions"
},
errorBox: {
selector: "#splitit-error-box"
},
paymentButton: {
selector: "#splitit-btn-pay"
},
billingAddress: {
addressLine: "260 Madison Avenue.",
addressLine2: "Apartment 1",
city: "New York",
state: "NY",
country: "USA",
zip: "10016"
},
consumerData: {
fullName: "John Smith",
email: "[email protected]",
phoneNumber: "1-844-775-4848",
cultureName: "en-us"
}
})
.ready(function () {
})
.onSuccess(function (result) {
// Respond here if payment goes well (Flex Fields object descriptions are below)
console.log(result);
})
.onError(function (err) {
// Payment failed, error object will have the details (Flex Fields object descriptions are below)
console.log(err);
})
</script>
</body>
</html>
Make sure to leave in the include statement for the Flex Fields library:
<script src="https://flexfields.sandbox.splitit.com/v2.0/splitit.flex-fields.sdk.js"></script>
Also be sure to remember that Flex Fields needs to be toggled on and off with FlexFields.hide() and FlexFields.show() (or simply FlexFields.toggle()).
You need to call the Splitit APIs to start an installment plan and get a token to add to your JavaScript. You call the Splitit APIs either when the page with the Splitit UI has loaded or with Ajax after it has loaded, depending on your checkout flow, and depending on whether Splitit is the only payment option on the page. There are two Splitit routes you need to call: Login, which fetches a
SessionId and Initiate, which actually starts a plan.The easiest way to call the Splitit APIs is with one of the Splitit SDKs, which combine the two calls. However, you can also call them separately using technology of your choice.
Call Initiate and pass the
SessionId from Login as well as your Payment Terminal API Key (finding instructions here). To Initiate you can also pass in user data, see your full options at Initiate. It's best to pass as much user data as you can to Initiate because the more you pass now, the less you will have to pass later with JavaScript. For example, billing and shopper info are not mandatory at this point, but eventually they will be.Once you have your token, add it to your front-end JavaScript to allow the user to check out.
Last modified 7mo ago