{"_id":"5991464c0729d9000fd03906","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:42:20.196Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"To autoload a checkout once a page loads, add an element containing ```id=\"ps_checkout_load\"```. Most attributes that are available to be added to buttons can also be added to the autoload element. Upon a page loading, a checkout will render with the configuration specified on the autoload element.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"ps_container_id\\\"></div>\\n\\n<div\\n  id=\\\"ps_checkout_load\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-mode=\\\"embed\\\"\\n></div>\\n\\n<script\\n  type=\\\"text/javascript\\\"\\n  id=\\\"ps_checkout\\\"\\n  src=\\\"https://checkout.paystand.co/v4/js/paystand.checkout.js\\\"\\n  ps-env=\\\"sandbox\\\"\\n  ps-publishableKey=\\\"1noqhele1yjgieoi8aqe4n8i\\\"\\n  ps-containerId=\\\"ps_container_id\\\"\\n></script>\",\n      \"language\": \"html\",\n      \"name\": \"Embed example\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Autoloading Embed vs Modal Checkout\",\n  \"body\": \"Though the main use case for the Autoloading feature is an embedded checkout, which you most likely would like to show up immediately when the page loads, it can also be used in modal mode. The autoloading modal experience is similar a browser application printer dialog when it generates an HTML or PDF to print in a different tab or window.\"\n}\n[/block]","excerpt":"","slug":"checkout-autoloading-example","type":"basic","title":"Checkout Autoloading Example"}

Checkout Autoloading Example


To autoload a checkout once a page loads, add an element containing ```id="ps_checkout_load"```. Most attributes that are available to be added to buttons can also be added to the autoload element. Upon a page loading, a checkout will render with the configuration specified on the autoload element. [block:code] { "codes": [ { "code": "<div id=\"ps_container_id\"></div>\n\n<div\n id=\"ps_checkout_load\"\n ps-checkoutType=\"checkout_payment\"\n ps-mode=\"embed\"\n></div>\n\n<script\n type=\"text/javascript\"\n id=\"ps_checkout\"\n src=\"https://checkout.paystand.co/v4/js/paystand.checkout.js\"\n ps-env=\"sandbox\"\n ps-publishableKey=\"1noqhele1yjgieoi8aqe4n8i\"\n ps-containerId=\"ps_container_id\"\n></script>", "language": "html", "name": "Embed example" } ] } [/block] [block:callout] { "type": "info", "title": "Autoloading Embed vs Modal Checkout", "body": "Though the main use case for the Autoloading feature is an embedded checkout, which you most likely would like to show up immediately when the page loads, it can also be used in modal mode. The autoloading modal experience is similar a browser application printer dialog when it generates an HTML or PDF to print in a different tab or window." } [/block]