Subscribe Pro Vault Hosted Iframe API

The following documentation describes the Subscribe Pro Vault Hosted Iframe API, including methods, events, and configuration options.

Loading the Iframe Client Script

To load the Subscribe Pro Vault Hosted Iframe client script, add the following <script> tag to your page:

<script
  type="text/javascript"
  src="https://vault.subscribepro.com/js/iframe-client-1.11.0.js"
></script>

Accessing the Iframe Client

Access the Subscribe Pro Vault Hosted Iframe client by referencing the global IframeClient object.

IframeClient.init(newConfig: ClientConfigType)

The Subscribe Pro Vault Hosted Iframe client script is configured by passing a configuration object to the IframeClient.init() function. The configuration object has the following properties:

ClientConfigType Type

Property	Required	Type	Description
`newConfig.vaultUrl`		String	The URL of the Subscribe Pro Vault environment to use. Default: `https://vault.subscribepro.com`
`newConfig.vaultEnvironmentId`	Yes	String	The ID of the Subscribe Pro Vault environment to use. This is a UUID which you should retrieve from the Subscribe Pro Commerce Platform environment you are using.
`newConfig.numberIframe`	Yes	Object	Object representing configuration for the card number iframe / field.
`newConfig.numberIframe.container`	Yes	String	The ID of the `<div>` element.
`newConfig.numberIframe.title`		String	Title to use for the document title inside iframe.
`newConfig.numberIframe.inputType`		String	Type of `<input>` element: `text`, `number` or `password`.
`newConfig.numberIframe.inputMode`		String	Input mode of `<input>` element: `text`, `numeric`, etc. See: [inputmode - HTML: HyperText Markup Language
`newConfig.numberIframe.inputStyle`		String	Inline styles to apply directly to the `<input>` element.
`newConfig.numberIframe.inputClass`		String	Value to use for the `class` attribute on the `<input>` element.
`newConfig.numberIframe.inputPlaceholderText`		String	Placeholder text for the `<input>` element.
`newConfig.numberIframe.styleSheet`		String	Styles to apply inside a `<style>` tag within the iframe document.
`newConfig.cvvIframe`	Conditional	Object	Object representing configuration for the CVV iframe / field. Required when `showCvv` is `true`.
`newConfig.cvvIframe.container`	Yes	String	The ID of the `<div>` element in which to place the CVV iframe.
`newConfig.cvvIframe.title`		String	Title to use for the document title inside iframe.
`newConfig.cvvIframe.inputType`		String	Type of `<input>` element: `text`, `number` or `password`.
`newConfig.cvvIframe.inputMode`		String	Input mode of `<input>` element: `text`, `numeric`, etc. See: [inputmode - HTML: HyperText Markup Language
`newConfig.cvvIframe.inputStyle`		String	Inline styles to apply directly to the `<input>` element.
`newConfig.cvvIframe.inputClass`		String	Value to use for the `class` attribute on the `<input>` element.
`newConfig.cvvIframe.inputPlaceholderText`		String	Placeholder text for the `<input>` element.
`newConfig.cvvIframe.styleSheet`		String	Styles to apply inside a `<style>` tag within the iframe document.
`newConfig.accountIframe`	Conditional	Object	Object representing configuration for the bank account number iframe / field.
`newConfig.accountIframe.container`	Yes	String	The ID of the `<div>` element in which to place the bank account iframe.
`newConfig.accountIframe.title`		String	Title to use for the document title inside iframe.
`newConfig.accountIframe.inputType`		String	Type of `<input>` element: `text`, `number` or `password`.
`newConfig.accountIframe.inputMode`		String	Input mode of `<input>` element: `text`, `numeric`, etc. See: [inputmode - HTML: HyperText Markup Language
`newConfig.accountIframe.inputStyle`		String	Inline styles to apply directly to the `<input>` element.
`newConfig.accountIframe.inputClass`		String	Value to use for the `class` attribute on the `<input>` element.
`newConfig.accountIframe.inputPlaceholderText`		String	Placeholder text for the `<input>` element.
`newConfig.accountIframe.styleSheet`		String	Styles to apply inside a `<style>` tag within the iframe document.
`newConfig.showCvv`		Boolean	Whether or not to show the CVV field / iframe. Default: `true`
`newConfig.requireCvv`		Boolean	Whether or not to require the CVV field to be filled before tokenization. Default: `true`
`newConfig.requireValidation`		Boolean	Whether or not to require that the card number be successfully validated before tokenization. Default: `true`
`newConfig.enablePrettyFormat`		Boolean	Whether or not to enable pretty formatting of the card number. Default: `false`

IframeClient.tokenize()

Tokenizes the card data entered into the card number and CVV fields (or other payment data).

IframeClient.setInputElementStyle({ fieldCode, style })

Sets the style of the specified input element. The method has the following parameters:

Parameter	Type	Description
`fieldCode`	String	The field code of the input element to set the style of. One of: `number`, `cvv`, `account`
`style`	Object	A string containing CSS styles to apply to the input element.

IframeClient.addInputElementStyle({ fieldCode, style })

Adds the specified style to the specified input element. The method has the following parameters:

Parameter	Type	Description
`fieldCode`	String	The field code of the input element to set the style of. One of: `number`, `cvv`, `account`
`style`	Object	A string containing CSS styles to apply to the input element.

IframeClient.setStyleSheet({ fieldCode, styleSheet })

Sets the contents of a stylesheet (<style> element) which will be created inside the iframe and thus can apply styles to the specified input element.

The method has the following parameters:

Parameter	Type	Description
`fieldCode`	String	The field code of the input element to set the style of. One of: `number`, `cvv`, `account`
`styleSheet`	String	A string containing CSS style content to apply inside the created `<style>` element.

IframeClient.setInputClass({ fieldCode, className })

Sets the CSS class of the specified input element. The method has the following parameters:

Parameter	Type	Description
`fieldCode`	String	The field code of the input element to set the style of. One of: `number`, `cvv`, `account`
`className`	String	The CSS class to apply to the input element.

IframeClient.on(eventName, callback)

This method allows you to register a callback function to be called when the specified event occurs.

Please see here for detail about each event type and the data returned to the event handler callback function: Subscribe Pro Vault Hosted Iframe Events