Load checkout
Its important to wait for the onReady event before attempting to modify checkout so that the checkout client code has an opportunity to connect to the checkout instance in order to open a line of communication. Once checkout is ready, we can send reboot checkout with a new config. Here, we reboot checkout as a payment modal checkout with a fixed amount of $25.34.
Notice the .showCheckout() at the end of the reboot statement. We are telling checkout to show itself. The showCheckout command does not wait for the reboot command to complete. The reboot command gets sent to the checkout instance, the checkout instance will begin to reboot, and while it is rebooting the showCheckout command is also sent. The result will be checkout immediately being displayed with a progress bar indicating that it is rebooting.
// checkout is ready
psCheckout.onReady(function () {
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
}).showCheckout();
});
Most checkout commands can be chained together, as showCheckout was chained to the reboot command above. Chaining is optional. An alternative way to write the above code would be:
// checkout is ready
psCheckout.onReady(function () {
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
})
// show checkout
psCheckout.showCheckout();
});
Wait for checkout to load
It is nice to see a loading bar while the checkout is loading but sometimes finer control over what a user sees during the reboot process is needed. Below, the showing of checkout is delayed until checkout has fully loaded.
// checkout is ready
psCheckout.onReady(function () {
// wait for reboot to complete before showing checkout
psCheckout.onceLoaded(function (data) {
psCheckout.showCheckout();
});
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
});
});
The code above listens for the onceLoaded event to fire before showing checkout. Notice that the listener is added to the top of the onReady callback function. It is imperative that it is defined before the reboot command is called to avoid a possible race condition. The onceLoaded method is used just in case there is code elsewhere that may not want to show the checkout during later reboots. If this is not a concern and checkout should always be shown each time a checkout reboots, the following code can be used:
// checkout is ready
psCheckout.onReady(function () {
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
});
});
// wait for reboot to complete before showing checkout
psCheckout.onLoaded(function (data) {
psCheckout.showCheckout();
});
Hide checkout on complete
The onComplete command can be used to react to a checkout completing successfully. This can be useful when a user needs to be directed to their next step or when they need to be shown a custom receipt. The example below shows a checkout automatically being hidden on completion.
// checkout is ready
psCheckout.onReady(function () {
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
});
});
// wait for reboot to complete before showing checkout
psCheckout.onLoaded(function (data) {
psCheckout.showCheckout();
});
// hide checkout on complete
psCheckout.onComplete(function(data){
psCheckout.hideCheckout();
});
Live updates
Under certain circumstances it may be useful to alter a checkout instance after it has already been booted.
For instance a checkout may already have been booted based on values in a form on the page in which it has been embedded. When the user updates those values, it would be nice to update checkout without performing an entire reboot. The liveUpdate command has been created for exactly such a use case.
// checkout is ready
psCheckout.onReady(function () {
// reboot checkout with a new config
psCheckout.reboot({
"checkoutType": "checkout_payment",
"mode": "modal",
"paymentAmount": "25.34",
"fixedAmount": "true"
});
});
// wait for reboot to complete before showing checkout
psCheckout.onLoaded(function () {
psCheckout.showCheckout();
});
// called from your code on a form update
function onFormUpdate (data) {
psCheckout.liveUpdate({
"paymentAmount": data.amount,
"payerName": data.name,
"payerEmail": data.email
});
}
Not all attributes are available for Live Update
Most resource related attributes can be updated via a live update. Some, but not all, non-resource related attributes can also be updated via a live update. However some attributes, especially those that require significant changes across the checkout experience, cannot be used in a live update scenario.