{"_id":"55de36ed9067202b00de001c","category":{"_id":"55de36ed9067202b00de0017","pages":["55de36ed9067202b00de0019","55de36ed9067202b00de001a","55de36ed9067202b00de001b","55de36ed9067202b00de001c","564bca2242e6862300fc770b","564bcd7ff2a98421005f799c"],"version":"55de36ec9067202b00de0015","project":"55dd0853d2d97337001800e2","__v":3,"sync":{"url":"","isSync":false},"reference":true,"createdAt":"2015-08-26T01:15:07.648Z","from_sync":false,"order":22,"slug":"paystand-checkout","title":"OLD DON'T USE PayStand Checkout"},"project":"55dd0853d2d97337001800e2","__v":51,"editedParams":true,"githubsync":"","parentDoc":null,"user":"55dd080d0efd5821000d53b3","editedParams2":true,"version":{"_id":"55de36ec9067202b00de0015","__v":32,"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"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"3.0.0","version":"3.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-08-26T04:19:26.792Z","link_external":false,"link_url":"","sync_unique":"","hidden":true,"api":{"examples":{"codes":[{"name":"","code":"<script type=\"text/javascript\" id=\"paystand_checkout\" src=\"\"></script>","language":"javascript"}]},"results":{"codes":[{"code":"{<script type=\"text/javascript\">\n  PayStandCheckout.init({\n    \"apiKey\": \"\",\n    \"checkout_domain\": \"\",\n    \"template\": \"default\",\n    \"theme\": \"\",\n    \"total\": \"\",\n    \"currency\": \"usd\",\n    \"echeck_version\": 1,\n    \"details\": {\n      \"shipping\": \"\",\n      \"tax\": \"\",\n      \"service\": \"\"\n    },\n    \"features\": {\n      \"cards\": true,\n      \"echecks\": true,\n      \"bitcoin\": true,\n      \"coupons\": true,\n      \"consumerPays\": true\n    },\n    \"ui\": {\n      \"summary\": {\n        \"show\": true,\n        \"type\": 'order',\n        \"showItems\": true,\n        \"showShipping\": true,\n        \"showService\": true,\n        \"showProcessing\": true,\n        \"showTax\": true,\n        \"showSubTotal\": true,\n        \"showTotal\": true,\n        \"items\": [\n        \t{\n            \"name\": \"\",\n            \"subtitle\": \"\",\n            \"quantity\": \"\",\n            \"price\": \"\",\n            \"photo\": \"\"\n          }\n        ]\n      },\n      \"billing\": {\n        \"show\": true,\n        \"autoFill\": {\n          \"email\": \"\",\n          \"fullName\": \"\",\n          \"street\": \"\",\n          \"city\": \"\",\n          \"postalCode\": \"\",\n          \"state\": \"\",\n          \"country\": \"\"\n        }\n      },\n      \"shipping\": {\n        \"show\": true,\n        \"autoFill\": {\n          \"email\": \"\",\n          \"fullName\": \"\",\n          \"street\": \"\",\n          \"city\": \"\",\n          \"postalCode\": \"\",\n          \"state\": \"\",\n          \"country\": \"\",\n          \"sameAsBilling\": \"\"\n        }\n      }\n    },\n    \"meta\": {\n      \"key_integer\": 983247923,\n      \"key_string\": \"dhjskfhak 3847389sha ashdas\",\n      \"key_html\": \"<h1>Here is some html</h1>\",\n      \"key_float\": 789.76\n    }\n  });\n</script>}","name":"","status":200,"language":"json"}]},"settings":"","auth":"required","params":[{"_id":"55f8d315c7ef770d00d9bdc7","ref":"","in":"body","required":false,"desc":"The public api key you are issued by PayStand","default":"","type":"string","name":"api_key"},{"_id":"55f8d315c7ef770d00d9bdc6","ref":"","in":"body","required":false,"desc":"The location of the server that hosts the version of the PayStand checkout you wish to use for your transaction (the production server is used by default for live transactions, unless you have been provided with a sandbox or info server account to test with)","default":"","type":"string","name":"checkout_domain"},{"_id":"55f8d315c7ef770d00d9bdc5","ref":"","in":"body","required":false,"desc":"The screen layout template (use \"default\")","default":"","type":"string","name":"template"},{"_id":"55f8d315c7ef770d00d9bdc4","ref":"","in":"body","required":false,"desc":"The theme name PayStand provides if you are an enterprise level customer","default":"","type":"string","name":"theme"},{"_id":"55f8d315c7ef770d00d9bdc3","ref":"","in":"body","required":false,"desc":"The transaction total in dollars prior to any applicable payment option transaction fees being added","default":"","type":"string","name":"total"},{"_id":"55f8d315c7ef770d00d9bdc2","ref":"","in":"body","required":false,"desc":"Currency type (PayStand currently limits support to ‘usd’ at this time)","default":"USD","type":"string","name":"currency"},{"_id":"55f8d315c7ef770d00d9bdc1","ref":"","in":"body","required":false,"desc":"","default":"","type":"int","name":"echeck_version"},{"_id":"55f8d38a3bb4bb0d0022d0cf","ref":"","in":"body","required":false,"desc":"Includes parameters to set shipping, tax, and service fees","default":"","type":"object","name":"details"},{"_id":"55f8d38a3bb4bb0d0022d0ce","ref":"","in":"body","required":false,"desc":"Includes parameters to show Credit Card, eCheck, and Bitcoin payment options, as well as show coupons and determine fee responsibility","default":"","type":"object","name":"features"},{"_id":"55f8d38a3bb4bb0d0022d0cd","ref":"","in":"body","required":false,"desc":"Includes parameters to show form sections such as the invoice/order summary, billing address, and shipping address","default":"","type":"object","name":"ui"},{"_id":"55f8d38a3bb4bb0d0022d0cc","ref":"","in":"body","required":false,"desc":"A collection of parameter key/value pairs you can define to be included with the transaction","default":"","type":"object","name":"meta"}],"url":"/checkout"},"isReference":true,"order":2,"body":"First, to ensure that the embedded checkout appears responsively in all screen sizes, ensure to add the viewport meta tag to the <head> section of the html page that will contain your embedded checkout.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nNext, copy & paste the following embed script into your code where you would like the PayStand checkout to appear.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\" id=\\\"paystand_checkout\\\" src=\\\"https://checkout.paystand.info/v2/js/paystand.checkout.js\\\"></script>\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNext, copy and paste the following initialization script just after the embed script which includes configurable parameters.  Please refer to the parameter and object definitions below for specifics on configuring the parameters to meet your checkout needs.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"The parameter values provided in the following code snippet are for example purposes only.\",\n  \"title\": \"Note\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\n  PayStandCheckout.init({\\n    \\\"publishableKey\\\": \\\"\\\",\\n    \\\"checkout_domain\\\": \\\"https://checkout.paystand.info/v2/\\\",\\n    \\\"template\\\": \\\"default\\\",\\n    \\\"theme\\\": \\\"default\\\",\\n    \\\"total\\\": \\\"\\\",\\n    \\\"currency\\\": \\\"usd\\\",\\n    \\\"details\\\": {\\n      \\\"shipping\\\": \\\"\\\",\\n      \\\"service\\\": \\\"\\\"\\n      \\\"processing\\\": \\\"\\\",\\n      \\\"tax\\\": \\\"\\\"\\n    },\\n    \\\"features\\\": {\\n      \\\"cards\\\": true,\\n      \\\"echeck\\\": {\\n       \\t\\\"enabled\\\": true\\n      },\\n      \\\"bitcoin\\\": true,\\n      \\\"coupons\\\": true\\n    },\\n    \\\"ui\\\": {\\n      \\\"summary\\\": {\\n        \\\"show\\\": true,\\n        \\\"type\\\": 'order',\\n        \\\"showItems\\\": true,\\n        \\\"showShipping\\\": true,\\n        \\\"showService\\\": true,\\n        \\\"showProcessing\\\": true,\\n        \\\"showTax\\\": true,\\n        \\\"showSubTotal\\\": true,\\n        \\\"showTotal\\\": true,\\n        \\\"items\\\": [\\n        \\t{\\n            \\\"name\\\": \\\"\\\",\\n            \\\"subtitle\\\": \\\"\\\",\\n            \\\"quantity\\\": \\\"\\\",\\n            \\\"price\\\": \\\"\\\",\\n            \\\"photo\\\": \\\"\\\"\\n          }\\n        ]\\n      },\\n      \\\"billing\\\": {\\n        \\\"show\\\": true,\\n        \\\"autoFill\\\": {\\n          \\\"email\\\": \\\"\\\",\\n          \\\"street1\\\": \\\"\\\",\\n          \\\"street2\\\": \\\"\\\",\\n          \\\"city\\\": \\\"\\\",\\n          \\\"postalCode\\\": \\\"\\\",\\n          \\\"state\\\": \\\"\\\",\\n          \\\"country\\\": \\\"\\\"\\n        }\\n      }\\n    },\\n    \\\"meta\\\": {\\n      \\\"key_integer\\\": 983247923,\\n      \\\"key_string\\\": \\\"dhjskfhak 3847389sha ashdas\\\",\\n      \\\"key_html\\\": \\\"<h1>Here is some html</h1>\\\",\\n      \\\"key_float\\\": 789.76\\n    }\\n  });\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Checkout Object\"\n}\n[/block]\nParameters used to configure checkout appearance and functionality.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"0-0\": \"publishableKey\",\n    \"h-2\": \"Description\",\n    \"0-1\": \"string\",\n    \"0-2\": \"the publishable api key you are issued by PayStand\",\n    \"1-0\": \"template\",\n    \"2-0\": \"theme\",\n    \"3-0\": \"total\",\n    \"4-0\": \"currency\",\n    \"4-2\": \"currency type (PayStand currently limits support to ‘usd’ at this time)\",\n    \"4-1\": \"string\",\n    \"3-1\": \"string\",\n    \"2-1\": \"string\",\n    \"1-1\": \"string\",\n    \"5-0\": \"details\",\n    \"5-1\": \"object\",\n    \"6-0\": \"features\",\n    \"6-1\": \"object\",\n    \"7-0\": \"ui\",\n    \"7-1\": \"object\",\n    \"8-0\": \"meta\",\n    \"8-1\": \"object\",\n    \"8-2\": \"a collection of parameter key/value pairs you can define to be included with the transaction\",\n    \"1-2\": \"the screen layout template (use \\\"default\\\")\",\n    \"2-2\": \"the theme name PayStand provides if you are an enterprise level customer\",\n    \"3-2\": \"the transaction total in dollars. This is the final value that will be sent to PayStand for processing.\",\n    \"5-2\": \"includes parameters to display shipping, tax, processing, and service fees\",\n    \"6-2\": \"includes parameters to show Credit Card, eCheck, and Bitcoin payment options, as well as show coupons and determine fee responsibility\",\n    \"7-2\": \"includes parameters to show form sections such as the invoice/order summary, billing address, and shipping address\"\n  },\n  \"cols\": 3,\n  \"rows\": 9\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note\",\n  \"body\": \"All fund amounts are written as strings, and as dollars (as opposed to cents).\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Currency Options\",\n  \"body\": \"At this time, PayStand only offers transactions using United States dollars (\\\"usd\\\").\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Details Object\"\n}\n[/block]\nUse these parameters to define the shipping, tax, and service charges you want to have displayed. ** Note: These values do not compute. They are for display purposes only. **\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"shipping\",\n    \"1-0\": \"tax\",\n    \"2-0\": \"service\",\n    \"2-1\": \"string\",\n    \"1-1\": \"string\",\n    \"0-1\": \"string\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"2-2\": \"the fee amount (in dollars)\",\n    \"0-2\": \"the fee amount (in dollars)\",\n    \"1-2\": \"the tax amount (in dollars)\",\n    \"3-0\": \"processing\",\n    \"3-1\": \"string\",\n    \"3-2\": \"the fee amount (in dollars)\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Features Object\"\n}\n[/block]\nUse these parameters to define which payment options you want to make available for the transaction, including whether to show a coupon input field, as well as whether the consumer will be responsible for paying the transaction fee.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"cards\",\n    \"1-0\": \"echeck\",\n    \"2-0\": \"bitcoin\",\n    \"3-0\": \"coupons\",\n    \"4-0\": \"\",\n    \"0-1\": \"boolean\",\n    \"1-1\": \"object\",\n    \"2-1\": \"boolean\",\n    \"3-1\": \"boolean\",\n    \"4-1\": \"\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"true shows credit card as a selectable checkout payment option\",\n    \"1-2\": \"pass in the parameter enabled: true to show echeck as a payment option\",\n    \"2-2\": \"true shows Bitcoin as a selectable checkout payment option\",\n    \"3-2\": \"true shows the coupon input field\",\n    \"4-2\": \"\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Payment Options Are Account Dependant\",\n  \"body\": \"Payment options must first be enabled in your PayStand account in order for them to appear in your embedded checkout.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"eCheck Object\"\n}\n[/block]\nUse these parameters to configure the display and versions of eCheck for the transaction.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"enabled\",\n    \"0-1\": \"boolean\",\n    \"0-2\": \"true shows eCheck as a selectable checkout payment option\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"UI Object\"\n}\n[/block]\nUse these objects to configure and define values for the invoice/order summary, billing address, and shipping address checkout features.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"summary\",\n    \"0-1\": \"object\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"1-0\": \"billing\",\n    \"1-1\": \"object\",\n    \"1-2\": \"includes parameters to define billing address data\",\n    \"0-2\": \"includes parameters to configure invoice/order summary data\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Summary Object\"\n}\n[/block]\nUse these parameters to configure the display of the transaction summary.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"show\",\n    \"1-0\": \"type\",\n    \"2-0\": \"showItems\",\n    \"3-0\": \"showShipping\",\n    \"4-0\": \"showService\",\n    \"5-0\": \"showProcessing\",\n    \"6-0\": \"showTax\",\n    \"7-0\": \"showSubTotal\",\n    \"8-0\": \"showTotal\",\n    \"9-0\": \"items\",\n    \"9-1\": \"array[object]\",\n    \"8-1\": \"boolean\",\n    \"7-1\": \"boolean\",\n    \"6-1\": \"boolean\",\n    \"5-1\": \"boolean\",\n    \"4-1\": \"boolean\",\n    \"3-1\": \"boolean\",\n    \"2-1\": \"boolean\",\n    \"1-1\": \"boolean\",\n    \"0-1\": \"boolean\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"true shows the summary\",\n    \"1-2\": \"options include \\\"invoice\\\" and \\\"order\\\"\",\n    \"2-2\": \"true shows all items configured in the items object\",\n    \"3-2\": \"true displays the\",\n    \"4-2\": \"true shows the service fee\",\n    \"5-2\": \"true shows the processing fee associated with the consumer selected payment option\",\n    \"6-2\": \"true shows tax\",\n    \"7-2\": \"true shows transaction sub total amount\",\n    \"8-2\": \"true shows transaction total amount\",\n    \"9-2\": \"pass in all items (as item objects) you want factored into the transaction\"\n  },\n  \"cols\": 3,\n  \"rows\": 10\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Items Object\"\n}\n[/block]\nUse these parameters to define values for each item you want to include in the items array.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"name\",\n    \"1-0\": \"subtitle\",\n    \"2-0\": \"quantity\",\n    \"3-0\": \"price\",\n    \"4-0\": \"photo\",\n    \"0-1\": \"string\",\n    \"1-1\": \"string\",\n    \"2-1\": \"string\",\n    \"3-1\": \"string\",\n    \"4-1\": \"string\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"item name value\",\n    \"1-2\": \"item subtitle value\",\n    \"2-2\": \"how many of this item will be part of the transaction\",\n    \"3-2\": \"the item price (in dollars)\",\n    \"4-2\": \"an item image url\"\n  },\n  \"cols\": 3,\n  \"rows\": 5\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Billing Object (required data)\"\n}\n[/block]\nUse these parameters to configure the display of billing address input fields.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Billing data required to prevent potential fraud\",\n  \"body\": \"PayStand requires billing address data to assist in preventing fraud.  Billing data is validated prior to completing a transaction.  Therefore, billing address fields must be made present in the embedded checkout, or billing address parameter values must be passed into the checkout through the billing object's autoFill object in order for the transaction to succeed.\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"show\",\n    \"1-0\": \"autoFill\",\n    \"1-1\": \"object\",\n    \"0-1\": \"boolean\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-2\": \"true ishows billing address input fields\",\n    \"1-2\": \"includes parameters to define billing-specific email, full name, street, city, postal code, state, and country\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Billing autoFill Object\"\n}\n[/block]\nUse these parameters to define required consumer data values you have to pre-populate in the billing address input fields.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"email\",\n    \"0-1\": \"string\",\n    \"1-0\": \"fullName\",\n    \"1-1\": \"string\",\n    \"2-0\": \"street1\",\n    \"2-1\": \"string\",\n    \"4-0\": \"city\",\n    \"5-0\": \"postalCode\",\n    \"5-1\": \"string\",\n    \"4-1\": \"string\",\n    \"6-1\": \"string\",\n    \"7-1\": \"string\",\n    \"6-0\": \"state\",\n    \"7-0\": \"country\",\n    \"0-2\": \"consumer's billing email  value\",\n    \"1-2\": \"consumer's billing full name value\",\n    \"2-2\": \"consumer's billing street value\",\n    \"4-2\": \"consumer's billing city value\",\n    \"5-2\": \"consumer's billing postal code value\",\n    \"6-2\": \"consumer's billing state value\",\n    \"7-2\": \"consumer's billing country value\",\n    \"3-0\": \"street2\",\n    \"3-1\": \"string\",\n    \"3-2\": \"consumer's billing street value\"\n  },\n  \"cols\": 3,\n  \"rows\": 8\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Meta Object\"\n}\n[/block]\nUse the provided meta object to define your own key value pairs that you wish to be included with the transaction.  These values will not appear in the checkout interface, but will be transparently passed along with each phase of the transaction process.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Working with PayStand on a custom checkout theme?\",\n  \"body\": \"If you are an enterprise customer working with PayStand on a custom theme for your checkout, inquire about how you can have the meta parameters you define be integrated into the display of your embedded checkout.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Testing Your Checkout Implementation\"\n}\n[/block]\nIf you are an enterprise customer that has been issued a sandbox account at PayStand, you can configure your embedded checkout to use this test account to perform transaction tests using test values.\n\nPlease inquire with your PayStand contact to receive information on how to commence testing on our sandbox server. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Need further help?\",\n  \"body\": \"PayStand can offer development assistance while integrating an embedded checkout into your site.  Please feel free to call and ask about these services.\"\n}\n[/block]","excerpt":"paystand.checkout.js provides a lightweight JavaScript library enabling you to embed PayStand checkout features and functionality into your own products.","slug":"checkout-object","type":"basic","title":"Embedded Checkout"}

Embedded Checkout

paystand.checkout.js provides a lightweight JavaScript library enabling you to embed PayStand checkout features and functionality into your own products.

First, to ensure that the embedded checkout appears responsively in all screen sizes, ensure to add the viewport meta tag to the <head> section of the html page that will contain your embedded checkout. [block:code] { "codes": [ { "code": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">", "language": "html" } ] } [/block] Next, copy & paste the following embed script into your code where you would like the PayStand checkout to appear. [block:code] { "codes": [ { "code": "<script type=\"text/javascript\" id=\"paystand_checkout\" src=\"https://checkout.paystand.info/v2/js/paystand.checkout.js\"></script>\n", "language": "javascript" } ] } [/block] Next, copy and paste the following initialization script just after the embed script which includes configurable parameters. Please refer to the parameter and object definitions below for specifics on configuring the parameters to meet your checkout needs. [block:callout] { "type": "info", "body": "The parameter values provided in the following code snippet are for example purposes only.", "title": "Note" } [/block] [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\n PayStandCheckout.init({\n \"publishableKey\": \"\",\n \"checkout_domain\": \"https://checkout.paystand.info/v2/\",\n \"template\": \"default\",\n \"theme\": \"default\",\n \"total\": \"\",\n \"currency\": \"usd\",\n \"details\": {\n \"shipping\": \"\",\n \"service\": \"\"\n \"processing\": \"\",\n \"tax\": \"\"\n },\n \"features\": {\n \"cards\": true,\n \"echeck\": {\n \t\"enabled\": true\n },\n \"bitcoin\": true,\n \"coupons\": true\n },\n \"ui\": {\n \"summary\": {\n \"show\": true,\n \"type\": 'order',\n \"showItems\": true,\n \"showShipping\": true,\n \"showService\": true,\n \"showProcessing\": true,\n \"showTax\": true,\n \"showSubTotal\": true,\n \"showTotal\": true,\n \"items\": [\n \t{\n \"name\": \"\",\n \"subtitle\": \"\",\n \"quantity\": \"\",\n \"price\": \"\",\n \"photo\": \"\"\n }\n ]\n },\n \"billing\": {\n \"show\": true,\n \"autoFill\": {\n \"email\": \"\",\n \"street1\": \"\",\n \"street2\": \"\",\n \"city\": \"\",\n \"postalCode\": \"\",\n \"state\": \"\",\n \"country\": \"\"\n }\n }\n },\n \"meta\": {\n \"key_integer\": 983247923,\n \"key_string\": \"dhjskfhak 3847389sha ashdas\",\n \"key_html\": \"<h1>Here is some html</h1>\",\n \"key_float\": 789.76\n }\n });\n</script>", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Checkout Object" } [/block] Parameters used to configure checkout appearance and functionality. [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Type", "0-0": "publishableKey", "h-2": "Description", "0-1": "string", "0-2": "the publishable api key you are issued by PayStand", "1-0": "template", "2-0": "theme", "3-0": "total", "4-0": "currency", "4-2": "currency type (PayStand currently limits support to ‘usd’ at this time)", "4-1": "string", "3-1": "string", "2-1": "string", "1-1": "string", "5-0": "details", "5-1": "object", "6-0": "features", "6-1": "object", "7-0": "ui", "7-1": "object", "8-0": "meta", "8-1": "object", "8-2": "a collection of parameter key/value pairs you can define to be included with the transaction", "1-2": "the screen layout template (use \"default\")", "2-2": "the theme name PayStand provides if you are an enterprise level customer", "3-2": "the transaction total in dollars. This is the final value that will be sent to PayStand for processing.", "5-2": "includes parameters to display shipping, tax, processing, and service fees", "6-2": "includes parameters to show Credit Card, eCheck, and Bitcoin payment options, as well as show coupons and determine fee responsibility", "7-2": "includes parameters to show form sections such as the invoice/order summary, billing address, and shipping address" }, "cols": 3, "rows": 9 } [/block] [block:callout] { "type": "info", "title": "Note", "body": "All fund amounts are written as strings, and as dollars (as opposed to cents)." } [/block] [block:callout] { "type": "warning", "title": "Currency Options", "body": "At this time, PayStand only offers transactions using United States dollars (\"usd\")." } [/block] [block:api-header] { "type": "basic", "title": "Details Object" } [/block] Use these parameters to define the shipping, tax, and service charges you want to have displayed. ** Note: These values do not compute. They are for display purposes only. ** [block:parameters] { "data": { "0-0": "shipping", "1-0": "tax", "2-0": "service", "2-1": "string", "1-1": "string", "0-1": "string", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "2-2": "the fee amount (in dollars)", "0-2": "the fee amount (in dollars)", "1-2": "the tax amount (in dollars)", "3-0": "processing", "3-1": "string", "3-2": "the fee amount (in dollars)" }, "cols": 3, "rows": 4 } [/block] [block:api-header] { "type": "basic", "title": "Features Object" } [/block] Use these parameters to define which payment options you want to make available for the transaction, including whether to show a coupon input field, as well as whether the consumer will be responsible for paying the transaction fee. [block:parameters] { "data": { "0-0": "cards", "1-0": "echeck", "2-0": "bitcoin", "3-0": "coupons", "4-0": "", "0-1": "boolean", "1-1": "object", "2-1": "boolean", "3-1": "boolean", "4-1": "", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-2": "true shows credit card as a selectable checkout payment option", "1-2": "pass in the parameter enabled: true to show echeck as a payment option", "2-2": "true shows Bitcoin as a selectable checkout payment option", "3-2": "true shows the coupon input field", "4-2": "" }, "cols": 3, "rows": 4 } [/block] [block:callout] { "type": "warning", "title": "Payment Options Are Account Dependant", "body": "Payment options must first be enabled in your PayStand account in order for them to appear in your embedded checkout." } [/block] [block:api-header] { "type": "basic", "title": "eCheck Object" } [/block] Use these parameters to configure the display and versions of eCheck for the transaction. [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-0": "enabled", "0-1": "boolean", "0-2": "true shows eCheck as a selectable checkout payment option" }, "cols": 3, "rows": 1 } [/block] [block:api-header] { "type": "basic", "title": "UI Object" } [/block] Use these objects to configure and define values for the invoice/order summary, billing address, and shipping address checkout features. [block:parameters] { "data": { "0-0": "summary", "0-1": "object", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "1-0": "billing", "1-1": "object", "1-2": "includes parameters to define billing address data", "0-2": "includes parameters to configure invoice/order summary data" }, "cols": 3, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "Summary Object" } [/block] Use these parameters to configure the display of the transaction summary. [block:parameters] { "data": { "0-0": "show", "1-0": "type", "2-0": "showItems", "3-0": "showShipping", "4-0": "showService", "5-0": "showProcessing", "6-0": "showTax", "7-0": "showSubTotal", "8-0": "showTotal", "9-0": "items", "9-1": "array[object]", "8-1": "boolean", "7-1": "boolean", "6-1": "boolean", "5-1": "boolean", "4-1": "boolean", "3-1": "boolean", "2-1": "boolean", "1-1": "boolean", "0-1": "boolean", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-2": "true shows the summary", "1-2": "options include \"invoice\" and \"order\"", "2-2": "true shows all items configured in the items object", "3-2": "true displays the", "4-2": "true shows the service fee", "5-2": "true shows the processing fee associated with the consumer selected payment option", "6-2": "true shows tax", "7-2": "true shows transaction sub total amount", "8-2": "true shows transaction total amount", "9-2": "pass in all items (as item objects) you want factored into the transaction" }, "cols": 3, "rows": 10 } [/block] [block:api-header] { "type": "basic", "title": "Items Object" } [/block] Use these parameters to define values for each item you want to include in the items array. [block:parameters] { "data": { "0-0": "name", "1-0": "subtitle", "2-0": "quantity", "3-0": "price", "4-0": "photo", "0-1": "string", "1-1": "string", "2-1": "string", "3-1": "string", "4-1": "string", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-2": "item name value", "1-2": "item subtitle value", "2-2": "how many of this item will be part of the transaction", "3-2": "the item price (in dollars)", "4-2": "an item image url" }, "cols": 3, "rows": 5 } [/block] [block:api-header] { "type": "basic", "title": "Billing Object (required data)" } [/block] Use these parameters to configure the display of billing address input fields. [block:callout] { "type": "warning", "title": "Billing data required to prevent potential fraud", "body": "PayStand requires billing address data to assist in preventing fraud. Billing data is validated prior to completing a transaction. Therefore, billing address fields must be made present in the embedded checkout, or billing address parameter values must be passed into the checkout through the billing object's autoFill object in order for the transaction to succeed." } [/block] [block:parameters] { "data": { "0-0": "show", "1-0": "autoFill", "1-1": "object", "0-1": "boolean", "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-2": "true ishows billing address input fields", "1-2": "includes parameters to define billing-specific email, full name, street, city, postal code, state, and country" }, "cols": 3, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "Billing autoFill Object" } [/block] Use these parameters to define required consumer data values you have to pre-populate in the billing address input fields. [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Type", "h-2": "Description", "0-0": "email", "0-1": "string", "1-0": "fullName", "1-1": "string", "2-0": "street1", "2-1": "string", "4-0": "city", "5-0": "postalCode", "5-1": "string", "4-1": "string", "6-1": "string", "7-1": "string", "6-0": "state", "7-0": "country", "0-2": "consumer's billing email value", "1-2": "consumer's billing full name value", "2-2": "consumer's billing street value", "4-2": "consumer's billing city value", "5-2": "consumer's billing postal code value", "6-2": "consumer's billing state value", "7-2": "consumer's billing country value", "3-0": "street2", "3-1": "string", "3-2": "consumer's billing street value" }, "cols": 3, "rows": 8 } [/block] [block:api-header] { "type": "basic", "title": "Meta Object" } [/block] Use the provided meta object to define your own key value pairs that you wish to be included with the transaction. These values will not appear in the checkout interface, but will be transparently passed along with each phase of the transaction process. [block:callout] { "type": "info", "title": "Working with PayStand on a custom checkout theme?", "body": "If you are an enterprise customer working with PayStand on a custom theme for your checkout, inquire about how you can have the meta parameters you define be integrated into the display of your embedded checkout." } [/block] [block:api-header] { "type": "basic", "title": "Testing Your Checkout Implementation" } [/block] If you are an enterprise customer that has been issued a sandbox account at PayStand, you can configure your embedded checkout to use this test account to perform transaction tests using test values. Please inquire with your PayStand contact to receive information on how to commence testing on our sandbox server. [block:callout] { "type": "info", "title": "Need further help?", "body": "PayStand can offer development assistance while integrating an embedded checkout into your site. Please feel free to call and ask about these services." } [/block]