iFrame overview

For merchants who are not using iframe-v1, or iframe-stable, Spreedly has implemented a deprecation plan for iFrame where all versions that are more than 3 months out of date will be deprecated and removed from service. This ensures that all customers are on recent versions with the latest security updates. We strongly recommended implementing one of our regularly updated release channels as they will always be up to date.

📘

Please read the iFrame guide for general-purpose iFrame documentation.

The Spreedly iFrame is available from the following URL:

https://core.spreedly.com/iframe/iframe-v1.min.js

By default, an instance of the Spreedly iFrame will be available on the host page as Spreedly. Invoke the functions described in these docs using the Spreedly object.

// Invoke methods on the "Spreedly" global object,
// for instance...
Spreedly.validate();

Lifecycle

Including the iFrame Javascript file on a checkout page does not automatically load the library. The iFrame’s lifecycle must be explicitly managed using the following functions.

init

Initialize the iFrame library. This must be the first call made to iFrame and will trigger the loading of the iFrame fields.

Signature

init(environmentKey, options)

Spreedly.init("C7cRfNJGODKh4Iu5Ox3PToKjniY", {
  "numberEl": "spreedly-number",
  "cvvEl": "spreedly-cvv"
});

ℹ️

The call to init must be made after the DOM elements for numberEl and cvvEl have been created.

Arguments

Events

reload

Reload the iFrame library. This resets and re-initializes all iFrame elements and state and is a convenient way to quickly reset the form.

Spreedly.reload();

When reload is complete, the ready event will be fired, at which time the iFrame can be customized.

Signature

reload()

removeHandlers

Remove all event handlers currently registered via the on function.

Spreedly.removeHandlers();

Signature

removeHandlers()

SpreedlyPaymentFrame

Create a new, independent, instance of the iFrame. It will be created alongside the default instance, already exposed as Spreedly.

// Create a new instance  
var otherIFrame = new SpreedlyPaymentFrame();

// Configure as usual  
otherIFrame.init("C7cRfNJGODKh4Iu5Ox3PToKjniY", {  
  "numberEl": "number-parent",  
  "cvvEl": "cvv-parent"  
});

otherIFrame.on("ready", function() {  
  // Style etc...  
});

ℹ️

Only instantiate a new instance of the iFrame if you want to use multiple payment forms on the same host page. Otherwise, use the default Spreedly instance that is automatically created on the page.

Signature

SpreedlyPaymentFrame()

Set parameters

Sets parameters to bypass some validation features of the iframe. Valid parameters that can be passed are allow_blank_name and allow_expired_date. If set to true, the related steps in validation will be skipped. Defaults to false.

// On an active Spreedly instance
// Validation will not require any of the name fields
Spreedly.setParam('allow_blank_name', true);

// Validation will still require a date, but it can be expired
Spreedly.setParam('allow_expired_date', true);