{"_id":"59913bb3f6bb32002f804151","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-14T05:57:07.056Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"ps_container_id\\\"></div>\\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\": \"Script tag for button examples\"\n    }\n  ],\n  \"sidebar\": true\n}\n[/block]\n## Button styles\n\n### Styled\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n\\tclass=\\\"ps-button ps-button-style\\\"\\n>\\n  Pay Now - Styled\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Styled\"\n    }\n  ]\n}\n[/block]\n### Unstyled\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n\\tclass=\\\"ps-button\\\"\\n>\\n  Pay Now - Unstyled\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Unstyled\"\n    }\n  ]\n}\n[/block]\n## Checkout types\n\n### Payment\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n>\\n  Pay Now\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now\"\n    }\n  ]\n}\n[/block]\n### Tokenize\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_token\\\"\\n>\\n  Save Payment Method\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Save Payment Method\"\n    }\n  ]\n}\n[/block]\n### Scheduled Payment\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_scheduled_payment\\\"\\n  ps-spName=\\\"Monthly Rent\\\"\\n  ps-spDescription=\\\"For apartment 201B\\\"\\n  ps-spExtId=\\\"apt201b\\\"\\n  ps-spAmount=\\\"1900\\\"\\n  ps-spCurrency=\\\"USD\\\"\\n  ps-spInterval=\\\"monthly\\\"\\n  ps-spIntervalCount=\\\"1\\\"\\n  ps-spAnchor=\\\"start\\\"\\n  ps-spTimesToRun=\\\"12\\\"\\n>\\n  Schedule Payment\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Schedule Payment\"\n    }\n  ]\n}\n[/block]\n### Custom Preset\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"pay2\\\"\\n  ps-viewCheckout=\\\"mobile\\\"\\n>\\n  Pay Now\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now\"\n    }\n  ]\n}\n[/block]\n## Payment amount\n\n### Editable amount\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.25\\\"\\n>\\n  Pay Now - $20.25\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - $20.25\"\n    }\n  ]\n}\n[/block]\n### Fixed amount\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-fixedAmount=\\\"true\\\"\\n  ps-paymentAmount=\\\"20.59\\\"\\n>\\n  Pay Now - $20.59\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - $20.59\"\n    }\n  ]\n}\n[/block]\n## Checkout display\n\n### Width/height\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.13\\\"\\n  ps-width=\\\"700px\\\"\\n  ps-height=\\\"700px\\\"\\n>\\n  Pay Now - 700px x 700x\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - $20.13\"\n    }\n  ]\n}\n[/block]\n### Close button\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.97\\\"\\n  ps-viewClose=\\\"hide\\\"\\n>\\n  Pay Now - No close button\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - No close button\"\n    }\n  ]\n}\n[/block]\n### Portal view\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.23\\\"\\n  ps-width=\\\"900px\\\"\\n  ps-height=\\\"700px\\\"\\n  ps-viewCheckout=\\\"portal\\\"\\n  ps-viewClose=\\\"show\\\"\\n>\\n  Pay Now - Portal view\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Portal view\"\n    }\n  ]\n}\n[/block]\n### Mobile view\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.97\\\"\\n  ps-viewCheckout=\\\"mobile\\\"\\n  ps-viewClose=\\\"show\\\"\\n>\\n  Pay Now - Mobile view\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Mobile view\"\n    }\n  ]\n}\n[/block]\n## Resource data\n\n### Payer data\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"50.00\\\"\\n  ps-payerName=\\\"John Doe Payer\\\"\\n  ps-payerEmail=\\\"john.doe:::at:::paystand.com\\\"\\n  ps-payerAddressStreet=\\\"123 Alliance Ln\\\"\\n  ps-payerAddressCity=\\\"Santa Cruz\\\"\\n  ps-payerAddressState=\\\"CA\\\"\\n  ps-payerAddressCountry=\\\"USA\\\"\\n  ps-payerAddressPostal=\\\"95060\\\"\\n  ps-payerExternalId=\\\"payer_external_id\\\"\\n  ps-payerMeta='{\\\"payer\\\": \\\"meta\\\"}'\\n>\\n  Pay Now - Payer data\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Payer data\"\n    }\n  ]\n}\n[/block]\n### Card data\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"50.00\\\"\\n  ps-cardName=\\\"John Doe - Card\\\"\\n  ps-cardNumber=\\\"4242424242424242\\\"\\n  ps-cardMonth=\\\"10\\\"\\n  ps-cardYear=\\\"20\\\"\\n  ps-cardCode=\\\"123\\\"\\n  ps-cardExternalId=\\\"card_external_id\\\"\\n  ps-cardMeta='{\\\"card\\\": \\\"meta\\\"}'\\n>\\n  Pay Now - Card data\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Card data\"\n    }\n  ]\n}\n[/block]\n### Bank data\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"50.00\\\"\\n  ps-bankNameOnAccount=\\\"John Doe - Bank\\\"\\n  ps-bankAccountType=\\\"checking\\\"\\n  ps-bankAccountHolderType=\\\"company\\\"\\n  ps-bankRouting=\\\"110000000\\\"\\n  ps-bankAccount=\\\"000123456789\\\"\\n  ps-bankAccountRepeat=\\\"000123456789\\\"\\n  ps-bankExternalId=\\\"bank_external_id\\\"\\n  ps-bankMeta='{\\\"bank\\\": \\\"meta\\\"}'\\n>\\n  Pay Now - Bank data\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Bank data\"\n    }\n  ]\n}\n[/block]\n### Custom field data\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"50.00\\\"\\n  ps-cf_first_name=\\\"First Name Custom Field\\\"\\n>\\n  Pay Now - Custom field data\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Custom field data\"\n    }\n  ]\n}\n[/block]\n## Embed/Modal mode\n\n### Embed\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.98\\\"\\n  ps-mode=\\\"embed\\\"\\n>\\n  Pay Now - Embed\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Embed\"\n    }\n  ]\n}\n[/block]\n### Modal\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.98\\\"\\n  ps-mode=\\\"modal\\\"\\n>\\n  Pay Now - Modal\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Modal\"\n    }\n  ]\n}\n[/block]\n## Header\n\n### Header color\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.24\\\"\\n  ps-headerColor=\\\"darkred\\\"\\n>\\n  Pay Now - Header color\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Header color\"\n    }\n  ]\n}\n[/block]\n### Hide logo\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.77\\\"\\n  ps-viewLogo=\\\"hide\\\"\\n>\\n  Pay Now - Hide logo\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Hide logo\"\n    }\n  ]\n}\n[/block]\n### Custom logo\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.19\\\"\\n  ps-logoUrl=\\\"http://www.image360.com/assets/live/0/34/59/115/118/design-output-services-logo-creation-national-log001.jpg?width=330&height=290&mode=crop&scale=both\\\"\\n  ps-logoBdColor=\\\"#555\\\"\\n  ps-logoBgColor=\\\"#000\\\"\\n  ps-logoWidth=\\\"90px\\\"\\n  ps-logoHeight=\\\"100px\\\"\\n>\\n  Pay Now - Custom logo\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Custom logo\"\n    }\n  ]\n}\n[/block]\n## Custom css\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.19\\\"\\n  ps-externalCss=\\\"../js/paystand.checkout.external.css\\\"\\n>\\n  Pay Now - Custom css\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Custom css\"\n    }\n  ]\n}\n[/block]\n## Payment methods\n\n### Ordering\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.95\\\"\\n  ps-viewFunds=\\\"card,ach,echeck\\\"\\n>\\n  Pay Now - Payment methods - ordering\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Payment methods - ordering\"\n    }\n  ]\n}\n[/block]\n### Removing\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.46\\\"\\n  ps-viewFunds=\\\"card,echeck\\\"\\n>\\n  Pay Now - Payment methods - removing\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Payment methods - removing\"\n    }\n  ]\n}\n[/block]\n### Labels\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.33\\\"\\n  ps-setFundSelector_bankSessionTabText=\\\"1. eCheck\\\"\\n  ps-setFundSelector_cardTabText=\\\"2. Card\\\"\\n  ps-setFundSelector_bankTabText=\\\"3. Bank\\\"\\n>\\n  Pay Now - Payment methods - labels\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Payment methods - labels\"\n    }\n  ]\n}\n[/block]\n### Layout\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.97\\\"\\n  ps-setLayout_fundSelect=\\\"tabs\\\"\\n>\\n  Pay Now - Payment methods - layout\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Payment methods - layout\"\n    }\n  ]\n}\n[/block]\n## Labels and fields\n\n### Section headers\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.03\\\"\\n  ps-showHeader_cardHeader=\\\"show\\\"\\n  ps-setHeader_cardHeader=\\\"Card Details\\\"\\n  ps-showHeader_bankHeader=\\\"show\\\"\\n  ps-setHeader_bankHeader=\\\"Bank Details\\\"\\n  ps-showHeader_payerHeader=\\\"show\\\"\\n  ps-setHeader_payerHeader=\\\"Payer Details\\\"\\n>\\n  Pay Now - Section headers\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Section headers\"\n    }\n  ]\n}\n[/block]\n### Show External Id fields\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.99\\\"\\n  ps-viewExtIds=\\\"card,bank,payer\\\"\\n>\\n  Pay Now - Show External Id fields\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Show External Id fields\"\n    }\n  ]\n}\n[/block]\n### Show field labels\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.21\\\"\\n  ps-viewLabels=\\\"show\\\"\\n>\\n  Pay Now - Show field labels\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Show field labels\"\n    }\n  ]\n}\n[/block]\n### Set field placeholders\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.22\\\"\\n  ps-viewPlaceholders=\\\"show\\\"\\n  ps-setPlaceholder_cardExternalId=\\\"Card external id placeholder\\\"\\n  ps-setPlaceholder_cardName=\\\"Name on card placeholder\\\"\\n  ps-setPlaceholder_cardNumber=\\\"Card number placeholder\\\"\\n  ps-setPlaceholder_cardExpiry=\\\"Card expiry placeholder\\\"\\n  ps-setPlaceholder_cardSecurityCode=\\\"Card security code placeholder\\\"\\n  ps-setPlaceholder_bankNameOnAccount=\\\"Name on account placeholder\\\"\\n  ps-setPlaceholder_bankAccountHolderType=\\\"Account holder type placeholder\\\"\\n  ps-setPlaceholder_bankRouting=\\\"Routing placeholder\\\"\\n  ps-setPlaceholder_bankAccount=\\\"Account placeholder\\\"\\n  ps-setPlaceholder_bankName=\\\"Bank name placeholder\\\"\\n  ps-setPlaceholder_bankAccountRepeat=\\\"Account repeat placeholder\\\"\\n  ps-setPlaceholder_bankExternalId=\\\"External Id placeholder\\\"\\n  ps-setPlaceholder_payerEmail=\\\"Payer email placeholder\\\"\\n  ps-setPlaceholder_payerAddressStreet=\\\"Street placeholder\\\"\\n  ps-setPlaceholder_payerAddressCity=\\\"City placeholder\\\"\\n  ps-setPlaceholder_payerAddressPostal=\\\"Postal placeholder\\\"\\n  ps-setPlaceholder_payerAddressState=\\\"State placeholder\\\"\\n  ps-setPlaceholder_payerAddressCountry=\\\"Country placeholder\\\"\\n>\\n  Pay Now - Set field placeholders\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Set field placeholders\"\n    }\n  ]\n}\n[/block]\n### Set field labels\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.22\\\"\\n  ps-viewLabels=\\\"show\\\"\\n  ps-setLabel_cardExternalId=\\\"Card external id label\\\"\\n  ps-setLabel_cardName=\\\"Name on card label\\\"\\n  ps-setLabel_cardNumber=\\\"Card number label\\\"\\n  ps-setLabel_cardExpiry=\\\"Card expiry label\\\"\\n  ps-setLabel_cardSecurityCode=\\\"Card security code label\\\"\\n  ps-setLabel_bankNameOnAccount=\\\"Name on account label\\\"\\n  ps-setLabel_bankAccountHolderType=\\\"Account holder type label\\\"\\n  ps-setLabel_bankRouting=\\\"Routing label\\\"\\n  ps-setLabel_bankAccount=\\\"Account label\\\"\\n  ps-setLabel_bankName=\\\"Bank name label\\\"\\n  ps-setLabel_bankAccountRepeat=\\\"Account repeat label\\\"\\n  ps-setLabel_bankExternalId=\\\"External Id label\\\"\\n  ps-setLabel_payerEmail=\\\"Payer email label\\\"\\n  ps-setLabel_payerAddressStreet=\\\"Street label\\\"\\n  ps-setLabel_payerAddressCity=\\\"City label\\\"\\n  ps-setLabel_payerAddressPostal=\\\"Postal label\\\"\\n  ps-setLabel_payerAddressState=\\\"State label\\\"\\n  ps-setLabel_payerAddressCountry=\\\"Country label\\\"\\n>\\n  Pay Now - Set field labels\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Set field labels\"\n    }\n  ]\n}\n[/block]\n### Set field icon\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.22\\\"\\n  ps-setFieldIcon_payerEmail=\\\"done\\\"\\n  ps-setFieldIcon_payerAddressStreet=\\\"done\\\"\\n  ps-setFieldIcon_payerAddressCity=\\\"done\\\"\\n  ps-setFieldIcon_payerAddressPostal=\\\"done\\\"\\n  ps-setFieldIcon_payerAddressState=\\\"done\\\"\\n  ps-setFieldIcon_payerAddressCountry=\\\"done\\\"\\n  ps-setFieldIcon_cardExternalId=\\\"done\\\"\\n  ps-setFieldIcon_cardName=\\\"done\\\"\\n  ps-setFieldIcon_cardNumber=\\\"done\\\"\\n  ps-setFieldIcon_cardExpiry=\\\"done\\\"\\n  ps-setFieldIcon_cardSecurityCode=\\\"done\\\"\\n  ps-setFieldIcon_bankNameOnAccount=\\\"done\\\"\\n  ps-setFieldIcon_bankAccountHolderType=\\\"done\\\"\\n  ps-setFieldIcon_bankRouting=\\\"done\\\"\\n  ps-setFieldIcon_bankAccount=\\\"done\\\"\\n  ps-setFieldIcon_bankName=\\\"done\\\"\\n  ps-setFieldIcon_bankAccountRepeat=\\\"done\\\"\\n  ps-setFieldIcon_bankExternalId=\\\"done\\\"\\n>\\n  Pay Now - Set field icons\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Set field icons\"\n    }\n  ]\n}\n[/block]\n### Show fields\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.22\\\"\\n  ps-showField_payerEmail=\\\"show\\\"\\n  ps-showField_payerAddressStreet=\\\"show\\\"\\n  ps-showField_payerAddressCity=\\\"show\\\"\\n  ps-showField_payerAddressPostal=\\\"show\\\"\\n  ps-showField_payerAddressState=\\\"show\\\"\\n  ps-showField_payerAddressCountry=\\\"show\\\"\\n  ps-showField_cardExternalId=\\\"show\\\"\\n  ps-showField_cardName=\\\"show\\\"\\n  ps-showField_cardNumber=\\\"show\\\"\\n  ps-showField_cardExpiry=\\\"show\\\"\\n  ps-showField_cardSecurityCode=\\\"show\\\"\\n  ps-showField_bankNameOnAccount=\\\"show\\\"\\n  ps-showField_bankAccountHolderType=\\\"show\\\"\\n  ps-showField_bankRouting=\\\"show\\\"\\n  ps-showField_bankAccount=\\\"show\\\"\\n  ps-showField_bankName=\\\"show\\\"\\n  ps-showField_bankAccountRepeat=\\\"show\\\"\\n  ps-showField_bankExternalId=\\\"show\\\"\\n>\\n  Pay Now - Show fields\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Show fields\"\n    }\n  ]\n}\n[/block]\n### Show field icons\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.22\\\"\\n  ps-showFieldIcon_payerEmail=\\\"show\\\"\\n  ps-showFieldIcon_payerAddressStreet=\\\"show\\\"\\n  ps-showFieldIcon_payerAddressCity=\\\"show\\\"\\n  ps-showFieldIcon_payerAddressPostal=\\\"show\\\"\\n  ps-showFieldIcon_payerAddressState=\\\"show\\\"\\n  ps-showFieldIcon_payerAddressCountry=\\\"show\\\"\\n  ps-showFieldIcon_cardExternalId=\\\"show\\\"\\n  ps-showFieldIcon_cardName=\\\"show\\\"\\n  ps-showFieldIcon_cardNumber=\\\"show\\\"\\n  ps-showFieldIcon_cardExpiry=\\\"show\\\"\\n  ps-showFieldIcon_cardSecurityCode=\\\"show\\\"\\n  ps-showFieldIcon_bankNameOnAccount=\\\"show\\\"\\n  ps-showFieldIcon_bankAccountHolderType=\\\"show\\\"\\n  ps-showFieldIcon_bankRouting=\\\"show\\\"\\n  ps-showFieldIcon_bankAccount=\\\"show\\\"\\n  ps-showFieldIcon_bankName=\\\"show\\\"\\n  ps-showFieldIcon_bankAccountRepeat=\\\"show\\\"\\n  ps-showFieldIcon_bankExternalId=\\\"show\\\"\\n>\\n  Pay Now - Show field icons\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Show field icons\"\n    }\n  ]\n}\n[/block]\n## Misc\n\n### Click event\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-click=\\\"onButtonClick('some_data')\\\"\\n>\\n  Pay Now - Click event\\n</button>\\n\\n<script type=\\\"text/javascript\\\">\\n  \\n  // example function\\n  function onButtonClick(value) {\\n    return {\\n      \\\"paymentAmount\\\": \\\"20.43\\\"\\n    }\\n  }\\n  \\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Click event\"\n    }\n  ]\n}\n[/block]\n### Close on receipt\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.01\\\"\\n  ps-viewReceipt=\\\"close\\\"\\n>\\n  Pay Now - Close on receipt\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Close on receipt\"\n    }\n  ]\n}\n[/block]\n### Hide security notice\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<button\\n  class=\\\"ps-button ps-button-style\\\"\\n  ps-checkoutType=\\\"checkout_payment\\\"\\n  ps-paymentAmount=\\\"20.76\\\"\\n  ps-viewSecure=\\\"hide\\\"\\n>\\n  Pay Now - Hide security notice\\n</button>\",\n      \"language\": \"html\",\n      \"name\": \"Pay Now - Hide security notice\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"checkout-button-examples","type":"basic","title":"Checkout Button Examples"}

Checkout Button Examples


[block:code] { "codes": [ { "code": "<div id=\"ps_container_id\"></div>\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": "Script tag for button examples" } ], "sidebar": true } [/block] ## Button styles ### Styled [block:code] { "codes": [ { "code": "<button\n\tclass=\"ps-button ps-button-style\"\n>\n Pay Now - Styled\n</button>", "language": "html", "name": "Pay Now - Styled" } ] } [/block] ### Unstyled [block:code] { "codes": [ { "code": "<button\n\tclass=\"ps-button\"\n>\n Pay Now - Unstyled\n</button>", "language": "html", "name": "Pay Now - Unstyled" } ] } [/block] ## Checkout types ### Payment [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n>\n Pay Now\n</button>", "language": "html", "name": "Pay Now" } ] } [/block] ### Tokenize [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_token\"\n>\n Save Payment Method\n</button>", "language": "html", "name": "Save Payment Method" } ] } [/block] ### Scheduled Payment [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_scheduled_payment\"\n ps-spName=\"Monthly Rent\"\n ps-spDescription=\"For apartment 201B\"\n ps-spExtId=\"apt201b\"\n ps-spAmount=\"1900\"\n ps-spCurrency=\"USD\"\n ps-spInterval=\"monthly\"\n ps-spIntervalCount=\"1\"\n ps-spAnchor=\"start\"\n ps-spTimesToRun=\"12\"\n>\n Schedule Payment\n</button>", "language": "html", "name": "Schedule Payment" } ] } [/block] ### Custom Preset [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"pay2\"\n ps-viewCheckout=\"mobile\"\n>\n Pay Now\n</button>", "language": "html", "name": "Pay Now" } ] } [/block] ## Payment amount ### Editable amount [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.25\"\n>\n Pay Now - $20.25\n</button>", "language": "html", "name": "Pay Now - $20.25" } ] } [/block] ### Fixed amount [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-fixedAmount=\"true\"\n ps-paymentAmount=\"20.59\"\n>\n Pay Now - $20.59\n</button>", "language": "html", "name": "Pay Now - $20.59" } ] } [/block] ## Checkout display ### Width/height [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.13\"\n ps-width=\"700px\"\n ps-height=\"700px\"\n>\n Pay Now - 700px x 700x\n</button>", "language": "html", "name": "Pay Now - $20.13" } ] } [/block] ### Close button [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.97\"\n ps-viewClose=\"hide\"\n>\n Pay Now - No close button\n</button>", "language": "html", "name": "Pay Now - No close button" } ] } [/block] ### Portal view [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.23\"\n ps-width=\"900px\"\n ps-height=\"700px\"\n ps-viewCheckout=\"portal\"\n ps-viewClose=\"show\"\n>\n Pay Now - Portal view\n</button>", "language": "html", "name": "Pay Now - Portal view" } ] } [/block] ### Mobile view [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.97\"\n ps-viewCheckout=\"mobile\"\n ps-viewClose=\"show\"\n>\n Pay Now - Mobile view\n</button>", "language": "html", "name": "Pay Now - Mobile view" } ] } [/block] ## Resource data ### Payer data [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"50.00\"\n ps-payerName=\"John Doe Payer\"\n ps-payerEmail=\"john.doe@paystand.com\"\n ps-payerAddressStreet=\"123 Alliance Ln\"\n ps-payerAddressCity=\"Santa Cruz\"\n ps-payerAddressState=\"CA\"\n ps-payerAddressCountry=\"USA\"\n ps-payerAddressPostal=\"95060\"\n ps-payerExternalId=\"payer_external_id\"\n ps-payerMeta='{\"payer\": \"meta\"}'\n>\n Pay Now - Payer data\n</button>", "language": "html", "name": "Pay Now - Payer data" } ] } [/block] ### Card data [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"50.00\"\n ps-cardName=\"John Doe - Card\"\n ps-cardNumber=\"4242424242424242\"\n ps-cardMonth=\"10\"\n ps-cardYear=\"20\"\n ps-cardCode=\"123\"\n ps-cardExternalId=\"card_external_id\"\n ps-cardMeta='{\"card\": \"meta\"}'\n>\n Pay Now - Card data\n</button>", "language": "html", "name": "Pay Now - Card data" } ] } [/block] ### Bank data [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"50.00\"\n ps-bankNameOnAccount=\"John Doe - Bank\"\n ps-bankAccountType=\"checking\"\n ps-bankAccountHolderType=\"company\"\n ps-bankRouting=\"110000000\"\n ps-bankAccount=\"000123456789\"\n ps-bankAccountRepeat=\"000123456789\"\n ps-bankExternalId=\"bank_external_id\"\n ps-bankMeta='{\"bank\": \"meta\"}'\n>\n Pay Now - Bank data\n</button>", "language": "html", "name": "Pay Now - Bank data" } ] } [/block] ### Custom field data [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"50.00\"\n ps-cf_first_name=\"First Name Custom Field\"\n>\n Pay Now - Custom field data\n</button>", "language": "html", "name": "Pay Now - Custom field data" } ] } [/block] ## Embed/Modal mode ### Embed [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.98\"\n ps-mode=\"embed\"\n>\n Pay Now - Embed\n</button>", "language": "html", "name": "Pay Now - Embed" } ] } [/block] ### Modal [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.98\"\n ps-mode=\"modal\"\n>\n Pay Now - Modal\n</button>", "language": "html", "name": "Pay Now - Modal" } ] } [/block] ## Header ### Header color [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.24\"\n ps-headerColor=\"darkred\"\n>\n Pay Now - Header color\n</button>", "language": "html", "name": "Pay Now - Header color" } ] } [/block] ### Hide logo [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.77\"\n ps-viewLogo=\"hide\"\n>\n Pay Now - Hide logo\n</button>", "language": "html", "name": "Pay Now - Hide logo" } ] } [/block] ### Custom logo [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.19\"\n ps-logoUrl=\"http://www.image360.com/assets/live/0/34/59/115/118/design-output-services-logo-creation-national-log001.jpg?width=330&height=290&mode=crop&scale=both\"\n ps-logoBdColor=\"#555\"\n ps-logoBgColor=\"#000\"\n ps-logoWidth=\"90px\"\n ps-logoHeight=\"100px\"\n>\n Pay Now - Custom logo\n</button>", "language": "html", "name": "Pay Now - Custom logo" } ] } [/block] ## Custom css [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.19\"\n ps-externalCss=\"../js/paystand.checkout.external.css\"\n>\n Pay Now - Custom css\n</button>", "language": "html", "name": "Pay Now - Custom css" } ] } [/block] ## Payment methods ### Ordering [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.95\"\n ps-viewFunds=\"card,ach,echeck\"\n>\n Pay Now - Payment methods - ordering\n</button>", "language": "html", "name": "Pay Now - Payment methods - ordering" } ] } [/block] ### Removing [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.46\"\n ps-viewFunds=\"card,echeck\"\n>\n Pay Now - Payment methods - removing\n</button>", "language": "html", "name": "Pay Now - Payment methods - removing" } ] } [/block] ### Labels [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.33\"\n ps-setFundSelector_bankSessionTabText=\"1. eCheck\"\n ps-setFundSelector_cardTabText=\"2. Card\"\n ps-setFundSelector_bankTabText=\"3. Bank\"\n>\n Pay Now - Payment methods - labels\n</button>", "language": "html", "name": "Pay Now - Payment methods - labels" } ] } [/block] ### Layout [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.97\"\n ps-setLayout_fundSelect=\"tabs\"\n>\n Pay Now - Payment methods - layout\n</button>", "language": "html", "name": "Pay Now - Payment methods - layout" } ] } [/block] ## Labels and fields ### Section headers [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.03\"\n ps-showHeader_cardHeader=\"show\"\n ps-setHeader_cardHeader=\"Card Details\"\n ps-showHeader_bankHeader=\"show\"\n ps-setHeader_bankHeader=\"Bank Details\"\n ps-showHeader_payerHeader=\"show\"\n ps-setHeader_payerHeader=\"Payer Details\"\n>\n Pay Now - Section headers\n</button>", "language": "html", "name": "Pay Now - Section headers" } ] } [/block] ### Show External Id fields [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.99\"\n ps-viewExtIds=\"card,bank,payer\"\n>\n Pay Now - Show External Id fields\n</button>", "language": "html", "name": "Pay Now - Show External Id fields" } ] } [/block] ### Show field labels [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.21\"\n ps-viewLabels=\"show\"\n>\n Pay Now - Show field labels\n</button>", "language": "html", "name": "Pay Now - Show field labels" } ] } [/block] ### Set field placeholders [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.22\"\n ps-viewPlaceholders=\"show\"\n ps-setPlaceholder_cardExternalId=\"Card external id placeholder\"\n ps-setPlaceholder_cardName=\"Name on card placeholder\"\n ps-setPlaceholder_cardNumber=\"Card number placeholder\"\n ps-setPlaceholder_cardExpiry=\"Card expiry placeholder\"\n ps-setPlaceholder_cardSecurityCode=\"Card security code placeholder\"\n ps-setPlaceholder_bankNameOnAccount=\"Name on account placeholder\"\n ps-setPlaceholder_bankAccountHolderType=\"Account holder type placeholder\"\n ps-setPlaceholder_bankRouting=\"Routing placeholder\"\n ps-setPlaceholder_bankAccount=\"Account placeholder\"\n ps-setPlaceholder_bankName=\"Bank name placeholder\"\n ps-setPlaceholder_bankAccountRepeat=\"Account repeat placeholder\"\n ps-setPlaceholder_bankExternalId=\"External Id placeholder\"\n ps-setPlaceholder_payerEmail=\"Payer email placeholder\"\n ps-setPlaceholder_payerAddressStreet=\"Street placeholder\"\n ps-setPlaceholder_payerAddressCity=\"City placeholder\"\n ps-setPlaceholder_payerAddressPostal=\"Postal placeholder\"\n ps-setPlaceholder_payerAddressState=\"State placeholder\"\n ps-setPlaceholder_payerAddressCountry=\"Country placeholder\"\n>\n Pay Now - Set field placeholders\n</button>", "language": "html", "name": "Pay Now - Set field placeholders" } ] } [/block] ### Set field labels [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.22\"\n ps-viewLabels=\"show\"\n ps-setLabel_cardExternalId=\"Card external id label\"\n ps-setLabel_cardName=\"Name on card label\"\n ps-setLabel_cardNumber=\"Card number label\"\n ps-setLabel_cardExpiry=\"Card expiry label\"\n ps-setLabel_cardSecurityCode=\"Card security code label\"\n ps-setLabel_bankNameOnAccount=\"Name on account label\"\n ps-setLabel_bankAccountHolderType=\"Account holder type label\"\n ps-setLabel_bankRouting=\"Routing label\"\n ps-setLabel_bankAccount=\"Account label\"\n ps-setLabel_bankName=\"Bank name label\"\n ps-setLabel_bankAccountRepeat=\"Account repeat label\"\n ps-setLabel_bankExternalId=\"External Id label\"\n ps-setLabel_payerEmail=\"Payer email label\"\n ps-setLabel_payerAddressStreet=\"Street label\"\n ps-setLabel_payerAddressCity=\"City label\"\n ps-setLabel_payerAddressPostal=\"Postal label\"\n ps-setLabel_payerAddressState=\"State label\"\n ps-setLabel_payerAddressCountry=\"Country label\"\n>\n Pay Now - Set field labels\n</button>", "language": "html", "name": "Pay Now - Set field labels" } ] } [/block] ### Set field icon [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.22\"\n ps-setFieldIcon_payerEmail=\"done\"\n ps-setFieldIcon_payerAddressStreet=\"done\"\n ps-setFieldIcon_payerAddressCity=\"done\"\n ps-setFieldIcon_payerAddressPostal=\"done\"\n ps-setFieldIcon_payerAddressState=\"done\"\n ps-setFieldIcon_payerAddressCountry=\"done\"\n ps-setFieldIcon_cardExternalId=\"done\"\n ps-setFieldIcon_cardName=\"done\"\n ps-setFieldIcon_cardNumber=\"done\"\n ps-setFieldIcon_cardExpiry=\"done\"\n ps-setFieldIcon_cardSecurityCode=\"done\"\n ps-setFieldIcon_bankNameOnAccount=\"done\"\n ps-setFieldIcon_bankAccountHolderType=\"done\"\n ps-setFieldIcon_bankRouting=\"done\"\n ps-setFieldIcon_bankAccount=\"done\"\n ps-setFieldIcon_bankName=\"done\"\n ps-setFieldIcon_bankAccountRepeat=\"done\"\n ps-setFieldIcon_bankExternalId=\"done\"\n>\n Pay Now - Set field icons\n</button>", "language": "html", "name": "Pay Now - Set field icons" } ] } [/block] ### Show fields [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.22\"\n ps-showField_payerEmail=\"show\"\n ps-showField_payerAddressStreet=\"show\"\n ps-showField_payerAddressCity=\"show\"\n ps-showField_payerAddressPostal=\"show\"\n ps-showField_payerAddressState=\"show\"\n ps-showField_payerAddressCountry=\"show\"\n ps-showField_cardExternalId=\"show\"\n ps-showField_cardName=\"show\"\n ps-showField_cardNumber=\"show\"\n ps-showField_cardExpiry=\"show\"\n ps-showField_cardSecurityCode=\"show\"\n ps-showField_bankNameOnAccount=\"show\"\n ps-showField_bankAccountHolderType=\"show\"\n ps-showField_bankRouting=\"show\"\n ps-showField_bankAccount=\"show\"\n ps-showField_bankName=\"show\"\n ps-showField_bankAccountRepeat=\"show\"\n ps-showField_bankExternalId=\"show\"\n>\n Pay Now - Show fields\n</button>", "language": "html", "name": "Pay Now - Show fields" } ] } [/block] ### Show field icons [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.22\"\n ps-showFieldIcon_payerEmail=\"show\"\n ps-showFieldIcon_payerAddressStreet=\"show\"\n ps-showFieldIcon_payerAddressCity=\"show\"\n ps-showFieldIcon_payerAddressPostal=\"show\"\n ps-showFieldIcon_payerAddressState=\"show\"\n ps-showFieldIcon_payerAddressCountry=\"show\"\n ps-showFieldIcon_cardExternalId=\"show\"\n ps-showFieldIcon_cardName=\"show\"\n ps-showFieldIcon_cardNumber=\"show\"\n ps-showFieldIcon_cardExpiry=\"show\"\n ps-showFieldIcon_cardSecurityCode=\"show\"\n ps-showFieldIcon_bankNameOnAccount=\"show\"\n ps-showFieldIcon_bankAccountHolderType=\"show\"\n ps-showFieldIcon_bankRouting=\"show\"\n ps-showFieldIcon_bankAccount=\"show\"\n ps-showFieldIcon_bankName=\"show\"\n ps-showFieldIcon_bankAccountRepeat=\"show\"\n ps-showFieldIcon_bankExternalId=\"show\"\n>\n Pay Now - Show field icons\n</button>", "language": "html", "name": "Pay Now - Show field icons" } ] } [/block] ## Misc ### Click event [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-click=\"onButtonClick('some_data')\"\n>\n Pay Now - Click event\n</button>\n\n<script type=\"text/javascript\">\n \n // example function\n function onButtonClick(value) {\n return {\n \"paymentAmount\": \"20.43\"\n }\n }\n \n</script>", "language": "html", "name": "Pay Now - Click event" } ] } [/block] ### Close on receipt [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.01\"\n ps-viewReceipt=\"close\"\n>\n Pay Now - Close on receipt\n</button>", "language": "html", "name": "Pay Now - Close on receipt" } ] } [/block] ### Hide security notice [block:code] { "codes": [ { "code": "<button\n class=\"ps-button ps-button-style\"\n ps-checkoutType=\"checkout_payment\"\n ps-paymentAmount=\"20.76\"\n ps-viewSecure=\"hide\"\n>\n Pay Now - Hide security notice\n</button>", "language": "html", "name": "Pay Now - Hide security notice" } ] } [/block]