Installment Picker

By default, the style of the installment picker is determined by the number of installments in the plan. It is not recommended to override the default, which has been optimized for maximum conversion, but if necessary you can set its style in your JavaScript— specifying buttons, single, slider, or dropdown.
installmentPicker: {
    selector: "#splitit-installment-picker",
    ui: "dropdown"
}
Optionally, you can build a completely custom picker that still utilizes the default payment schedule. The picker does not get a selector in your JavaScript. You do need to specify a JavaScript selector for the payment schedule, however. And you should also call FlexFields.setNumInstallments() in your code in two places, first for the select element's preselected value and then to address actual selections by the user (make sure to add the jQuery library for this code):
<div>
    <select id="num-installments-selector" onchange="numInstallmentsPicked(this)">
        <option value="2" selected="true">Two installments</option> // shown on page load
        <option value="6">Six installments</option>
    </select>
</div>
<div id="splitit-payment-schedule"></div>
​
<script>
    var flexFields = Splitit.FlexFields.setup({
        fields: {
            ...
        },
        ...
                                // (note no installment picker selector),
        paymentSchedule: {
            selector: "#splitit-payment-schedule"
        },
        ...
    }).ready(function () {
        var splititFlexFields = this;
                   
        this.setNumInstallments(parseInt($("#num-installments-selector").val()));  // gets preselected value from the select element
        $.ajax({
            ...
        });
        
    }).onSuccess(function (result) {
        ...
    });
​
    function numInstallmentsPicked(sender){   //responds to user selection
        flexFields.setNumInstallments(parseInt($(sender).val()));
    }
​
</script>
Last modified 7mo ago