{"_id":"5d8e4d0a134f96001f19c0e0","project":"550f74bb6fc8130d0038aad3","version":{"_id":"550f75de61d9d30d00af9e01","__v":17,"project":"550f74bb6fc8130d0038aad3","forked_from":"550f74bb6fc8130d0038aad6","createdAt":"2015-03-23T02:09:34.221Z","releaseDate":"2015-03-23T02:09:34.221Z","categories":["550f75de61d9d30d00af9e02","551027e38579861900a86698","551029e08579861900a8669a","551029e7498062190006328a","5bc633a722d682005c9ad9e4","5bc633b08c4b0b000d6a7eaa","5bc633b48f3ff600626e3e18","5bc63538e5a6ba000d22ee6d","5bc63587a18a6b000decd295","5bc635c0937fcb0056223d9c","5bc6360f42f41800319aeaa6","5be5d13ff1d319002baca9ce","5be5d2287cd14d00291fbfdb","5be8b3b09f7cb70023c56a39","5be8b3cbb910100044e20206","5c1d769a4f6aed001fe527f0","5c402942010f0d001496dded"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"3.0.0","version":"3"},"category":{"_id":"5bc63538e5a6ba000d22ee6d","project":"550f74bb6fc8130d0038aad3","version":"550f75de61d9d30d00af9e01","__v":0,"sync":{"url":"","isSync":false},"reference":true,"createdAt":"2018-10-16T19:00:08.331Z","from_sync":false,"order":1,"slug":"wyre-sdk","title":"Widget"},"user":"5c8fb57a338d71002afda886","__v":0,"parentDoc":null,"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2019-09-27T17:55:22.943Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":true,"order":11,"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. By passing configuration parameters to the widget in Javascript when you initialize it, you may control its behavior 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[block:api-header]\n{\n  \"title\": \"Wyre Widget Instantiation\"\n}\n[/block]\nThe Wyre Widget can be instantiated in three 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- A full-featured, Wyre-branded ACH payment processing flow\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-hosted-dialog',\\n                    dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n                    destCurrency: \\\"ETH\\\",\\n                    sourceAmount: 10.0,\\n                    paymentMethod: 'google-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: 'google-pay'\\n            //     }\\n            // });\\n\\n            // ach\\n            // var widget = new Wyre({\\n            //     env: 'test',\\n            //     auth: {\\n            //         type: 'metamask'\\n            //     },\\n            //     operation: {\\n            //         type: 'onramp',\\n            //         dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n            //         destCurrency: \\\"ETH\\\",\\n            //         sourceAmount: 10.0\\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]\n\n[block:api-header]\n{\n  \"title\": \"Widget Instantiation\"\n}\n[/block]\n\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\\\": \\\"debitcard\\\",\\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\\n`onramp`: Users will go through a Wyre-branded KYC and ACH payment processing flow for a specific type of currency. The resulting purchased balanced can be sent to a blockchain address or a Wyre account. [details](doc:widget-api#section-onramp)\",\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\\nACH - Limits TBD\\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[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.","excerpt":"","slug":"widget-api-2","type":"basic","title":"JS 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. By passing configuration parameters to the widget in Javascript when you initialize it, you may control its behavior 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). [block:api-header] { "title": "Wyre Widget Instantiation" } [/block] The Wyre Widget can be instantiated in three 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 - A full-featured, Wyre-branded ACH payment processing flow [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-hosted-dialog',\n dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n destCurrency: \"ETH\",\n sourceAmount: 10.0,\n paymentMethod: 'google-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: 'google-pay'\n // }\n // });\n\n // ach\n // var widget = new Wyre({\n // env: 'test',\n // auth: {\n // type: 'metamask'\n // },\n // operation: {\n // type: 'onramp',\n // dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n // destCurrency: \"ETH\",\n // sourceAmount: 10.0\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] [block:api-header] { "title": "Widget Instantiation" } [/block] [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\": \"debitcard\",\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.\n\n`onramp`: Users will go through a Wyre-branded KYC and ACH payment processing flow for a specific type of currency. The resulting purchased balanced can be sent to a blockchain address or a Wyre account. [details](doc:widget-api#section-onramp)", "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\nACH - Limits TBD\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": "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.