Skip to main content

Hosted Form IFrame

The Hosted Form IFrame allows you to call a Splitit payment form as an IFrame—using your own button or other desired JavaScript element. Note: Your merchant account should be set to use Payment Form 3.7 if you wish to use the Hosted Form IFrame.

Hosted Form IFrame Demo

Back End​

To begin the process, on the back end, you must call a Splitit API to Initiate an installment plan (it is best to do this on page load):

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

  2. In your response from Initiate, isolate the CheckoutURL to send to the front end.

Front End​

On the front end, you'll need to add the Hosted Form IFrame library, configure your IFrame in a variable, and then trigger the IFrame with a UI element of your choice.

  1. Call in the Payment Form IFrame library:
<script type="text/javascript" src="https://checkout.sandbox.splitit.com/Iframe/v1/pf-iframe.js">
</script>
  1. Set up your IFrame in a variable and add the CheckoutURL from your backend call to Initiate:
<script>
  var splititCheckout = Splitit.Iframe.setup({
    env: 'sandbox',
    url: "https://pay.sandbox.splitit.com/checkout/0BNDTN5TDAI9KU4CLKIX",
    onError: (error) => {
      console.log('error', error)
    },
    onSuccess: (dataSuccess) => {
      console.log('success', dataSuccess);
    },
    onCancel: () => {
      console.log('cancel');
    }
  })
</script>

`onError`, `onSuccess` and `onCancel` are callbacks allowing you to call functions in response to those events ('onCancel' is called when the the payment form is closed without payment).

  1. Trigger the Hosted Form IFrame using an element of your choice (a button in this example):
<button onclick="splititCheckout.show();">Pay with Splitit</button>

Verify​

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

Other Options:​

  1. There are additional configuration options that you can use, seen in this interface:
  interface Config {
     env: 'sandbox' | 'production';
     url: string;
     elementId?: string;
     onError: (err: Error) => void;
     onSuccess: (s: Success) => void;
     onCancel?: () => void;
},

Note that elementId is only used for custom overlays.

  1. You can hide and destroy the IFrame, using .hide() and destroy(), respectively:
splititCheckout.hide()
splititCheckout.destroy()