Hosted Form Modal

Splitit's Hosted Form Modal is triggered by a customizable Splitit Pay Button, which you add directly into your checkout flow. Once triggered, the Hosted 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 Hosted Form Modal, which is pre-populated with the user data that you sent to it in your API call.

Hosted Form Modal Demo

Backend

To get the URL that you'll need to call the Hosted 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 Initiate, the operation that returns the URL for the Hosted Form Modal.

The easiest way to call the Splitit APIs is with one of the Splitit SDKs.

Bearer Token Details

Fetch a bearer token and attach it as header using the instructions under "Authentication."

Initiate Details

Call Initiate using the data modeled below in our sample, but adding your own TerminalId from your merchant portal:

{
  "AutoCapture": false,
  "Attempt3DSecure": false,
  "TermsAndConditionsAccepted": true,
  "PlanData": {
    "TotalAmount": 50.25,
    "Currency": "USD",
    "NumberOfInstallments": 3,
    "PurchaseMethod": "Ecommerce",
    "RefOrderNumber": "MerchantOrder12",
    "TerminalId": "b628b9a4-4c21-4691-97c4-c9f8da665a60",
    "FirstInstallmentAmount": null,
    "ExtendedParams": {
      "AnyParameterKey1": "AnyParameterVal1",
      "AnyParameterKey2": "AnyParameterVal2"
    }
  },
  "Shopper": {
    "FullName": "John Doe",
    "Email": "John.Doe@email.com",
    "PhoneNumber": "+1-972-111-1111",
    "Culture": "en-US"
  },
  "BillingAddress": {
    "AddressLine1": "123 Stanton",
    "AddressLine2": "",
    "City": "NYC",
    "Country": "USA",
    "State": "NY",
    "Zip": "12345"
  },
  "PaymentMethod": {
    "Type": "Card",
    "Card": {
      "CardHolderFullName": "John Doe",
      "CardNumber": "4111111111111111",
      "CardExpYear": 2025,
      "CardExpMonth": 10,
      "CardCvv": "123"
    }
  },
}

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 Hosted 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.

Verify

Once your customer has checked out through the form, make sure to verify the transaction by calling VerifyAuthorization and providing the installment plan number.