Checkout Widget Methods

Merchants can use the Checkout widget Javascript events to access data and functionality.

API entry point

window.scoApi is the root object for the API and contains all the operations available.

Listening for API readiness

The Checkout raises an event when ready, which can be used to safely access the Javascript Events.

Checkout Ready Event

text/javascript

document.addEventListener("checkoutReady", function () {
    console.log("Checkout is ready");
});

Available operations

observeEvent

Observes the client data for changes, calling the supplied function when a change is detected. Returns a function that can be called to stop observing the specified property.

Customer events

The following properties are currently supported:

Property	Description
identity.isCompany	Value True/False whether the Checkout customer is Private or Company
identity.email	Triggered for change of Email
identity.phoneNumber	Triggered for change of PhoneNumber
identity.companyName	Triggered for change of Company Name
identity.firstName	Triggered for change of First Name
identity.lastName	Triggered for change of Last Name
identity.streetAddress	Triggered for change of Street Address
identity.coAddress	Triggered for change of C/O Address
identity.postalCode	Triggered for change of Postal Code
identity.city	Triggered for change of City
identity.addressLines	Triggered for change of Address. Applicable only for International Checkout

Observe Event

text/javascript

document.addEventListener("checkoutReady", function () {
    // Observe the firstName property
    var unsubscribe = window.scoApi.observeEvent("identity.firstName", function (data) {
        console.log("firstName changed to %s.", data.value);
    });
});

Unsubscribe Event

text/javascript

document.addEventListener("checkoutReady", function () {
    // Observe the firstName property
    var unsubscribe = window.scoApi.observeEvent("identity.firstName", function (data) {
        console.log("firstName changed to %s.", data.value);
    });

    //Unsubscribe to the event, which means the change to the firstName is not tracked.
    unsubscribe();
});

Validation events

By subscribing to the event order.validationCallback you will receive a callback function which you can use to tell the checkout us if it should proceed with the purchase or not. The event is triggered when the customer clicks the button to initiate a payment and before the checkout sends a request to the server. The callback expects a response containing a property called valid with the value true or false.

info

If you don't execute the callback within 10 seconds, we will continue with the purchase. If you wish to force the checkout to wait for a response you have to set the RequireClientSideValidationResponse in your MerchantSettings to true while creating your order.

Clientside Event Enable/Disable

text/javascript

document.addEventListener("checkoutReady", function () {
    // Observe the validationCallback property
    var unsubscribe = window.scoApi.observeEvent("order.validationCallback", function (data) {
        // Execute internal validations
        // ***
        // Execute callback with a response
        data.callback({ valid: true });
    });

    // Stop observing
    unsubscribe();
});

setCheckoutEnabled

Use the setCheckoutEnabled method to enable/disable the Checkout. While disabled, the merchant can safely perform updates to the cart. When finished, call setCheckoutEnabled(true) to re-enable the Checkout and make it reflect the changes made.

Checkout Enable/Disable Method

text/javascript

document.addEventListener("checkoutReady", function () {
    window.scoApi.setCheckoutEnabled(false);
});