{"_id":"599146781b646a001be0be15","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-14T06:43:04.395Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"## Load checkout\n\nIts 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```.\n\nNotice 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n\\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n    \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n    \\\"mode\\\": \\\"modal\\\",\\n    \\\"paymentAmount\\\": \\\"25.34\\\",\\n    \\\"fixedAmount\\\": \\\"true\\\"\\n  }).showCheckout();\\n\\n});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Chaining Commands Example\"\n    }\n  ]\n}\n[/block]\nMost 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n\\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n    \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n    \\\"mode\\\": \\\"modal\\\",\\n    \\\"paymentAmount\\\": \\\"25.34\\\",\\n    \\\"fixedAmount\\\": \\\"true\\\"\\n  })\\n  // show checkout\\n  psCheckout.showCheckout();\\n\\n});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Individual Commands Example\"\n    }\n  ]\n}\n[/block]\n## Wait for checkout to load\n\nIt 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n\\n  // wait for reboot to complete before showing checkout\\n  psCheckout.onceLoaded(function (data) {\\n  psCheckout.showCheckout();\\n  });\\n\\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n    \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n    \\\"mode\\\": \\\"modal\\\",\\n    \\\"paymentAmount\\\": \\\"25.34\\\",\\n    \\\"fixedAmount\\\": \\\"true\\\"\\n  });\\n\\n});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"onceLoaded Example\"\n    }\n  ]\n}\n[/block]\nThe 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:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n  \\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n  \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n  \\\"mode\\\": \\\"modal\\\",\\n  \\\"paymentAmount\\\": \\\"25.34\\\",\\n  \\\"fixedAmount\\\": \\\"true\\\"\\n  });\\n\\n});\\n\\n// wait for reboot to complete before showing checkout\\npsCheckout.onLoaded(function (data) {\\n\\tpsCheckout.showCheckout();\\n});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"onLoaded Example\"\n    }\n  ]\n}\n[/block]\n## Hide checkout on complete\n\nThe ```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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n    \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n    \\\"mode\\\": \\\"modal\\\",\\n    \\\"paymentAmount\\\": \\\"25.34\\\",\\n    \\\"fixedAmount\\\": \\\"true\\\"\\n  });\\n\\n});\\n\\n// wait for reboot to complete before showing checkout\\npsCheckout.onLoaded(function (data) {\\n\\tpsCheckout.showCheckout();\\n});\\n\\n// hide checkout on complete\\npsCheckout.onComplete(function(data){\\n\\tpsCheckout.hideCheckout();\\n});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"onComplete Example\"\n    }\n  ]\n}\n[/block]\n## Live updates\n\nUnder certain circumstances it may be useful to alter a checkout instance after it has already been booted.\n\nFor 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n// checkout is ready\\npsCheckout.onReady(function () {\\n  \\n  // reboot checkout with a new config\\n  psCheckout.reboot({\\n    \\\"checkoutType\\\": \\\"checkout_payment\\\",\\n    \\\"mode\\\": \\\"modal\\\",\\n    \\\"paymentAmount\\\": \\\"25.34\\\",\\n    \\\"fixedAmount\\\": \\\"true\\\"\\n  });\\n\\n});\\n\\n// wait for reboot to complete before showing checkout\\npsCheckout.onLoaded(function () {\\n\\tpsCheckout.showCheckout();\\n});\\n\\n// called from your code on a form update\\nfunction onFormUpdate (data) {\\n  psCheckout.liveUpdate({\\n    \\\"paymentAmount\\\": data.amount,\\n    \\\"payerName\\\": data.name,\\n    \\\"payerEmail\\\": data.email\\n  });\\n}\\n\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"liveUpdate Example\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"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.\",\n  \"title\": \"Not all attributes are available for Live Update\"\n}\n[/block]","excerpt":"","slug":"checkout-api-examples","type":"basic","title":"Checkout API Examples"}

Checkout API Examples


## 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. [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n\n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n }).showCheckout();\n\n});\n", "language": "javascript", "name": "Chaining Commands Example" } ] } [/block] 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: [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n\n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n })\n // show checkout\n psCheckout.showCheckout();\n\n});\n", "language": "javascript", "name": "Individual Commands Example" } ] } [/block] ## 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. [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n\n // wait for reboot to complete before showing checkout\n psCheckout.onceLoaded(function (data) {\n psCheckout.showCheckout();\n });\n\n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n });\n\n});\n", "language": "javascript", "name": "onceLoaded Example" } ] } [/block] 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: [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n \n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n });\n\n});\n\n// wait for reboot to complete before showing checkout\npsCheckout.onLoaded(function (data) {\n\tpsCheckout.showCheckout();\n});\n", "language": "javascript", "name": "onLoaded Example" } ] } [/block] ## 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. [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n });\n\n});\n\n// wait for reboot to complete before showing checkout\npsCheckout.onLoaded(function (data) {\n\tpsCheckout.showCheckout();\n});\n\n// hide checkout on complete\npsCheckout.onComplete(function(data){\n\tpsCheckout.hideCheckout();\n});\n", "language": "javascript", "name": "onComplete Example" } ] } [/block] ## 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. [block:code] { "codes": [ { "code": "\n// checkout is ready\npsCheckout.onReady(function () {\n \n // reboot checkout with a new config\n psCheckout.reboot({\n \"checkoutType\": \"checkout_payment\",\n \"mode\": \"modal\",\n \"paymentAmount\": \"25.34\",\n \"fixedAmount\": \"true\"\n });\n\n});\n\n// wait for reboot to complete before showing checkout\npsCheckout.onLoaded(function () {\n\tpsCheckout.showCheckout();\n});\n\n// called from your code on a form update\nfunction onFormUpdate (data) {\n psCheckout.liveUpdate({\n \"paymentAmount\": data.amount,\n \"payerName\": data.name,\n \"payerEmail\": data.email\n });\n}\n\n", "language": "javascript", "name": "liveUpdate Example" } ] } [/block] [block:callout] { "type": "warning", "body": "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.", "title": "Not all attributes are available for Live Update" } [/block]