Payment Button

The default payment button is automatically enabled and disabled for you and it also includes a loading indicator that shows when a payment is processing. However, you can customize the functionality of the payment button with an onClick function, which you can use to enable or disable the button and loading indicator yourself, or to display a message to the user just before payment is processed.
Add the onClick function to paymentButton in your JavaScript:
var flexFields = Splitit.FlexFields.setup({
    ...
    paymentButton: {
        selector: "#splitit-btn-pay",
        onClick: function(buttonInstance, splititFlexFields){
            if (confirm('Are you sure you wish to proceed?')){
                flexFields.checkout();  // checkout must be called
            }
        }
        }).ready(function () {
            var splititFlexFields = this;
        })
The if statement adds a user confirmation, then calls .checkout(), a requirement.
You can also enable and disable the button and its loading indicator:
onClick: function(buttonInstance){
    buttonInstance.disable()
    buttonInstance.setIsLoading(isLoading=true) 
}    
Another option is to define a completely new payment button. As with the other completely custom elements, you don't need a selector for the custom button in JavaScript (make sure to remove the existing one). You only need to define the HTML and call a function that includes FlexFields.checkout():
<button id="splitit-btn-pay" onclick="performPayment(this);">Perform payment</button>
You also need to manage its disabled state in two places (on error and after payment) and you need to call checkout() in performPayment():
<script>
    var flexFields = Splitit.FlexFields.setup({
        fields: {
            ...
    
        errorBox: {
            ...
        }
        // note that there is no paymentButton selector
    }).ready(function () {
      
    }).onError(function (result) {
        $("#splitit-btn-pay").removeAttr('disabled');
    });
​
    function performPayment(sender){
        $(sender).attr('disabled', true);
        flexFields.checkout();
    }
</script>
Last modified 7mo ago