Payment Form IFrame

The Payment 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 Payment Form IFrame.
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.Call Login using your API Username and API Password. A SessionId will be returned.
2.Add the SessionId to the body of the Initiate call, along with your Payment Terminal API Key. The Initiate call can also include specifics such as order details (capture strategy, amount, shopper information, billing address—mandatory for funded plans).
3.In your response from Initiate, isolate the CheckoutURL to send to the front end.
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.
2. You can hide and destroy the IFrame, using .hide() and destroy(), respectively:
splititCheckout.hide()
​
splititCheckout.destroy()
Front End
On the front end, you'll need to add the Payment 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>
2. 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://checkout.sandbox.splitit.com/v3/5?token=cf070c7f-7e04-4ee9-b2d5-c54159f2a94f&culture=en-US",
    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 payment form is closed without payment.)
3. Trigger the Payment Form IFrame using an element of your choice (a button in this example):
<button onclick="splititCheckout.show();">Pay with Splitit</button>
Last modified 9mo ago