Express API lifecycle
API documentation for version 2 and version 3 of the Spreedly Express Javascript API.
Express overview
Review the Express payment form guide for general-purpose information on using Express.
Spreedly Express is available from the following URL: https://core.spreedly.com/iframe/express-3.min.js
By default, an instance of Spreedly Express will be available on the host page as SpreedlyExpress
. Invoke the functions described in these docs using the SpreedlyExpress
object.
// Invoke methods on the "SpreedlyExpress" global object,
// for instance...
SpreedlyExpress.openView();
Lifecycle
Including the Express Javascript file on a checkout page does not automatically load the library. Express’s lifecycle must be explicitly managed using these functions.
init
Initialize the Express library. This must be the first call made to Express.
SpreedlyExpress.init("C7cRfNJGODKh4Iu5Ox3PToKjniY", {
"amount": "$9.83",
"company_name": "Acme Widgets",
"sidebar_top_description": "Providing quality widgets since 2015",
"sidebar_bottom_description": "Your order total today",
"full_name": "First Last"
}, {
"email": "[email protected]"
});
Signature
init(environmentKey, displayOptions, paymentMethodParams)
Arguments
Name | Description |
---|---|
environmentKey | The key of the Spreedly environment where the payment method should be tokenized |
displayOptions | Map of display options |
paymentMethodParams | (optional) Map of values to add to tokenized payment method |
displayOptions
supports the following values:
Name | Description |
---|---|
amount | The amount to display to the user, including currency. E.g., $9.83 . |
company_name | The name of the merchant |
sidebar_top_description | Text to display under the company name |
sidebar_bottom_description | Text to display under the amount |
close_label | Label to use to dismiss the Express view. Defaults to “Cancel”. |
name_label | The input label to use for the user’s name field |
number_label | The input label to use for the credit card number field |
cvv_label | The input label to use for the credit card verification field |
expiration_label | The input label to use for the credit card expiration field |
submit_label | The label for the submit button. Default is “Pay Now”. |
full_name | Autofill the user’s name field by specifying a value here |
paymentMethodParams
supports the following values, which will be stored on the payment method record at Spreedly:
Name |
---|
email |
address1 |
address2 |
city |
state |
zip |
country |
phone_number |
company |
shipping_address1 |
shipping_address2 |
shipping_city |
shipping_state |
shipping_zip |
shipping_country |
shipping_phone_number |
Callbacks
onInit | Description |
---|---|
onInit | Triggered when init has completed and other page elements can be safely enabled (such as the payment button) |
openView
Open the Express payment window to collect the user’s payment information.
SpreedlyExpress.openView();
Signature
openView()
unload
Completely unloads Express. Removes all DOM elements. Resets all callback functions.
SpreedlyExpress.unload();
Signature
unload()
Updated 29 days ago