{"_id":"59912da70729d9000fd03760","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-14T04:57:11.104Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n<!-- (required) init script tag -->\\n<script\\ntype=\\\"text/javscript\\\"\\nid=\\\"ps_checkout\\\"\\nsrc=\\\"https://checkout.paystand.co/v4/js/paystand.checkout.js\\\"\\nps-env=\\\"sandbox\\\"\\nps-publishableKey=\\\"{your_publishable_key}\\\"\\nps-containerId=\\\"{your_container_id}\\\"\\n...\\n>\\n</script>\\n\",\n      \"language\": \"html\",\n      \"name\": \"Initial Script Tag (required)\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n<!-- (optional) styled payment button -->\\n<button\\nclass=\\\"ps-button ps-button-style\\\"\\nps-checkoutType=\\\"checkout_payment\\\"\\n...\\n>\\n</button>\\n\",\n      \"language\": \"html\",\n      \"name\": \"Styled Payment Button (optional)\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n<!-- ADVANCED (optional) un-styled payment button -->\\n<!-- Use integration specific CSS to style the button -->\\n<button\\nclass=\\\"ps-button\\\"\\nps-checkoutType=\\\"checkout_payment\\\"\\n...\\n>\\n</button>\\n\",\n      \"language\": \"html\",\n      \"name\": \"Unstyled Payment Button (ADVANCED optional)\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n<!-- ADVANCED (optional) auto load payment checkout -->\\n<div\\nid=\\\"ps_checkout_load\\\"\\nps-checkoutType=\\\"checkout_payment\\\"\\n...\\n></div>\\n\",\n      \"language\": \"html\",\n      \"name\": \"Auto Load Payment Checkout (ADVANCED optional)\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- ADVANCED (optional) checkout container -->\\n<div id=\\\"{your_container_id}\\\"></div>\",\n      \"language\": \"html\",\n      \"name\": \"Checkout Container (ADVANCED optional)\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Init script tag\n\nThe initialization script tag sets up the initial checkout environment. The tag must contain the id attribute (set to ```ps_checkout```) and the src and ps-publishableKey attributes must be defined. It is recommended but optional to include the ps-env as well as the ps-containerId attributes.\n\nAny other ```ps-*``` attributes that are added to the init script tag will be used as default values for the checkout experience. As such, when using multiple buttons on a page, it is also recommended to add all common attributes to the script tag so that they are defined only once.\n\n## Buttons\n\nButtons are the easiest way to add a checkout experience. When a website user clicks on a button, a checkout experience will appear with the settings determined from the button element that was clicked as well as any default settings that are found on the init script.\n\nAll buttons must contain the class \"ps-button\". We recommend the element be of type ```<button>``` but that is not strictly required. You could, for example use a standard ```<div>``` attribute if that fits your requirements better.\n\nWe recommend adding the class ```ps-button-style```. This will add a default style to the button. Not adding this class will usually require the developer to add custom styling to the button.\n\nAny other ```ps-*``` attributes that are added to the button will be used to configure the checkout that is rendered upon the button being clicked.\n\n## Auto loading (Embedded Experience)\n\nThe auto load tag is used to render a checkout experience immediately upon page load. The auto load tag must contain the id attribute set to ```ps_checkout_load```.\n\nThe auto loading use-case is typically when the website or application design calls for a checkout experience embedded in the website or web application. Such as when checkout needs to be shown next to for instance the invoice that needs to be paid. \n\nAny other ```ps-*``` attributes that are added to the auto load tag will be used to configure the checkout that is rendered upon page load.\n\n## Checkout container\n\nThe checkout container is an html element that a developer designates as a container for the checkout element. If a containerId is supplied, checkout will attempt to inject its markup inside of the element containing that ```id``` attribute.\n\nThis can be useful to tightly control how the checkout renders on the page.\n\n## ps-* attributes\n\nAny checkout attribute (found in the Checkout Attributes reference section) can be added to the script/button elements by prefixing the attributes with ```ps-```. Adding attributes to an element will configure the elements related checkout according to the attribute definition found in the reference section.\n\n## Checkout listener api\n\nThe checkout listener api allows your application's front-end JavaScript to listen to Checkout events, actions, updates, flows, and status changes. This can be useful for making changes on your page based upon things that are happening in the checkout environment. For example, you could set a button to disable the checkout receipt, listen for the checkout ```loaded``` status, and then use the checkout actions api to hide the checkout and to show your own receipt on the page.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Checkout listeners are no replacement for backend event listeners\",\n  \"body\": \"Please note that checkout listeners are intended for streamlining the front-end user experience and are by no means a replacement for backend event listeners (i.e. webhooks). Backend events have a much more robust and reliable delivery mechanism as well as a means for 2-way authentication as they are intended to be used for business process integrations.\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n/**\\n * ADVANCED (optional) Checkout Listener API\\n */\\n\\n// consume raw events\\npsCheckout.checkoutEvent = function (data) {...};\\npsCheckout.checkoutAction = function (data) {...};\\npsCheckout.checkoutUpdated = function (data) {...};\\npsCheckout.checkoutFlow = function (data) {...};\\n// persistently react to specific checkout status events\\npsCheckout.onCssLoad(function(){...});\\npsCheckout.onLoaded(function(){...});\\npsCheckout.onLoading(function(){...});\\npsCheckout.onReady(function(){...});\\npsCheckout.onComplete(function(){...});\\npsCheckout.onError(function(){...});\\n\\n// react to the next specific checkout status event\\npsCheckout.onceLoaded(function(){...});\\npsCheckout.onceLoading(function(){...});\\npsCheckout.onceComplete(function(){...});\\n                                   \",\n      \"language\": \"javascript\",\n      \"name\": \"Checkout Listener API (ADVANCED optional)\"\n    }\n  ]\n}\n[/block]\n\n## Checkout actions api\n\nThe checkout actions api allows front-end JavaScript to modify the checkout experience in various ways. It can modify how a checkout is displayed such as whether it displays in a modal or an embed, set its width and height, and if its shown or hidden. It can also modify the content of a checkout itself by sending an update, reload, or reset command. The update, reload, and reset command accepts any checkout attribute, not prefixed with ```ps-```.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\n/**\\n * ADVANCED (optional) Checkout Actions API\\n */\\n\\n// modify checkout display\\npsCheckout.showCheckout();\\npsCheckout.hideCheckout();\\npsCheckout.embed();\\npsCheckout.modal();\\npsCheckout.dimensions(width, height);\\n\\n// modify checkout content\\npsCheckout.reboot({...});\\npsCheckout.liveUpdate({...});\\n\",\n      \"language\": \"javascript\",\n      \"name\": \"Checkout Actions API (ADVANCED optional)\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"checkout-elements","type":"basic","title":"Checkout Elements"}
[block:code] { "codes": [ { "code": "\n<!-- (required) init script tag -->\n<script\ntype=\"text/javscript\"\nid=\"ps_checkout\"\nsrc=\"https://checkout.paystand.co/v4/js/paystand.checkout.js\"\nps-env=\"sandbox\"\nps-publishableKey=\"{your_publishable_key}\"\nps-containerId=\"{your_container_id}\"\n...\n>\n</script>\n", "language": "html", "name": "Initial Script Tag (required)" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "\n<!-- (optional) styled payment button -->\n<button\nclass=\"ps-button ps-button-style\"\nps-checkoutType=\"checkout_payment\"\n...\n>\n</button>\n", "language": "html", "name": "Styled Payment Button (optional)" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "\n<!-- ADVANCED (optional) un-styled payment button -->\n<!-- Use integration specific CSS to style the button -->\n<button\nclass=\"ps-button\"\nps-checkoutType=\"checkout_payment\"\n...\n>\n</button>\n", "language": "html", "name": "Unstyled Payment Button (ADVANCED optional)" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "\n<!-- ADVANCED (optional) auto load payment checkout -->\n<div\nid=\"ps_checkout_load\"\nps-checkoutType=\"checkout_payment\"\n...\n></div>\n", "language": "html", "name": "Auto Load Payment Checkout (ADVANCED optional)" } ], "sidebar": true } [/block] [block:code] { "codes": [ { "code": "<!-- ADVANCED (optional) checkout container -->\n<div id=\"{your_container_id}\"></div>", "language": "html", "name": "Checkout Container (ADVANCED optional)" } ], "sidebar": true } [/block] ## Init script tag The initialization script tag sets up the initial checkout environment. The tag must contain the id attribute (set to ```ps_checkout```) and the src and ps-publishableKey attributes must be defined. It is recommended but optional to include the ps-env as well as the ps-containerId attributes. Any other ```ps-*``` attributes that are added to the init script tag will be used as default values for the checkout experience. As such, when using multiple buttons on a page, it is also recommended to add all common attributes to the script tag so that they are defined only once. ## Buttons Buttons are the easiest way to add a checkout experience. When a website user clicks on a button, a checkout experience will appear with the settings determined from the button element that was clicked as well as any default settings that are found on the init script. All buttons must contain the class "ps-button". We recommend the element be of type ```<button>``` but that is not strictly required. You could, for example use a standard ```<div>``` attribute if that fits your requirements better. We recommend adding the class ```ps-button-style```. This will add a default style to the button. Not adding this class will usually require the developer to add custom styling to the button. Any other ```ps-*``` attributes that are added to the button will be used to configure the checkout that is rendered upon the button being clicked. ## Auto loading (Embedded Experience) The auto load tag is used to render a checkout experience immediately upon page load. The auto load tag must contain the id attribute set to ```ps_checkout_load```. The auto loading use-case is typically when the website or application design calls for a checkout experience embedded in the website or web application. Such as when checkout needs to be shown next to for instance the invoice that needs to be paid. Any other ```ps-*``` attributes that are added to the auto load tag will be used to configure the checkout that is rendered upon page load. ## Checkout container The checkout container is an html element that a developer designates as a container for the checkout element. If a containerId is supplied, checkout will attempt to inject its markup inside of the element containing that ```id``` attribute. This can be useful to tightly control how the checkout renders on the page. ## ps-* attributes Any checkout attribute (found in the Checkout Attributes reference section) can be added to the script/button elements by prefixing the attributes with ```ps-```. Adding attributes to an element will configure the elements related checkout according to the attribute definition found in the reference section. ## Checkout listener api The checkout listener api allows your application's front-end JavaScript to listen to Checkout events, actions, updates, flows, and status changes. This can be useful for making changes on your page based upon things that are happening in the checkout environment. For example, you could set a button to disable the checkout receipt, listen for the checkout ```loaded``` status, and then use the checkout actions api to hide the checkout and to show your own receipt on the page. [block:callout] { "type": "warning", "title": "Checkout listeners are no replacement for backend event listeners", "body": "Please note that checkout listeners are intended for streamlining the front-end user experience and are by no means a replacement for backend event listeners (i.e. webhooks). Backend events have a much more robust and reliable delivery mechanism as well as a means for 2-way authentication as they are intended to be used for business process integrations." } [/block] [block:code] { "codes": [ { "code": "\n/**\n * ADVANCED (optional) Checkout Listener API\n */\n\n// consume raw events\npsCheckout.checkoutEvent = function (data) {...};\npsCheckout.checkoutAction = function (data) {...};\npsCheckout.checkoutUpdated = function (data) {...};\npsCheckout.checkoutFlow = function (data) {...};\n// persistently react to specific checkout status events\npsCheckout.onCssLoad(function(){...});\npsCheckout.onLoaded(function(){...});\npsCheckout.onLoading(function(){...});\npsCheckout.onReady(function(){...});\npsCheckout.onComplete(function(){...});\npsCheckout.onError(function(){...});\n\n// react to the next specific checkout status event\npsCheckout.onceLoaded(function(){...});\npsCheckout.onceLoading(function(){...});\npsCheckout.onceComplete(function(){...});\n ", "language": "javascript", "name": "Checkout Listener API (ADVANCED optional)" } ] } [/block] ## Checkout actions api The checkout actions api allows front-end JavaScript to modify the checkout experience in various ways. It can modify how a checkout is displayed such as whether it displays in a modal or an embed, set its width and height, and if its shown or hidden. It can also modify the content of a checkout itself by sending an update, reload, or reset command. The update, reload, and reset command accepts any checkout attribute, not prefixed with ```ps-```. [block:code] { "codes": [ { "code": "\n/**\n * ADVANCED (optional) Checkout Actions API\n */\n\n// modify checkout display\npsCheckout.showCheckout();\npsCheckout.hideCheckout();\npsCheckout.embed();\npsCheckout.modal();\npsCheckout.dimensions(width, height);\n\n// modify checkout content\npsCheckout.reboot({...});\npsCheckout.liveUpdate({...});\n", "language": "javascript", "name": "Checkout Actions API (ADVANCED optional)" } ] } [/block]