{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Checkout - Hosted Dialog","type":"basic","slug":"wyre-checkout-hosted-dialog","excerpt":"","body":"[block:api-header]\n{\n  \"title\": \"Overview\"\n}\n[/block]\nThe Wyre Checkout Hosted Dialog will open a browser dialog centred in the screen with the full Checkout Widget loaded. \n\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/9140e1d-WyreCheckoutWidget.png\",\n        \"WyreCheckoutWidget.png\",\n        772,\n        1375,\n        \"#333\"\n      ],\n      \"caption\": \"Wyre Checkout Hosted Dialog\"\n    }\n  ]\n}\n[/block]\n**HTML and a Javascript Sample**\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n<head>\\n    <title>Wyre widget</title>\\n</head>\\n<body>\\n    <button id='buy'>Buy</button>\\n    <div id=\\\"wyre-dropin-widget-container\\\"></div>\\n\\n    <script src=\\\"https://code.jquery.com/jquery-3.3.1.slim.min.js\\\" integrity=\\\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\\\" crossorigin=\\\"anonymous\\\"></script>\\n  <script src=\\\"https://verify.sendwyre.com/js/verify-module-init-beta.js\\\"></script>\\n    <script type=\\\"text/javascript\\\">\\n        (function($) {\\n          \\n          \\t// debit card popup\\n            var widget = new Wyre({\\n                env: 'test',\\n                reservation: 'EFR2WLGEDAMYU6QEAXFF',\\n /*A reservation id is mandatory. In order for the widget to open properly you must use a new, unexpired reservation id. Reservation ids are only valid for 1 hour. A new reservation must also be made if a transaction fails.*/\\n                operation: {\\n                    type: 'debitcard-hosted-dialog'\\n                }\\n            });\\n\\n            widget.on(\\\"paymentSuccess\\\", function (e) {\\n                console.log(\\\"paymentSuccess\\\", e );\\n            });\\n\\n            $('#buy').click(function(){\\n                widget.open();\\n            })\\n\\n        })(jQuery);\\n\\n\\n    </script>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n**Generating a Reservation ID & Quotation**\nLearn how to generate a [Wallet Order Reservation](doc:productiontest-environments). Reservation ids are mandatory. In order for the widget to open properly you must use a new, unexpired reservation id. Reservation ids are only valid for 1 hour. A new reservation must also be made if a transaction fails.\n\nGenerate a [Wallet Order Quotation](doc:wallet-order-quotation). Quotations can greatly improve user experience. This will allow your app to display fees related to the proposed transaction in advance. \n\n**Parameters Documentation** \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Description\",\n    \"h-2\": \"Values\",\n    \"0-0\": \"`env`\",\n    \"0-1\": \"Defines which Wyre environment the widget operates against\\n\\nOptional, defaults to `\\\"prod\\\"`\",\n    \"0-2\": \"`prod`: Our real environment, live at [sendwyre.com](https://www.sendwyre.com)\\n\\n`test`: Our partner testing environment, available at [testwyre.com](https://www.testwyre.com)\",\n    \"2-0\": \"`operation`\",\n    \"2-1\": \"Defines the user operation to perform after on-boarding/compliance requirements have been achieved\\n\\n**Required**\",\n    \"2-2\": \"See [operation](doc:widget-api#operation) below for details.\\n\\nExample: \\n```\\n{\\n  \\\"type\\\": \\\"onramp\\\",\\n  \\\"destCurrency\\\": \\\"BTC\\\",\\n  ...\\n}\\n```\",\n    \"3-0\": \"`auth` (`onramp` only)\",\n    \"3-1\": \"The authorization object that defines how the widget connects to a Wyre account\\n\\n**Required**\",\n    \"3-2\": \"See [authorization](doc:widget-api#authorization) below for details.\",\n    \"1-0\": \"`reservation`\",\n    \"1-1\": \"Your wallet order reservation id. \\nSee [Wallet Order Reservations](doc:wallet-order-reservations) for details.\",\n    \"1-2\": \"This parameter is mandatory.\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Operation Values\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Type\",\n    \"0-1\": \"The type of payment flow the user will go through.\",\n    \"h-1\": \"Description\",\n    \"h-2\": \"Value\",\n    \"0-0\": \"`type`\",\n    \"0-2\": \"**Required**\\n\\n`debitcard-hosted-dialog`: Users will go through a completely full-featured, Wyre-branded debit card payment flow in a separate popup window. This is the fastest way to integrate Wyre's widget.\\n\\n`debitcard-hosted`: Users will go through full-featured, Wyre-branded debit card payment flow hosted by Wyre. Your application will be redirected to Wyre Widget website to finish the payment flow. Once done, you can check **callbacks** to redirect it back to your applicatio\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Callback Events\"\n}\n[/block]\nThe widget will emit several different events at various points throughout its lifecycle. You can register an event handler like this:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Event Name\",\n    \"h-1\": \"Event Properties\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"`paymentSuccess`\",\n    \"0-1\": \"`{ paymentObject }`\",\n    \"0-2\": \"This event is emitted once a Wyre has initiated sending destCurrency to the user.\"\n  },\n  \"cols\": 3,\n  \"rows\": 1\n}\n[/block]\nAfter initiating a purchase, users will be taken to a processing view as the payment is being completed. This process takes a bit of time. Once Wyre has initiated a blockchain transaction, the user will be taken to the Purchase Completed view which will display information about the completed transaction.\n\nYou can retrieve additional information for a new purchase, including the blockchain transaction hash, by submitting a GET request to the following URL:\n`https://api.sendwyre.com/v2/transfer/[transferId]/track`\n\nUsers will be shown the following payment methods based on the browser they are using:\n**Apple Pay**\nSafari for macOS Sierra (v12.1.2) or iOS 10 (v602.1)","updates":[],"order":2,"isReference":true,"hidden":true,"sync_unique":"","link_url":"","link_external":false,"_id":"5f2db2d2818744016537ebd4","createdAt":"2020-08-07T20:00:18.679Z","user":"54ea9905a6f14f0d003e96e7","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Wyre Checkout","slug":"wyre-sdk","order":3,"from_sync":false,"reference":true,"_id":"5bc63538e5a6ba000d22ee6d","project":"550f74bb6fc8130d0038aad3","version":"550f75de61d9d30d00af9e01","createdAt":"2018-10-16T19:00:08.331Z","__v":1},"version":{"version":"3","version_clean":"3.0.0","codename":"","is_stable":true,"is_beta":true,"is_hidden":false,"is_deprecated":false,"categories":["550f75de61d9d30d00af9e02","551027e38579861900a86698","551029e08579861900a8669a","551029e7498062190006328a","5bc633a722d682005c9ad9e4","5bc633b08c4b0b000d6a7eaa","5bc633b48f3ff600626e3e18","5bc63538e5a6ba000d22ee6d","5bc63587a18a6b000decd295","5bc635c0937fcb0056223d9c","5bc6360f42f41800319aeaa6","5be5d13ff1d319002baca9ce","5be5d2287cd14d00291fbfdb","5be8b3b09f7cb70023c56a39","5be8b3cbb910100044e20206","5c1d769a4f6aed001fe527f0","5c402942010f0d001496dded","5e8127d61c906800374eeb1c","5f2768c98622b8005106544a","5f2768d05702ca0011f7655e","5f276e5348d2b600321aef9b","5f276fd300e519001139200a","5f9a2cb79dafe500259281a7"],"_id":"550f75de61d9d30d00af9e01","__v":23,"releaseDate":"2015-03-23T02:09:34.221Z","project":"550f74bb6fc8130d0038aad3","createdAt":"2015-03-23T02:09:34.221Z","forked_from":"550f74bb6fc8130d0038aad6"},"project":"550f74bb6fc8130d0038aad3","__v":0,"parentDoc":null}

Checkout - Hosted Dialog


[block:api-header] { "title": "Overview" } [/block] The Wyre Checkout Hosted Dialog will open a browser dialog centred in the screen with the full Checkout Widget loaded. [block:image] { "images": [ { "image": [ "https://files.readme.io/9140e1d-WyreCheckoutWidget.png", "WyreCheckoutWidget.png", 772, 1375, "#333" ], "caption": "Wyre Checkout Hosted Dialog" } ] } [/block] **HTML and a Javascript Sample** [block:code] { "codes": [ { "code": "<html>\n<head>\n <title>Wyre widget</title>\n</head>\n<body>\n <button id='buy'>Buy</button>\n <div id=\"wyre-dropin-widget-container\"></div>\n\n <script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigin=\"anonymous\"></script>\n <script src=\"https://verify.sendwyre.com/js/verify-module-init-beta.js\"></script>\n <script type=\"text/javascript\">\n (function($) {\n \n \t// debit card popup\n var widget = new Wyre({\n env: 'test',\n reservation: 'EFR2WLGEDAMYU6QEAXFF',\n /*A reservation id is mandatory. In order for the widget to open properly you must use a new, unexpired reservation id. Reservation ids are only valid for 1 hour. A new reservation must also be made if a transaction fails.*/\n operation: {\n type: 'debitcard-hosted-dialog'\n }\n });\n\n widget.on(\"paymentSuccess\", function (e) {\n console.log(\"paymentSuccess\", e );\n });\n\n $('#buy').click(function(){\n widget.open();\n })\n\n })(jQuery);\n\n\n </script>\n</body>\n</html>\n", "language": "html" } ] } [/block] **Generating a Reservation ID & Quotation** Learn how to generate a [Wallet Order Reservation](doc:productiontest-environments). Reservation ids are mandatory. In order for the widget to open properly you must use a new, unexpired reservation id. Reservation ids are only valid for 1 hour. A new reservation must also be made if a transaction fails. Generate a [Wallet Order Quotation](doc:wallet-order-quotation). Quotations can greatly improve user experience. This will allow your app to display fees related to the proposed transaction in advance. **Parameters Documentation** [block:parameters] { "data": { "h-0": "Parameter", "h-1": "Description", "h-2": "Values", "0-0": "`env`", "0-1": "Defines which Wyre environment the widget operates against\n\nOptional, defaults to `\"prod\"`", "0-2": "`prod`: Our real environment, live at [sendwyre.com](https://www.sendwyre.com)\n\n`test`: Our partner testing environment, available at [testwyre.com](https://www.testwyre.com)", "2-0": "`operation`", "2-1": "Defines the user operation to perform after on-boarding/compliance requirements have been achieved\n\n**Required**", "2-2": "See [operation](doc:widget-api#operation) below for details.\n\nExample: \n```\n{\n \"type\": \"onramp\",\n \"destCurrency\": \"BTC\",\n ...\n}\n```", "3-0": "`auth` (`onramp` only)", "3-1": "The authorization object that defines how the widget connects to a Wyre account\n\n**Required**", "3-2": "See [authorization](doc:widget-api#authorization) below for details.", "1-0": "`reservation`", "1-1": "Your wallet order reservation id. \nSee [Wallet Order Reservations](doc:wallet-order-reservations) for details.", "1-2": "This parameter is mandatory." }, "cols": 3, "rows": 4 } [/block] [block:api-header] { "title": "Operation Values" } [/block] [block:parameters] { "data": { "h-0": "Type", "0-1": "The type of payment flow the user will go through.", "h-1": "Description", "h-2": "Value", "0-0": "`type`", "0-2": "**Required**\n\n`debitcard-hosted-dialog`: Users will go through a completely full-featured, Wyre-branded debit card payment flow in a separate popup window. This is the fastest way to integrate Wyre's widget.\n\n`debitcard-hosted`: Users will go through full-featured, Wyre-branded debit card payment flow hosted by Wyre. Your application will be redirected to Wyre Widget website to finish the payment flow. Once done, you can check **callbacks** to redirect it back to your applicatio" }, "cols": 3, "rows": 1 } [/block] [block:api-header] { "title": "Callback Events" } [/block] The widget will emit several different events at various points throughout its lifecycle. You can register an event handler like this: [block:parameters] { "data": { "h-0": "Event Name", "h-1": "Event Properties", "h-2": "Description", "0-0": "`paymentSuccess`", "0-1": "`{ paymentObject }`", "0-2": "This event is emitted once a Wyre has initiated sending destCurrency to the user." }, "cols": 3, "rows": 1 } [/block] After initiating a purchase, users will be taken to a processing view as the payment is being completed. This process takes a bit of time. Once Wyre has initiated a blockchain transaction, the user will be taken to the Purchase Completed view which will display information about the completed transaction. You can retrieve additional information for a new purchase, including the blockchain transaction hash, by submitting a GET request to the following URL: `https://api.sendwyre.com/v2/transfer/[transferId]/track` Users will be shown the following payment methods based on the browser they are using: **Apple Pay** Safari for macOS Sierra (v12.1.2) or iOS 10 (v602.1)