Payment Form Modal

Splitit's Hosted Payment Solution (Payment Form Modal) is triggered by a customizable Splitit Pay Button, which you add directly into your checkout flow. Once triggered, the Payment Form Modal allows a user to enter credit card information directly and securely, and after they are done, it yields control back to the checkout page, sending either a success or error message.
From a dev standpoint, the process works as follows: you pass user data (address, desired installment plan, etc.) from your front-end checkout form to the Splitit API via your back end. The Splitit API returns a URL complete with authorization token that you then send back to your front-end JavaScript to call the Payment Form Modal, which is pre-populated with the user data that you sent to it in your API call, and also features a personalized logo.
Backend
To get the URL that you'll need to call the Payment Form Modal, pass your user's data from your front-end form to the Splitit API through your server. Do this from the page with your Pay Button, either upon page load (if your user data came from an earlier form), or via Ajax after the Pay Button page is loaded (see below for adding the Pay Button). On the back end, call Login to get a Session ID, which you can then use to call Initiate, the operation that returns the URL for the Payment Form Modal.
The easiest way to call the Splitit APIs is with one of the Splitit SDKs, which combine the two calls that are explained separately below.
Login Details
﻿Call Login to get a SessionId, passing in your API Username and API Password (finding details here). The SessionId is good for 20 minutes from your last call.
Initiate Details
Call Initiate and pass the SessionId from Login and your Payment Terminal API Key, as well as the other data modeled below in our sample:
{
  "RequestHeader": {
        "SessionId": "Session ID from /Login",
        "ApiKey": "Your Payment Terminal API Key"
    },  
    "PlanData": {
        "Amount": {
            "Value": 600,
            "CurrencyCode": "USD"
        },
        "RefOrderNumber": "abc123",
        "AutoCapture": true
    },
    "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"
    },
    "PaymentWizardData": {
        "RequestedNumberOfInstallments": "2,12",
        "IsOpenedInIframe": true
    },
    "RedirectUrls": {
        "Succeeded": "http://localhost/Succeeded",
        "Failed": "http://localhost/Failed",
        "Canceled": "http://localhost/Canceled"
    },
    "PlanApprovalEvidence": {
        "AreTermsAndConditionsApproved": "true"
    }
}
Note that passing BillingAddress is mandatory for funded plans.
﻿You'll receive a CheckoutUrl in the body of the return.
Front End
Set up your front end by styling the Pay Button and calling the Payment Form Modal URL.
HTML
The Splitit Pay Button will show up automatically in the div with the id specified in your JavaScript (see below). Here we will use the id splitit-payment-container:
<div id="splitit-payment-container"></div>
JavaScript
Add the following script to call in the payment button and its associated code:
<script src="https://checkout.sandbox.splitit.com/Popup/v1/pf-embedded.js"></script>
Then add a JavaScript for configuration and settings (here is also where you put the URL returned from the back end):
<script>
    Splitit.Popup.setup({
      style: {
        buttonStyle: {
​
        },
        poweredByStyle: {
    
        },
        containerStyle: {
​
        }
      },
      checkoutUrl: "YOUR RETURNED URL HERE",
      container: "#splitit-payment-container",
      onError: function() {
        console.log("error");
        alert("Your payment was unsuccessful")
      },
      onSuccess: function(data) {
        console.log("success");
        alert("Your payment was successful")
        console.log(data);
      }
    });
</script>
Style the Pay Button using the CSS in the first three sections (which configure the frame, the button, the "powered by statement" underneath, and the container for the two). Add your returned URL to checkoutUrl. Finally, at the bottom, specify actions for success and error to be executed on the calling page upon return. A common thing to do in these functions is to hide the Pay Button on your checkout page (you could use JQuery .hide()for example). Note that in the "success" function here, an object from the Splitit checkout process is returned to your console so you can inspect it.
FAQs
1.﻿Can I style the Payment Form Modal itself? The Payment Form Modal is robust, easy to set up, and requires low PCI compliance, but it does retain Splitit branding.
2.Do I need a token in addition to a URL to call the Payment Form Modal? No, the URL returned from Initiate is all you need.
3.Is there a live example? Please see here.
Last modified 9mo ago