{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"The Wyre Debit Card Widget","type":"basic","slug":"wyre-widget-v2","excerpt":"","body":"[block:api-header]\n{\n  \"title\": \"Overview\"\n}\n[/block]\nThe JS widget may be deployed on a page within a traditional web application or on an embedded iOS/Android WebView. Bypassing configuration parameters to the widget in Javascript when you initialize it, you may control its behaviour and the resulting customer experience.\n\nAs a partner developer, you will not have direct access to the customer's personal information. The underlying personal information is exposed only in response to demands made to Wyre lawfully (or, in some cases, in support of **security** authorization).\n\n**Apple pay will only work in hosted mode. * \n\n\n[block:api-header]\n{\n  \"title\": \"Wyre Widget Instantiation - Embedded Mode\"\n}\n[/block]\nThe Wyre Widget can be instantiated in two different ways:\n- A full-featured, Wyre-branded Debit Card payment processing flow as a popup\n- A full-featured, Wyre-branded Debit Card payment processing flow embedded in the window\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                operation: {\\n                    type: 'debitcard',\\n                    dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n                    destCurrency: \\\"ETH\\\",\\n                    sourceAmount: 10.0,\\n                    paymentMethod: 'apple-pay'\\n                }\\n            });\\n\\n            // debit card embedded\\n            // var widget = new Wyre({\\n            //     env: 'test',\\n            //     operation: {\\n            //         type: 'debitcard',\\n            //         dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n            //         destCurrency: \\\"ETH\\\",\\n            //         sourceAmount: 10.0,\\n            //         paymentMethod: 'apple-pay'\\n            //     }\\n            // });\\n\\n\\n            widget.on(\\\"exit\\\", function (e) {\\n                console.log(\\\"exit\\\", e);\\n            })\\n\\n            widget.on(\\\"error\\\", function (e) {\\n                console.log(\\\"error\\\", e);\\n            })\\n\\n            widget.on(\\\"complete\\\", function (e) {\\n                console.log(\\\"complete\\\", e );\\n            });\\n\\n            widget.on('ready', function(e) {\\n                console.log(\\\"ready\\\", e );\\n                // widget.open();\\n            })\\n\\n            $('#buy').click(function(){\\n                console.log('open')\\n                widget.open();\\n            })\\n\\n        })(jQuery);\\n\\n\\n    </script>\\n</body>\\n</html>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nParameters 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    \"1-0\": \"`accountId`\",\n    \"1-1\": \"Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details\\n\\n**Required**\",\n    \"1-2\": \"You'll have a different ID in each Wyre environment\\n\\nExample: `\\\"AC-FD239aR29\\\"`\",\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  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Authorization\"\n}\n[/block]\nProvided in the widget initialization object via the `auth` parameter, this object tells the widget how to form a connection with a Wyre account. The following table describes the different types of objects you may provide:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`metamask`\",\n    \"0-1\": \"Support for any customer with [Metamask](https://metamask.io/) installed\\n\\n`auth: { type: \\\"metamask\\\" }`\",\n    \"h-0\": \"Type\",\n    \"h-1\": \"Description\",\n    \"1-0\": \"`secretKey`\",\n    \"1-1\": \"Secret key authorization uses a client-defined secret token to establish authentication. The token is intended to remain as a secret on the target device.\\n\\n[Parameter Details](doc:widget-api#section-secret-key-authentication)\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\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`: Users will go through full-featured, Wyre-branded debit card payment flow that's embedded in your web application. **Please note: you will need to white-list your app's URL with Wyre's partnership team before payments can be processed.**\\n\\n`debitcard-whitelabel`: Users will go through a completely white-label Debit Card payment processing flow.\",\n    \"1-0\": \"`destCurrency`\",\n    \"1-1\": \"Specifies the currency to present for purchase to the user\",\n    \"1-2\": \"**Required**\\n\\n`\\\"DAI\\\"` or `\\\"ETH\\\"` or `\\\"BTC\\\"`\",\n    \"2-0\": \"`dest`\",\n    \"2-1\": \"An ETH or BTC address based on the `destCurrency`\",\n    \"2-2\": \"**Optional**\\n\\nExample ETH Address: \\n`ethereum: \\\"0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\\\"`\\n\\nExample BTC Address:\\n`bitcoin: \\\"1MkMmko5WQVboafwLEGgtfT7Jxj6AEbK5S\\\"`\",\n    \"3-0\": \"`sourceAmount`\",\n    \"3-1\": \"The amount to withdrawal from the source, in units of sourceCurrency\",\n    \"3-2\": \"**Optional**\\n\\nDebit Cards - Limits TBD\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\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\": \"`ready`\",\n    \"1-0\": \"`exit`\",\n    \"2-0\": \"`complete`\",\n    \"0-1\": \"none\",\n    \"1-1\": \"string containing the error message\",\n    \"2-1\": \"`{ \\\"accountId\\\":\\\"AC_XXX\\\",`  \\n   `\\\"transferId\\\": \\\"xxxxxx\\\"}`\",\n    \"2-2\": \"This event is emitted after the user closes the widget and/or completes a transaction. The paymentMethodId is only fired once for a new user whenever they go through the first payment method signup process. The accountId and networkTxId are fired after each completed transaction.\",\n    \"1-2\": \"This event is emitted when the widget has closed for any reason. The user may have closed the window, or if there was an error this may be called. The error parameter will only be passed when the close is the result on an error.\",\n    \"0-2\": \"This event is emitted when the widget has initialized and is ready to be opened.\",\n    \"3-0\": \"`paymentSuccess`\",\n    \"3-1\": \"`{ paymentObject }`\",\n    \"3-2\": \"This event is emitted once a Wyre has initiated sending destCurrency to the user.\"\n  },\n  \"cols\": 3,\n  \"rows\": 4\n}\n[/block]\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/[transferId]/track`\n\n\n\n\n\n\n\n\n\n[block:api-header]\n{\n  \"title\": \"Wyre Widget Instantiation - Hosted Mode\"\n}\n[/block]\n\n\n\n\nWyre’s hosted Debit Card Widget is the simplest way to add fiat-to-crypto into your web or mobile application. Users can purchase up to $250.00 per day using Apple Pay and debit card entry.\n\nVisiting https://pay.sendwyre.com/ starts the checkout. To help your users pay quicker, you can pass in some or all of the following query parameters which will auto-fill into the purchase form.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Query Parameter\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`dest`\",\n    \"0-1\": \"An [SRN](doc:srns) which is where the funds will be sent after the completes\",\n    \"h-2\": \"Value\",\n    \"0-2\": \"`ethereum:0xYYYY`\\n`bitcoin:1xxxxx`\",\n    \"1-0\": \"`destCurrency`\",\n    \"1-1\": \"Specifies the currency to present for purchase to the user. This is present when a transfer is initiated.\",\n    \"1-2\": \"`ETH`, `BTC`, `DAI` or `USDC`\",\n    \"2-0\": \"`sourceAmount`\",\n    \"2-1\": \"Currency amount to purchase. \\n\\n`destAmount` is **no longer supported** in the hosted widget checkout.\",\n    \"2-2\": \"`0.5`\",\n    \"6-0\": \"`failureRedirectUrl`\",\n    \"6-1\": \"Url to get the user redirect in case order fails. You should handle error and display messages in your end when using this property.\\n\\n**Optional**\",\n    \"6-2\": \"\",\n    \"3-0\": \"`paymentMethod`\",\n    \"3-1\": \"The id of the payment method type you’d like the user to start off with.\",\n    \"3-2\": \"`apple-pay` or `debit-card`\",\n    \"4-0\": \"`redirectUrl`\",\n    \"4-1\": \"A url that the user will be sent to when they select any close button.\\n\\nThe following data will be passed to the redirectUrl as url query parameters: `transferId`, `orderId`, `accountId`, `dest`, `fees`, and `destAmount`\",\n    \"4-2\": \"(iOS) `myapp://`\\n(Web) `https://myapp.com/`\",\n    \"5-0\": \"`accountId`\",\n    \"5-1\": \"Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details\"\n  },\n  \"cols\": 3,\n  \"rows\": 7\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)\n\nHere is an example URL that uses URL parameters to help improve UX:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://pay.sendwyre.com/purchase?\\ndestCurrency=BTC&sourceAmount=10&\\ndest=18XZiNoVAKx4NbppwNCuxiLw9wvTc3qzf6&\\npaymentMethod=apple-pay&accountId=AC_DW6V9VLY6EJ\",\n      \"language\": \"text\",\n      \"name\": \"Example URL\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Wallet Order Webhook\"\n}\n[/block]\nRather than relying on `redirectUrl` for callbacks, this section covers how to receive wallet order webhook updates when Digital Wallet orders change status. \n\nPassing parameters in the Widget:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"https://pay.testwyre.com/purchase?dest=ethereum%3A0x98B031783d0efb1E65C4072C6576BaCa0736A912&destCurrency=ETH&sourceAmount=10&paymentMethod=apple-pay&referenceId=your_own_id&referrerAccountId=YOUR_ACCOUNT\",\n      \"language\": \"text\",\n      \"name\": \"Hosted Mode\"\n    },\n    {\n      \"code\": \"{\\n    accountId: \\\"YOUR_ACCOUNT\\\",\\n    referrerId: \\\"your_own_id\\\",\\n    type: \\\"debitcard\\\",\\n    dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n    destCurrency: \\\"ETH\\\",\\n    sourceAmount: 10.0,\\n    paymentMethod: 'apple-pay'\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Embedded Mode\"\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`referenceId`\",\n    \"0-1\": \"Your own internal reference id.\",\n    \"0-2\": \"String, optional\",\n    \"h-2\": \"Required\",\n    \"h-1\": \"Description\",\n    \"h-0\": \"Parameter\",\n    \"1-0\": \"`referrerAccountId`\",\n    \"1-1\": \"Your Wyre account id.\",\n    \"1-2\": \"String, required for the webhook to work.\"\n  },\n  \"cols\": 3,\n  \"rows\": 2\n}\n[/block]\nRegistering the Webhook (with OPS team)\n\nAsk the Wyre OPS team to register your webhook URL by providing them your `referrerAccountId`and the `url`.  This configuration is per environment. \n\nThe webhook will be called for any state change in orders which were submitted with an `referrerAccountId`\nthat has a webhook URL configured. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" \\n{\\n  \\\"referenceId\\\":\\\"your_reference_id\\\", // your own id passed in the order creation\\n   \\\"accountId\\\":\\\"AAAAAAAAAAA\\\", // your Wyre account id\\n   \\\"orderId\\\":\\\"WO_0000000001\\\", // the wallet order id\\n   \\\"orderStatus\\\":\\\"PROCESSING\\\", // the order status {PROCESSING, COMPLETE, FAILED}]\\n   \\\"transferId\\\":\\\"TF_000000001\\\", // OPTIONAL, available when order was completed,  the transfer id\\n   \\\"failedReason\\\":\\\" OPTIONAL,  some string with failed reason\\\" // if failed, there should be a reason string when possible\\n}\\n\",\n      \"language\": \"json\",\n      \"name\": \"Webhook response\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Supported Card Brands and Types\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"MasterCard\",\n    \"0-1\": \"Debit\",\n    \"1-0\": \"Visa\",\n    \"1-1\": \"Debit\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Go Live\"\n}\n[/block]\nBefore going live, you'll want to make sure that you:\n\n- Finalize your Partnership Agreement with Wyre\n- Create your production Wyre account and complete KYC\n- Configure the Widget for the `production` environment\n\nThat's it! You're now ready to accept confidently verified users into your application's ecosystem.","updates":[],"order":11,"isReference":true,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5d8e4d0a134f96001f19c0e0","project":"550f74bb6fc8130d0038aad3","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"],"_id":"550f75de61d9d30d00af9e01","__v":17,"releaseDate":"2015-03-23T02:09:34.221Z","project":"550f74bb6fc8130d0038aad3","createdAt":"2015-03-23T02:09:34.221Z","forked_from":"550f74bb6fc8130d0038aad6"},"category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Widget","slug":"wyre-sdk","order":1,"from_sync":false,"reference":true,"_id":"5bc63538e5a6ba000d22ee6d","project":"550f74bb6fc8130d0038aad3","version":"550f75de61d9d30d00af9e01","createdAt":"2018-10-16T19:00:08.331Z","__v":0},"user":"5c8fb57a338d71002afda886","createdAt":"2019-09-27T17:55:22.943Z","__v":0,"parentDoc":null}

The Wyre Debit Card Widget


[block:api-header] { "title": "Overview" } [/block] The JS widget may be deployed on a page within a traditional web application or on an embedded iOS/Android WebView. Bypassing configuration parameters to the widget in Javascript when you initialize it, you may control its behaviour and the resulting customer experience. As a partner developer, you will not have direct access to the customer's personal information. The underlying personal information is exposed only in response to demands made to Wyre lawfully (or, in some cases, in support of **security** authorization). **Apple pay will only work in hosted mode. * [block:api-header] { "title": "Wyre Widget Instantiation - Embedded Mode" } [/block] The Wyre Widget can be instantiated in two different ways: - A full-featured, Wyre-branded Debit Card payment processing flow as a popup - A full-featured, Wyre-branded Debit Card payment processing flow embedded in the window [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 operation: {\n type: 'debitcard',\n dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n destCurrency: \"ETH\",\n sourceAmount: 10.0,\n paymentMethod: 'apple-pay'\n }\n });\n\n // debit card embedded\n // var widget = new Wyre({\n // env: 'test',\n // operation: {\n // type: 'debitcard',\n // dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n // destCurrency: \"ETH\",\n // sourceAmount: 10.0,\n // paymentMethod: 'apple-pay'\n // }\n // });\n\n\n widget.on(\"exit\", function (e) {\n console.log(\"exit\", e);\n })\n\n widget.on(\"error\", function (e) {\n console.log(\"error\", e);\n })\n\n widget.on(\"complete\", function (e) {\n console.log(\"complete\", e );\n });\n\n widget.on('ready', function(e) {\n console.log(\"ready\", e );\n // widget.open();\n })\n\n $('#buy').click(function(){\n console.log('open')\n widget.open();\n })\n\n })(jQuery);\n\n\n </script>\n</body>\n</html>\n", "language": "html" } ] } [/block] 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)", "1-0": "`accountId`", "1-1": "Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details\n\n**Required**", "1-2": "You'll have a different ID in each Wyre environment\n\nExample: `\"AC-FD239aR29\"`", "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." }, "cols": 3, "rows": 4 } [/block] [block:api-header] { "title": "Authorization" } [/block] Provided in the widget initialization object via the `auth` parameter, this object tells the widget how to form a connection with a Wyre account. The following table describes the different types of objects you may provide: [block:parameters] { "data": { "0-0": "`metamask`", "0-1": "Support for any customer with [Metamask](https://metamask.io/) installed\n\n`auth: { type: \"metamask\" }`", "h-0": "Type", "h-1": "Description", "1-0": "`secretKey`", "1-1": "Secret key authorization uses a client-defined secret token to establish authentication. The token is intended to remain as a secret on the target device.\n\n[Parameter Details](doc:widget-api#section-secret-key-authentication)" }, "cols": 2, "rows": 2 } [/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`: Users will go through full-featured, Wyre-branded debit card payment flow that's embedded in your web application. **Please note: you will need to white-list your app's URL with Wyre's partnership team before payments can be processed.**\n\n`debitcard-whitelabel`: Users will go through a completely white-label Debit Card payment processing flow.", "1-0": "`destCurrency`", "1-1": "Specifies the currency to present for purchase to the user", "1-2": "**Required**\n\n`\"DAI\"` or `\"ETH\"` or `\"BTC\"`", "2-0": "`dest`", "2-1": "An ETH or BTC address based on the `destCurrency`", "2-2": "**Optional**\n\nExample ETH Address: \n`ethereum: \"0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\"`\n\nExample BTC Address:\n`bitcoin: \"1MkMmko5WQVboafwLEGgtfT7Jxj6AEbK5S\"`", "3-0": "`sourceAmount`", "3-1": "The amount to withdrawal from the source, in units of sourceCurrency", "3-2": "**Optional**\n\nDebit Cards - Limits TBD" }, "cols": 3, "rows": 4 } [/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": "`ready`", "1-0": "`exit`", "2-0": "`complete`", "0-1": "none", "1-1": "string containing the error message", "2-1": "`{ \"accountId\":\"AC_XXX\",` \n `\"transferId\": \"xxxxxx\"}`", "2-2": "This event is emitted after the user closes the widget and/or completes a transaction. The paymentMethodId is only fired once for a new user whenever they go through the first payment method signup process. The accountId and networkTxId are fired after each completed transaction.", "1-2": "This event is emitted when the widget has closed for any reason. The user may have closed the window, or if there was an error this may be called. The error parameter will only be passed when the close is the result on an error.", "0-2": "This event is emitted when the widget has initialized and is ready to be opened.", "3-0": "`paymentSuccess`", "3-1": "`{ paymentObject }`", "3-2": "This event is emitted once a Wyre has initiated sending destCurrency to the user." }, "cols": 3, "rows": 4 } [/block] 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/[transferId]/track` [block:api-header] { "title": "Wyre Widget Instantiation - Hosted Mode" } [/block] Wyre’s hosted Debit Card Widget is the simplest way to add fiat-to-crypto into your web or mobile application. Users can purchase up to $250.00 per day using Apple Pay and debit card entry. Visiting https://pay.sendwyre.com/ starts the checkout. To help your users pay quicker, you can pass in some or all of the following query parameters which will auto-fill into the purchase form. [block:parameters] { "data": { "h-0": "Query Parameter", "h-1": "Description", "0-0": "`dest`", "0-1": "An [SRN](doc:srns) which is where the funds will be sent after the completes", "h-2": "Value", "0-2": "`ethereum:0xYYYY`\n`bitcoin:1xxxxx`", "1-0": "`destCurrency`", "1-1": "Specifies the currency to present for purchase to the user. This is present when a transfer is initiated.", "1-2": "`ETH`, `BTC`, `DAI` or `USDC`", "2-0": "`sourceAmount`", "2-1": "Currency amount to purchase. \n\n`destAmount` is **no longer supported** in the hosted widget checkout.", "2-2": "`0.5`", "6-0": "`failureRedirectUrl`", "6-1": "Url to get the user redirect in case order fails. You should handle error and display messages in your end when using this property.\n\n**Optional**", "6-2": "", "3-0": "`paymentMethod`", "3-1": "The id of the payment method type you’d like the user to start off with.", "3-2": "`apple-pay` or `debit-card`", "4-0": "`redirectUrl`", "4-1": "A url that the user will be sent to when they select any close button.\n\nThe following data will be passed to the redirectUrl as url query parameters: `transferId`, `orderId`, `accountId`, `dest`, `fees`, and `destAmount`", "4-2": "(iOS) `myapp://`\n(Web) `https://myapp.com/`", "5-0": "`accountId`", "5-1": "Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details" }, "cols": 3, "rows": 7 } [/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) Here is an example URL that uses URL parameters to help improve UX: [block:code] { "codes": [ { "code": "https://pay.sendwyre.com/purchase?\ndestCurrency=BTC&sourceAmount=10&\ndest=18XZiNoVAKx4NbppwNCuxiLw9wvTc3qzf6&\npaymentMethod=apple-pay&accountId=AC_DW6V9VLY6EJ", "language": "text", "name": "Example URL" } ] } [/block] [block:api-header] { "title": "Wallet Order Webhook" } [/block] Rather than relying on `redirectUrl` for callbacks, this section covers how to receive wallet order webhook updates when Digital Wallet orders change status. Passing parameters in the Widget: [block:code] { "codes": [ { "code": "https://pay.testwyre.com/purchase?dest=ethereum%3A0x98B031783d0efb1E65C4072C6576BaCa0736A912&destCurrency=ETH&sourceAmount=10&paymentMethod=apple-pay&referenceId=your_own_id&referrerAccountId=YOUR_ACCOUNT", "language": "text", "name": "Hosted Mode" }, { "code": "{\n accountId: \"YOUR_ACCOUNT\",\n referrerId: \"your_own_id\",\n type: \"debitcard\",\n dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n destCurrency: \"ETH\",\n sourceAmount: 10.0,\n paymentMethod: 'apple-pay'\n}", "language": "json", "name": "Embedded Mode" } ] } [/block] [block:parameters] { "data": { "0-0": "`referenceId`", "0-1": "Your own internal reference id.", "0-2": "String, optional", "h-2": "Required", "h-1": "Description", "h-0": "Parameter", "1-0": "`referrerAccountId`", "1-1": "Your Wyre account id.", "1-2": "String, required for the webhook to work." }, "cols": 3, "rows": 2 } [/block] Registering the Webhook (with OPS team) Ask the Wyre OPS team to register your webhook URL by providing them your `referrerAccountId`and the `url`. This configuration is per environment. The webhook will be called for any state change in orders which were submitted with an `referrerAccountId` that has a webhook URL configured. [block:code] { "codes": [ { "code": " \n{\n \"referenceId\":\"your_reference_id\", // your own id passed in the order creation\n \"accountId\":\"AAAAAAAAAAA\", // your Wyre account id\n \"orderId\":\"WO_0000000001\", // the wallet order id\n \"orderStatus\":\"PROCESSING\", // the order status {PROCESSING, COMPLETE, FAILED}]\n \"transferId\":\"TF_000000001\", // OPTIONAL, available when order was completed, the transfer id\n \"failedReason\":\" OPTIONAL, some string with failed reason\" // if failed, there should be a reason string when possible\n}\n", "language": "json", "name": "Webhook response" } ] } [/block] [block:api-header] { "title": "Supported Card Brands and Types" } [/block] [block:parameters] { "data": { "0-0": "MasterCard", "0-1": "Debit", "1-0": "Visa", "1-1": "Debit" }, "cols": 2, "rows": 2 } [/block] [block:api-header] { "title": "Go Live" } [/block] Before going live, you'll want to make sure that you: - Finalize your Partnership Agreement with Wyre - Create your production Wyre account and complete KYC - Configure the Widget for the `production` environment That's it! You're now ready to accept confidently verified users into your application's ecosystem.