{"_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,"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-12-05T18:55:55.434Z","link_external":false,"link_url":"","sync_unique":"","hidden":true,"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 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 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\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, MetaMask, 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. This will vary depending on your payment method used. ACH will require more information than a debit card flow.\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. When using a production account, you'll need to pass in real KYC information.\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\": \"ACH vs Debit Card Transactions\"\n}\n[/block]\nThere are two ways to provide onramps for users using the widget. You have the option of providing users with an ACH process payment flow or a Debit Card process payment flow. If you choose to use the ACH flow, please read this [article](https://support.sendwyre.com/transfers/ach-transfers) on general information about ACH and its limitations. If you choose to use the debit card flow, please read this [article](https://docs.google.com/document/d/15qkZ4ESbGpzl3fExHvB0GCmNOJFRlLl6wf8_swHrTLA/edit) about general debit card information and its limitations. We currently only support US users for debit card payments.\n\n**Caveats** You can only use either and ACH or Debit Card widget in production. We are currently working on merging these two features into one by the end of the 2019 year.\n\n**ACH Transfers**\nWe currently use [Plaid](https://www.plaid.com) to connect to bank accounts to fund the Ethereum wallet via ACH transfer. In the test environment, the user can select any bank vendor. For username, type in `user_good` and for password, type in `pass_good` which are the Plaid test credentials\n\n**Debit Card Transfers**\nFor testing, when presented with adding a verification number for the phone number, type in 12345 as the code. Emails will be sent and need to be verified. For test accounts, please use these values to test a debit card flow transaction.\n\nAddress:\n101 Mission Street, (**No suite number**)\nSan Francisco, CA 94105\n\nTest Debit Card number:\nCard: 9401113999999995\nExp: 10/2020\n[block:api-header]\n{\n  \"title\": \"Metamask On-Ramp using Debit Card\"\n}\n[/block]\nFor our first example, we'll show the widget being used as a customer on-ramp for ETH using debit card as a payment. We'll require the customer use Metamask to authenticate. After sign-in, they will proceed through our KYC process, link their debit card, use that debit card 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\\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: \\\"debitcard\\\",\\n          dest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n          sourceCurrency: \\\"USD\\\",\\n          destCurrency: \\\"ETH\\\",\\n          sourceAmount: 10.0\\n        }\\n      });\\n\\n      // open the widget when the user presses the button\\n      document\\n        .getElementById(\\\"verifyButton\\\")\\n        .addEventListener(\\\"click\\\", function(e) {\\n          widget.open();\\n        });\\n     \\n      //add events here\\n      widget.on(\\\"complete\\\", function(event) {\\n        console.log('Completed', event);\\n      });\\n    </script>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Metamask On-Ramp using ACH\"\n}\n[/block]\nFor our second example, we'll show the widget being used as a customer on-ramp for ETH using ACH as a payment processor. 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          dest: \\\"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\\\",\\n          sourceAmount: 10.0\\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      //add on completed events here\\n      widget.on(\\\"complete\\\", function(event) {\\n        console.log(\\\"Completed\\\", event);\\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 using Debit Card\"\n}\n[/block]\nHere is a an example of our widget being used as a customer on-ramp for ETH using Debit Card payment and Device Token authentication, 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, use that debit card to purchase ETH, and finally transmit that ETH to a blockchain address supplied to the widget configuration.\n\n(Again, be sure to to replace `\"YOUR_WYRE_ACCOUNT_ID\"`!)\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  <head>\\n    <title>Verify with Wyre</title>\\n  </head>\\n  <body>\\n    <button id=\\\"verify-button\\\" class=\\\"btn btn-primary mt-5\\\">\\n      Verify with Wyre\\n    </button>\\n\\n    <script src=\\\"https://verify.sendwyre.com/js/widget-loader.js\\\"></script>\\n    <script type=\\\"text/javascript\\\">\\n      (function() {\\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\\n            .call(array, x => (\\\"00\\\" + x.toString(16)).slice(-2))\\n            .join(\\\"\\\");\\n          localStorage.setItem(\\\"DEVICE_TOKEN\\\", deviceToken);\\n        }\\n\\n        var widget = new Wyre.Widget({\\n          env: \\\"test\\\",\\n          accountId: \\\"AC_YNWFWXDW3AG\\\",\\n          auth: {\\n            type: \\\"secretKey\\\",\\n            secretKey: deviceToken\\n          },\\n          operation: {\\n          \\ttype: \\\"debitcard\\\",\\n          \\tdest: \\\"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\\\",\\n          \\tsourceCurrency: \\\"USD\\\",\\n          \\tdestCurrency: \\\"ETH\\\",\\n          \\tsourceAmount: 10.0\\n          }\\n        });\\n\\n        widget.on(\\\"close\\\", function(e) {\\n          // the widget closed before completing the process\\n\\n          if (e.error) {\\n            console.log(\\\"there was a problem: \\\", e.error);\\n          } else {\\n            console.log(\\\"the customer closed the widget\\\");\\n          }\\n        });\\n\\n        widget.on(\\\"complete\\\", function(event) {\\n          // onboarding was completed successfully!\\n          console.log(\\\"Completed\\\", event);\\n        });\\n\\n        document\\n          .getElementById(\\\"verify-button\\\")\\n          .addEventListener(\\\"click\\\", function(e) {\\n            widget.open();\\n          });\\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 using ACH\"\n}\n[/block]\nHere is a similar example of our widget being used as a customer on-ramp, again for ETH and ACH as a payment processor, 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          sourceAmount: 10.0\\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      //add events here\\n      widget.on(\\\"complete\\\", function(event) {\\n        console.log(\\\"Completed\\\", event);\\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 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 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). 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, MetaMask, 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. This will vary depending on your payment method used. ACH will require more information than a debit card flow. **[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. When using a production account, you'll need to pass in real KYC information. 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": "ACH vs Debit Card Transactions" } [/block] There are two ways to provide onramps for users using the widget. You have the option of providing users with an ACH process payment flow or a Debit Card process payment flow. If you choose to use the ACH flow, please read this [article](https://support.sendwyre.com/transfers/ach-transfers) on general information about ACH and its limitations. If you choose to use the debit card flow, please read this [article](https://docs.google.com/document/d/15qkZ4ESbGpzl3fExHvB0GCmNOJFRlLl6wf8_swHrTLA/edit) about general debit card information and its limitations. We currently only support US users for debit card payments. **Caveats** You can only use either and ACH or Debit Card widget in production. We are currently working on merging these two features into one by the end of the 2019 year. **ACH Transfers** We currently use [Plaid](https://www.plaid.com) to connect to bank accounts to fund the Ethereum wallet via ACH transfer. In the test environment, the user can select any bank vendor. For username, type in `user_good` and for password, type in `pass_good` which are the Plaid test credentials **Debit Card Transfers** For testing, when presented with adding a verification number for the phone number, type in 12345 as the code. Emails will be sent and need to be verified. For test accounts, please use these values to test a debit card flow transaction. Address: 101 Mission Street, (**No suite number**) San Francisco, CA 94105 Test Debit Card number: Card: 9401113999999995 Exp: 10/2020 [block:api-header] { "title": "Metamask On-Ramp using Debit Card" } [/block] For our first example, we'll show the widget being used as a customer on-ramp for ETH using debit card as a payment. We'll require the customer use Metamask to authenticate. After sign-in, they will proceed through our KYC process, link their debit card, use that debit card 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\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: \"debitcard\",\n dest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n sourceCurrency: \"USD\",\n destCurrency: \"ETH\",\n sourceAmount: 10.0\n }\n });\n\n // open the widget when the user presses the button\n document\n .getElementById(\"verifyButton\")\n .addEventListener(\"click\", function(e) {\n widget.open();\n });\n \n //add events here\n widget.on(\"complete\", function(event) {\n console.log('Completed', event);\n });\n </script>\n </body>\n</html>", "language": "html" } ] } [/block] [block:api-header] { "title": "Metamask On-Ramp using ACH" } [/block] For our second example, we'll show the widget being used as a customer on-ramp for ETH using ACH as a payment processor. 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 dest: \"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\",\n sourceAmount: 10.0\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 //add on completed events here\n widget.on(\"complete\", function(event) {\n console.log(\"Completed\", event);\n });\n </script>\n </body>\n</html>", "language": "html" } ] } [/block] [block:api-header] { "title": "Device Token On-Ramp using Debit Card" } [/block] Here is a an example of our widget being used as a customer on-ramp for ETH using Debit Card payment and Device Token authentication, 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, use that debit card to purchase ETH, and finally transmit that ETH to a blockchain address supplied to the widget configuration. (Again, be sure to to replace `"YOUR_WYRE_ACCOUNT_ID"`!) [block:code] { "codes": [ { "code": "<html>\n <head>\n <title>Verify with Wyre</title>\n </head>\n <body>\n <button id=\"verify-button\" class=\"btn btn-primary mt-5\">\n Verify with Wyre\n </button>\n\n <script src=\"https://verify.sendwyre.com/js/widget-loader.js\"></script>\n <script type=\"text/javascript\">\n (function() {\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\n .call(array, x => (\"00\" + x.toString(16)).slice(-2))\n .join(\"\");\n localStorage.setItem(\"DEVICE_TOKEN\", deviceToken);\n }\n\n var widget = new Wyre.Widget({\n env: \"test\",\n accountId: \"AC_YNWFWXDW3AG\",\n auth: {\n type: \"secretKey\",\n secretKey: deviceToken\n },\n operation: {\n \ttype: \"debitcard\",\n \tdest: \"ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912\",\n \tsourceCurrency: \"USD\",\n \tdestCurrency: \"ETH\",\n \tsourceAmount: 10.0\n }\n });\n\n widget.on(\"close\", function(e) {\n // the widget closed before completing the process\n\n if (e.error) {\n console.log(\"there was a problem: \", e.error);\n } else {\n console.log(\"the customer closed the widget\");\n }\n });\n\n widget.on(\"complete\", function(event) {\n // onboarding was completed successfully!\n console.log(\"Completed\", event);\n });\n\n document\n .getElementById(\"verify-button\")\n .addEventListener(\"click\", function(e) {\n widget.open();\n });\n })();\n </script>\n </body>\n</html>", "language": "html" } ] } [/block] [block:api-header] { "title": "Device Token On-Ramp using ACH" } [/block] Here is a similar example of our widget being used as a customer on-ramp, again for ETH and ACH as a payment processor, 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 sourceAmount: 10.0\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 //add events here\n widget.on(\"complete\", function(event) {\n console.log(\"Completed\", event);\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