{"_id":"599231381965aa000fa3271c","project":"55dd0853d2d97337001800e2","version":{"_id":"55de36ec9067202b00de0015","__v":33,"project":"55dd0853d2d97337001800e2","createdAt":"2015-08-26T22:00:12.384Z","releaseDate":"2015-08-26T22:00:12.383Z","categories":["55de36ed9067202b00de0016","55de36ed9067202b00de0017","55de36ed9067202b00de0018","55df7dcd437b3f0d004ba204","55e4e014177b6e0d00333141","55e4e01fe252ac0d00303a99","55e4e05240cda60d003bad67","55e4e070177b6e0d00333142","55e4e0753325e60d007fbee6","55e4e0803325e60d007fbee7","55e4e086177b6e0d00333143","55e4e0a1177b6e0d00333144","55e4e0aa3325e60d007fbee8","55e4e0b140cda60d003bad6b","55e4e0bae252ac0d00303a9d","55e4e0c5177b6e0d00333145","55e4e0ee3325e60d007fbeea","55e4e0fae252ac0d00303a9e","55e4e100177b6e0d00333147","55f85c8ba3271b0d00498d55","56092e1ac5cff70d007d0131","564b64a3ee12850d0095866e","564b64b5791099170071e9ea","565cd0bfd18ae50d007183d8","565f5f5d6bafd40d0030a063","565f790d6bafd40d0030a09f","56611c464851190d003f9f5d","56637d5b7988ab0d00d0522e","56637d687988ab0d00d0522f","567835df6928b40d009dd650","56e59c043c29b117008dae5b","5704013559c5190e000ab646","572be252de40590e00026934","58af1bf6ebd7370f0078ba09","5cdad81d912ece0039e9a939"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.0.0","version":"3.0"},"category":{"_id":"5704013559c5190e000ab646","version":"55de36ec9067202b00de0015","project":"55dd0853d2d97337001800e2","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-05T18:17:25.419Z","from_sync":false,"order":3,"slug":"paystand-checkout-1","title":"PayStand Checkout"},"user":"55dd080d0efd5821000d53b3","githubsync":"","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-08-14T23:24:40.787Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":5,"body":"## Listener API\n\n### Overview\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// listen to all events\\npsCheckout.checkoutEvent = function (data) {...};\\n                                          \\n// listen to all action events\\npsCheckout.checkoutAction = function (data) {...};\\n                                             \\n// listen to all update events\\npsCheckout.checkoutUpdated = function (data) {...};\\n                                              \\n// listen to all flow events\\npsCheckout.checkoutFlow = function (data) {...};\\n                                           \\n                                           \\n// fires each time checkoutJS client has connected with the checkout instance\\npsCheckout.onReady(function(){...});\\n                              \\n// fires each time checkout is rebooting\\npsCheckout.onLoading(function(data){...});\\n                                    \\n// fires each time checkout has completed rebooting\\npsCheckout.onLoaded(function(data){...});\\n                                   \\n// fires each time checkout has completed a flow\\npsCheckout.onComplete(function(data){...});\\n                                     \\n// fires each time checkout encounters an error\\npsCheckout.onError(function(data){...});\\n\\n                                  \\n// fires the next time checkout begins rebooting\\npsCheckout.onceLoading(function(data){...});\\n                                      \\n// fires the next time checkout has completed rebooting\\npsCheckout.onceLoaded(function(data){...});\\n\\n// fires the next time checkout completes a flow\\npsCheckout.onceComplete(function(data){...});\\n\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Listener API methods\"\n    }\n  ]\n}\n[/block]\n### Event Listeners\n\npsCheckout provides the methods that can be overridden to help filter various incoming Checkout events.\n\n* **psCheckout.checkoutEvent:** This method will capture all incoming events.\n* **psCheckout.checkoutAction:** This method will capture all event actions such as the closeDialog action.\n* **psCheckout.checkoutUpdated:** This method will capture all update events.\n* **psCheckout.checkoutFlow:** This method will capture all flow related events.\n\n\n### Event types\n\n\n1. **Actions:** Actions are commands that are communicated between CheckoutJS and the Checkout window to perform a specific action. An example would be Checkout sending the ```closeDialog``` command to CheckoutJS so that CheckoutJS will know to hide the Checkout iframe.\n\n2. **Updates:** Some modifications to checkout will update core parts of the checkout experience such as the theme or css. When these sorts of updates are detected, events of type \"update\" are sent.\n\n3. **Flows:** Checkouts are configured with an end goal in mind. This is usually to perform a payment, tokenize a card, or scheduled a payment. Each of these is a \"flow\". When a payment, for example, is completed, an event of type \"flow\" is sent indicating that the flow has completed. This specific example would trigger the onComplete listener to fire as well.\n\n\n### Event Data Object\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n{\\n  \\\"from\\\": \\\"paystand\\\",\\n  \\\"type\\\": \\\"checkoutEvent\\\", // checkoutEvent, checkoutAction, or checkoutFlow\\n  \\\"response\\\": {\\n    \\\"type\\\": \\\"\\\", // various\\n    \\\"flow\\\": \\\"\\\", // payment, tokenize, scheduledPayment\\n    \\\"object\\\": \\\"\\\", // payment, token, scheduledPayment\\n    \\\"data\\\": {}, // data associated with the event\\n    \\\"event\\\": {}, // the event details\\n    \\\"action\\\": \\\"\\\" // the action command\\n  }\\n}\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Event Data Object Structure\"\n    }\n  ]\n}\n[/block]\n\n### Status Listeners\n\nWhen a checkout renders it goes through a series of status transitions. These different status transitions can be detected through the listener api allowing you to react to these status events.\n\n**statuses:** cssLoaded, checkoutLoaded, checkoutLoading, checkoutReady, checkoutComplete, checkoutError\n\nThere are two types of listeners:\n\n1. **\"on\" listeners:** These listeners will persistently monitor the status of checkout and will capture a status event each time checkout transitions to that particular status.\n\n2. **\"once\" listeners:** These listeners will only capture a checkout status event on the very next occurrence of checkout transitioning to a particular status.\n\n## Checkout Actions API\n\n### Overview\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// show checkout\\npsCheckout.showCheckout();\\n\\n// hide checkout\\npsCheckout.hideCheckout();\\n\\n// display checkout as an embed\\npsCheckout.embed();\\n\\n// display checkout as a modal\\npsCheckout.modal();\\n\\n// update checkout width/height\\npsCheckout.dimensions(width, height);\\n\\n\\n// clear current checkout settings/data and reset with provided config settings\\npsCheckout.reboot({...});\\n\\n// keep current checkout settings/data and only update specific config settings\\npsCheckout.liveUpdate({...});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Checkout Actions API Methods\"\n    }\n  ]\n}\n[/block]\n### psCheckout.reboot\nThe ```reboot``` method will clear all of the current settings and data inside the checkout instance and replace it with the settings passed into the method. The final settings that the checkout instance will receive will be the merged values from the passed in settings and the settings found the the initialization ```<script>``` tag. If you require different values than those found on the script tag, then you must explicitly override them in the hash passed to the ```reboot``` method.\n\nOnce the ```reboot``` method is called, the checkout will go through the ```loading``` where the checkout loading progress bar will appear until the reboot is complete and the checkout changes to the ```loaded``` status.\n\n\n### psCheckout.liveUpdate\nThe **liveUpdate** method will update data in the checkout instance directly without causing the checkout instance to go through a reboot process. No status transitions will occur, no progress loading bars will appear, and no status listeners will fire. Depending on what settings are updated during the live update command, one or more event listeners may fire.","excerpt":"","slug":"checkout-api-reference","type":"basic","title":"Checkout API Reference"}

Checkout API Reference


## Listener API ### Overview [block:code] { "codes": [ { "code": "\n// listen to all events\npsCheckout.checkoutEvent = function (data) {...};\n \n// listen to all action events\npsCheckout.checkoutAction = function (data) {...};\n \n// listen to all update events\npsCheckout.checkoutUpdated = function (data) {...};\n \n// listen to all flow events\npsCheckout.checkoutFlow = function (data) {...};\n \n \n// fires each time checkoutJS client has connected with the checkout instance\npsCheckout.onReady(function(){...});\n \n// fires each time checkout is rebooting\npsCheckout.onLoading(function(data){...});\n \n// fires each time checkout has completed rebooting\npsCheckout.onLoaded(function(data){...});\n \n// fires each time checkout has completed a flow\npsCheckout.onComplete(function(data){...});\n \n// fires each time checkout encounters an error\npsCheckout.onError(function(data){...});\n\n \n// fires the next time checkout begins rebooting\npsCheckout.onceLoading(function(data){...});\n \n// fires the next time checkout has completed rebooting\npsCheckout.onceLoaded(function(data){...});\n\n// fires the next time checkout completes a flow\npsCheckout.onceComplete(function(data){...});\n\n", "language": "javascript", "name": "Listener API methods" } ] } [/block] ### Event Listeners psCheckout provides the methods that can be overridden to help filter various incoming Checkout events. * **psCheckout.checkoutEvent:** This method will capture all incoming events. * **psCheckout.checkoutAction:** This method will capture all event actions such as the closeDialog action. * **psCheckout.checkoutUpdated:** This method will capture all update events. * **psCheckout.checkoutFlow:** This method will capture all flow related events. ### Event types 1. **Actions:** Actions are commands that are communicated between CheckoutJS and the Checkout window to perform a specific action. An example would be Checkout sending the ```closeDialog``` command to CheckoutJS so that CheckoutJS will know to hide the Checkout iframe. 2. **Updates:** Some modifications to checkout will update core parts of the checkout experience such as the theme or css. When these sorts of updates are detected, events of type "update" are sent. 3. **Flows:** Checkouts are configured with an end goal in mind. This is usually to perform a payment, tokenize a card, or scheduled a payment. Each of these is a "flow". When a payment, for example, is completed, an event of type "flow" is sent indicating that the flow has completed. This specific example would trigger the onComplete listener to fire as well. ### Event Data Object [block:code] { "codes": [ { "code": "\n{\n \"from\": \"paystand\",\n \"type\": \"checkoutEvent\", // checkoutEvent, checkoutAction, or checkoutFlow\n \"response\": {\n \"type\": \"\", // various\n \"flow\": \"\", // payment, tokenize, scheduledPayment\n \"object\": \"\", // payment, token, scheduledPayment\n \"data\": {}, // data associated with the event\n \"event\": {}, // the event details\n \"action\": \"\" // the action command\n }\n}\n", "language": "javascript", "name": "Event Data Object Structure" } ] } [/block] ### Status Listeners When a checkout renders it goes through a series of status transitions. These different status transitions can be detected through the listener api allowing you to react to these status events. **statuses:** cssLoaded, checkoutLoaded, checkoutLoading, checkoutReady, checkoutComplete, checkoutError There are two types of listeners: 1. **"on" listeners:** These listeners will persistently monitor the status of checkout and will capture a status event each time checkout transitions to that particular status. 2. **"once" listeners:** These listeners will only capture a checkout status event on the very next occurrence of checkout transitioning to a particular status. ## Checkout Actions API ### Overview [block:code] { "codes": [ { "code": "\n// show checkout\npsCheckout.showCheckout();\n\n// hide checkout\npsCheckout.hideCheckout();\n\n// display checkout as an embed\npsCheckout.embed();\n\n// display checkout as a modal\npsCheckout.modal();\n\n// update checkout width/height\npsCheckout.dimensions(width, height);\n\n\n// clear current checkout settings/data and reset with provided config settings\npsCheckout.reboot({...});\n\n// keep current checkout settings/data and only update specific config settings\npsCheckout.liveUpdate({...});\n", "language": "javascript", "name": "Checkout Actions API Methods" } ] } [/block] ### psCheckout.reboot The ```reboot``` method will clear all of the current settings and data inside the checkout instance and replace it with the settings passed into the method. The final settings that the checkout instance will receive will be the merged values from the passed in settings and the settings found the the initialization ```<script>``` tag. If you require different values than those found on the script tag, then you must explicitly override them in the hash passed to the ```reboot``` method. Once the ```reboot``` method is called, the checkout will go through the ```loading``` where the checkout loading progress bar will appear until the reboot is complete and the checkout changes to the ```loaded``` status. ### psCheckout.liveUpdate The **liveUpdate** method will update data in the checkout instance directly without causing the checkout instance to go through a reboot process. No status transitions will occur, no progress loading bars will appear, and no status listeners will fire. Depending on what settings are updated during the live update command, one or more event listeners may fire.