{"_id":"5c081f3b6abf5903015707ca","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":"54eb8076867e1917009b7160","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-12-05T18:55:55.434Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"apiSetting":null,"auth":"required","params":[],"url":""},"isReference":true,"order":1,"body":"[block:api-header]\n{\n  \"title\": \"Overview\"\n}\n[/block]\nThe Wyre Widget allows you to quickly deploy a stylized KYC/AML widget to your web-supporting application. This involves prompting the customer for their name and address, banking information, uploading any necessary documentation (such as passports scans or video authorizations). The result is a private, secure profile the customer may use to prove their compliance status and gain access to gated services.\n\nAs a partner developer, you will not in general have direct access to the customer's personal information. You instead receive a guarantee of a specifically-compliant identity from Wyre. 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\nThe widget may be deployed on a page within your dApp, one within a traditional web application, in an embedded iOS WebView, or any other modern web engine view. By passing configuration parameters to the widget in Javascript when you initialize it, you may control its behavior and the resulting customer experience.\n\nIts operation has **three distinct phases**:\n\n**[Authorization](doc:widget-api#authorization)**: Allow the customer to form a secure session with Wyre. This might be done through a wallet browser extension or device-held secret key. You have control over the scheme used.\n\n**[Compliance On-Boarding](doc:widget-api#compliance-on-boarding)**: Request information from the customer in order to meet some specific level of compliance for a particular country. Once the requirements are met, a YES compliance token may also be issued.\n\n**[User Operation](doc:widget-api#operation)**: The flow presented to the user after on-boarding is complete. Presently, only `\"onramp\"` is available, which enables the user to withdraw fiat funds from a bank account, convert them into a specific target currency, and finally transfer them to a blockchain address or Wyre account.\n\nOnce the widget has concluded, it provides hooks to let you know it's complete, and why. It may close preemptively due to error, or because the user closed it. When it completes successfully, you may proceed with the assurance that Wyre knows the customer and holds evidence to prove it.\n\nPlease see [Widget API](doc:widget-api) for the full documentation.\n[block:api-header]\n{\n  \"title\": \"Preparation\"\n}\n[/block]\nBefore attempting to integrate, you'll need to create an account in Wyre's testing environment. Head on over to [testwyre.com](https://www.testwyre.com) to create it to start this process. You may enter dummy information for all required fields, including email, password, address, name, etc. Some validation is still active so single-letter names and bogus addresses may still be rejected. You may upload any image for document upload prompts.\n\nAfter a short time, your account should automatically transition to `APPROVED`. (If it does not, please contact support) Once this happens, return to the widget to see you now have access to fund your account!\n[block:api-header]\n{\n  \"title\": \"Metamask On-Ramp Quickstart\"\n}\n[/block]\nFor our first example, we'll show the widget being used as a customer on-ramp for ETH. We'll require the customer use Metamask to authenticate. After sign-in, they will proceed through our KYC process, link their bank account, use that bank account to purchase ETH, and finally transmit that ETH to their Metamask wallet.\n\nThis example uses our `\"test\"` environment over at [testwyre.com](https://www.testwyre.com). Check out the [Widget API](doc:widget-api) documentation for more details.\n\nJust replace `\"YOUR_WYRE_ACCOUNT_ID\"` with your actual (test) Wyre account ID and give it a try!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <body>\\n    <button id=\\\"verifyButton\\\">Verify with Wyre!</button>\\n   \\t\\n    <!-- Install the Wyre Loader -->\\n    <script src=\\\"https://verify.sendwyre.com/js/widget-loader.js\\\"></script>\\n    <script>\\n      // configure the widget for metamask authentication\\n      var widget = new Wyre.Widget({\\n        env: \\\"test\\\",\\n        accountId: \\\"YOUR_WYRE_ACCOUNT_ID\\\",\\n        auth: { type: \\\"metamask\\\" },\\n        operation: {\\n          type: \\\"onramp\\\",\\n          destCurrency: \\\"ETH\\\"\\n        }\\n      });\\n      \\n      // open the widget when the user presses the button\\n\\t\\t\\tdocument\\n        .getElementById(\\\"verifyButton\\\")\\n        .addEventListener('click', function(e) { widget.open(); });\\n      \\n    </script>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Device Token On-Ramp Quickstart\"\n}\n[/block]\nHere is a similar example of our widget being used as a customer on-ramp, again for ETH, except this bypassing the need for Metamask. Instead, it uses a random token stored in the browser.\n\nThis enables the customer to proceed through KYC, link a bank account, use that bank account to purchase ETH, and finally transmit that ETH to a blockchain address supplied to the widget configuration. (In this case, if the destination was not supplied in the init object, the user would be prompted to paste in a blockchain address).\n\n(Again, be sure to to replace `\"YOUR_WYRE_ACCOUNT_ID\"`!)\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <body>\\n    <button id=\\\"verifyButton\\\">Verify with Wyre!</button>\\n   \\t\\n    <!-- Install the Wyre Loader -->\\n    <script src=\\\"https://verify.sendwyre.com/js/widget-loader.js\\\"></script>\\n    <script>\\n      // generate a device token if it hasn't been already\\n      var deviceToken = localStorage.getItem(\\\"DEVICE_TOKEN\\\");\\n      if(!deviceToken) {\\n        var array = new Uint8Array(25);\\n        window.crypto.getRandomValues(array);\\n        deviceToken = Array.prototype.map.call(array, x => (\\\"00\\\" + x.toString(16)).slice(-2)).join('');\\n        localStorage.setItem(\\\"DEVICE_TOKEN\\\", deviceToken);\\n      }\\n      \\n      // configure the widget to authenticate using the generated key\\n      var widget = new Wyre.Widget({\\n        env: \\\"test\\\",\\n        accountId: \\\"YOUR_WYRE_ACCOUNT_ID\\\",\\n        auth: { \\n          type: \\\"secretKey\\\",\\n          secretKey: deviceToken\\n        },\\n        operation: {\\n          type: \\\"onramp\\\",\\n          destCurrency: \\\"ETH\\\",\\n          dest: \\\"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\\\"\\n        }\\n      });\\n      \\n      // open the widget when the user presses the button\\n\\t\\t\\tdocument\\n        .getElementById(\\\"verifyButton\\\")\\n        .addEventListener('click', function(e) { widget.open(); });\\n      \\n    </script>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\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.\n[block:api-header]\n{\n  \"title\": \"Next Steps\"\n}\n[/block]\n- Check out the full [Widget API](doc:widget-api) to see the full range of functionality of the widget\n- Login to the Wyre Dashboard to create API keys, see transaction history, and otherwise manage your account\n- Look to the Wyre API for the larger ecosystem of flexible technology that we power","excerpt":"Full customer on-boarding with minimal coding","slug":"widget-developer-guide","type":"basic","title":"Widget Developer Guide"}

Widget Developer Guide

Full customer on-boarding with minimal coding

[block:api-header] { "title": "Overview" } [/block] The Wyre Widget allows you to quickly deploy a stylized KYC/AML widget to your web-supporting application. This involves prompting the customer for their name and address, banking information, uploading any necessary documentation (such as passports scans or video authorizations). The result is a private, secure profile the customer may use to prove their compliance status and gain access to gated services. As a partner developer, you will not in general have direct access to the customer's personal information. You instead receive a guarantee of a specifically-compliant identity from Wyre. The underlying personal information is exposed only in response to demands made to Wyre lawfully (or, in some cases, in support of security authorization). The widget may be deployed on a page within your dApp, one within a traditional web application, in an embedded iOS WebView, or any other modern web engine view. By passing configuration parameters to the widget in Javascript when you initialize it, you may control its behavior and the resulting customer experience. Its operation has **three distinct phases**: **[Authorization](doc:widget-api#authorization)**: Allow the customer to form a secure session with Wyre. This might be done through a wallet browser extension or device-held secret key. You have control over the scheme used. **[Compliance On-Boarding](doc:widget-api#compliance-on-boarding)**: Request information from the customer in order to meet some specific level of compliance for a particular country. Once the requirements are met, a YES compliance token may also be issued. **[User Operation](doc:widget-api#operation)**: The flow presented to the user after on-boarding is complete. Presently, only `"onramp"` is available, which enables the user to withdraw fiat funds from a bank account, convert them into a specific target currency, and finally transfer them to a blockchain address or Wyre account. Once the widget has concluded, it provides hooks to let you know it's complete, and why. It may close preemptively due to error, or because the user closed it. When it completes successfully, you may proceed with the assurance that Wyre knows the customer and holds evidence to prove it. Please see [Widget API](doc:widget-api) for the full documentation. [block:api-header] { "title": "Preparation" } [/block] Before attempting to integrate, you'll need to create an account in Wyre's testing environment. Head on over to [testwyre.com](https://www.testwyre.com) to create it to start this process. You may enter dummy information for all required fields, including email, password, address, name, etc. Some validation is still active so single-letter names and bogus addresses may still be rejected. You may upload any image for document upload prompts. After a short time, your account should automatically transition to `APPROVED`. (If it does not, please contact support) Once this happens, return to the widget to see you now have access to fund your account! [block:api-header] { "title": "Metamask On-Ramp Quickstart" } [/block] For our first example, we'll show the widget being used as a customer on-ramp for ETH. We'll require the customer use Metamask to authenticate. After sign-in, they will proceed through our KYC process, link their bank account, use that bank account to purchase ETH, and finally transmit that ETH to their Metamask wallet. This example uses our `"test"` environment over at [testwyre.com](https://www.testwyre.com). Check out the [Widget API](doc:widget-api) documentation for more details. Just replace `"YOUR_WYRE_ACCOUNT_ID"` with your actual (test) Wyre account ID and give it a try! [block:code] { "codes": [ { "code": "<html>\n <body>\n <button id=\"verifyButton\">Verify with Wyre!</button>\n \t\n <!-- Install the Wyre Loader -->\n <script src=\"https://verify.sendwyre.com/js/widget-loader.js\"></script>\n <script>\n // configure the widget for metamask authentication\n var widget = new Wyre.Widget({\n env: \"test\",\n accountId: \"YOUR_WYRE_ACCOUNT_ID\",\n auth: { type: \"metamask\" },\n operation: {\n type: \"onramp\",\n destCurrency: \"ETH\"\n }\n });\n \n // open the widget when the user presses the button\n\t\t\tdocument\n .getElementById(\"verifyButton\")\n .addEventListener('click', function(e) { widget.open(); });\n \n </script>\n </body>\n</html>", "language": "html" } ] } [/block] [block:api-header] { "title": "Device Token On-Ramp Quickstart" } [/block] Here is a similar example of our widget being used as a customer on-ramp, again for ETH, except this bypassing the need for Metamask. Instead, it uses a random token stored in the browser. This enables the customer to proceed through KYC, link a bank account, use that bank account to purchase ETH, and finally transmit that ETH to a blockchain address supplied to the widget configuration. (In this case, if the destination was not supplied in the init object, the user would be prompted to paste in a blockchain address). (Again, be sure to to replace `"YOUR_WYRE_ACCOUNT_ID"`!) [block:code] { "codes": [ { "code": "<html>\n <body>\n <button id=\"verifyButton\">Verify with Wyre!</button>\n \t\n <!-- Install the Wyre Loader -->\n <script src=\"https://verify.sendwyre.com/js/widget-loader.js\"></script>\n <script>\n // generate a device token if it hasn't been already\n var deviceToken = localStorage.getItem(\"DEVICE_TOKEN\");\n if(!deviceToken) {\n var array = new Uint8Array(25);\n window.crypto.getRandomValues(array);\n deviceToken = Array.prototype.map.call(array, x => (\"00\" + x.toString(16)).slice(-2)).join('');\n localStorage.setItem(\"DEVICE_TOKEN\", deviceToken);\n }\n \n // configure the widget to authenticate using the generated key\n var widget = new Wyre.Widget({\n env: \"test\",\n accountId: \"YOUR_WYRE_ACCOUNT_ID\",\n auth: { \n type: \"secretKey\",\n secretKey: deviceToken\n },\n operation: {\n type: \"onramp\",\n destCurrency: \"ETH\",\n dest: \"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\"\n }\n });\n \n // open the widget when the user presses the button\n\t\t\tdocument\n .getElementById(\"verifyButton\")\n .addEventListener('click', function(e) { widget.open(); });\n \n </script>\n </body>\n</html>", "language": "html" } ] } [/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. [block:api-header] { "title": "Next Steps" } [/block] - Check out the full [Widget API](doc:widget-api) to see the full range of functionality of the widget - Login to the Wyre Dashboard to create API keys, see transaction history, and otherwise manage your account - Look to the Wyre API for the larger ecosystem of flexible technology that we power