{"_id":"5ccb7d1ab550680050f7d1d3","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":"5c9277494aa821001ae4edb5","__v":0,"parentDoc":null,"metadata":{"title":"","description":"","image":[]},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2019-05-02T23:28:26.966Z","link_external":false,"link_url":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":true,"order":3,"body":"The hosted widget page will allow partners to push their users to a Wyre-hosted web page as an alternative way to integrate with the Wyre widget. \n[block:api-header]\n{\n  \"title\": \"Hosted Wyre Widget\"\n}\n[/block]\nA page will be located at `https://verify.sendwyre.com/widget/v1/` whose sole purpose is to serve as a container for the widget. The hosted widget is the Wyre widget hosted on a Wyre URL.\n\n**Authentication**: Allow the customer to form a secure session with Wyre. This might be done through a wallet browser extension, `metamask`, or using a `secretKey`. You have control over the scheme used. More information [here](https://docs.sendwyre.com/v3/docs/widget-api#authorization). If `secretKey` is designated as an authentication mechanism, Wyre will generate the secret key and store is in the browser's localStorage. \n\n**Compliance On-Boarding**: Request information from the customer in order to meet some specific level of compliance for the `debitcard` KYC onboarding and transaction flow. Currently, the Hosted Widget only accepts `debitcard` as the payment user operation.\n\n**Caveats**\nThis hosted Wyre widget currently only supports `metamask` or `secretKey` authentication, `debitcard` as a payment option, `USD` as a payment source and `ETH` as a destination currency.\n\n**Layout**\nThe view will look like the following on desktop and mobile, respectively: \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5effafa-Screen_Shot_2019-05-02_at_3.58.59_PM.png\",\n        \"Screen Shot 2019-05-02 at 3.58.59 PM.png\",\n        489,\n        197,\n        \"#f5f5f7\"\n      ],\n      \"caption\": \"Layout views for desktop and mobile.\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Example URL\"\n}\n[/block]\nHere's an example URL you would send users to after a button click or your d/applications specific logic to send users to a Wyre hosted widget. This example uses `metamask` as the authentication mechanism. \n\n`https://verify.testwyre.com/widget/v1?env=test&operation=debitcard&accountId=AC_1234`\n`&authType=metamask&destCurrency=ETH&sourceCurrency=USD&sourceAmount=0.01`\n`&dest=ethereum:0x4f5d52710C8C3E23e4c44f678868d23Aa2a49B37`\n`&redirectUrl=https://sendwyre.com`\n\nHere's a URL example for `secretKey` authentication:\n`https://verify.testwyre.com/widget/v1?env=test&operation=debitcard&accountId=AC_1234`\n`&authType=secretKey&destCurrency=ETH&sourceCurrency=USD`\n`&sourceAmount=0.01&dest=ethereum:0x4f5d52710C8C3E23e4c44f678868d23Aa2a49B37`\n`&redirectUrl=https://sendwyre.com`\n\nIn production, make sure to switch to verify.sendwyre.com/v1?env=prod and your production accountId. Example would be:\n`https://verify.sendwyre.com/widget/v1?env=prod&operation=debitcard&accountId=AC_PROD_ID`\n`&authType=secretKey&destCurrency=ETH&sourceCurrency=USD`\n`&sourceAmount=0.01&dest=ethereum:etherereum_mainnet_address`\n`&redirectUrl=https://sendwyre.com`\n\nBelow is a breakdown of the query parameters you'll need to add to your Wyre URL. \n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Query Parameter\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`env`\",\n    \"0-1\": \"This is the environment variable you would pass. Either test or production.\\n**Required**\",\n    \"1-0\": \"`operation`\",\n    \"1-1\": \"This is the payment processing operation you'd pass in. \\n\\nOnly supports debit card.\\n\\n**Required**\",\n    \"h-2\": \"Value\",\n    \"0-2\": \"`test` or `prod`.\",\n    \"1-2\": \"`debitcard`\",\n    \"2-0\": \"`accountId`\",\n    \"2-1\": \"This is your Wyre Account Id\\n**Required**\",\n    \"2-2\": \"`AC_XXXXXXXXX`\",\n    \"3-0\": \"`authType`\",\n    \"3-1\": \"The authorization object that defines how the widget connects to a Wyre account. \\n\\nEither `metamask` or `secretKey`. If `secretKey` a secret Key will be generated by Wyre and will be stored in localStorage. \\n\\n**Required**\",\n    \"3-2\": \"`metamask`\",\n    \"4-0\": \"`destCurrency`\",\n    \"4-1\": \"Specifies the currency to present for purchase to the user. This is present when a transfer is initiated. \\n\\nOnly supports `ETH` for Ethereum.\\n\\n**Required**\",\n    \"4-2\": \"`ETH`\",\n    \"5-0\": \"`sourceCurrency`\",\n    \"5-1\": \"Specifies the source currency to use for the transfer. This is present when a transfer is initiated.\\n\\nOnly supports `USD` as a source currency.\\n\\n**Required**\",\n    \"5-2\": \"`USD`\",\n    \"6-0\": \"`dest`\",\n    \"6-1\": \"An [SRN](doc:srns) which is where the funds will be sent after the completes\\n\\n**Required**\",\n    \"6-2\": \"`ethereum:0xYYYY`\",\n    \"7-0\": \"`redirectUrl`\",\n    \"7-1\": \"A url to navigate to when the complete event is triggered.\\n\\n**Required**\",\n    \"7-2\": \"`https://sendwyre.com`\",\n    \"8-0\": \"`destAmount` or `sourceAmount`\",\n    \"8-1\": \"Currency amount to purchase. **Can only have one param passed in.** Read more [here](https://docs.sendwyre.com/docs/create-transfer). \\n\\nIf not `destAmount` or `sourceAmount` is passed, users will be shown a view with an input with the respective currency label.\\n\\n**Required**\",\n    \"8-2\": \"`0.5`\",\n    \"9-0\": \"`pageTitle`\",\n    \"9-1\": \"Title of the redirect page. Defaults to \\\"Verify with Wyre\\\" if nothing is provided.\\n\\n**Optional**\",\n    \"9-2\": \"`Thingo page title`\",\n    \"10-0\": \"`secretKey`\",\n    \"10-1\": \"**(only if auth_type is secretKey)** More information [here](https://docs.sendwyre.com/docs/widget-api#authorization)\\n\\n**Optional**\",\n    \"10-2\": \"`your_secret_key`\"\n  },\n  \"cols\": 3,\n  \"rows\": 10\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Common Errors\"\n}\n[/block]\nIf any required parameters are omitted or invalid, the following view will be displayed, with a link to our developer docs page. Also, if a secret key value is passed, an error message will be displayed to the user.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/69751d5-Screen_Shot_2019-05-02_at_4.16.43_PM.png\",\n        \"Screen Shot 2019-05-02 at 4.16.43 PM.png\",\n        625,\n        336,\n        \"#13141c\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Events\"\n}\n[/block]\nThere are specific events that trigger browser states. Read below for more events.\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Event Name\",\n    \"h-1\": \"Description\",\n    \"0-0\": \"`close`\",\n    \"0-1\": \"If the close event is triggered, the entire page will close.\",\n    \"1-0\": \"`complete`\",\n    \"1-1\": \"If a redirect url has been passed during initialization, the page will redirect to this url, and all parameters passed to the complete event from the widget will be passed to this url as separate query parameters.\\n\\nResult:\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n**Complete Event Details**\n\nWhen completing a debit card fiat to crypto payment, the widget’s complete event will only trigger once a cryptocurrency transaction has been broadcasted to the network with a referenceable id that can be checked on a block explorer (i.e. etherscan, blockcypher, etc).\n\nWhen the event is fired, the following data will be passed to the event:\n\n`https://redirecturl.com/?accountId=AC_XXXXX&paymentMethodId=PA_XXXXX&networkTxId=0xYYYYYY`\n\n**When to show a success message/view**\nThe widget will only show the debit card transaction was successful once a transaction has been broadcasted to the network.","excerpt":"A Wyre Hosted Widget","slug":"hosted-widget","type":"basic","title":"Hosted Widget"}

Hosted Widget

A Wyre Hosted Widget

The hosted widget page will allow partners to push their users to a Wyre-hosted web page as an alternative way to integrate with the Wyre widget. [block:api-header] { "title": "Hosted Wyre Widget" } [/block] A page will be located at `https://verify.sendwyre.com/widget/v1/` whose sole purpose is to serve as a container for the widget. The hosted widget is the Wyre widget hosted on a Wyre URL. **Authentication**: Allow the customer to form a secure session with Wyre. This might be done through a wallet browser extension, `metamask`, or using a `secretKey`. You have control over the scheme used. More information [here](https://docs.sendwyre.com/v3/docs/widget-api#authorization). If `secretKey` is designated as an authentication mechanism, Wyre will generate the secret key and store is in the browser's localStorage. **Compliance On-Boarding**: Request information from the customer in order to meet some specific level of compliance for the `debitcard` KYC onboarding and transaction flow. Currently, the Hosted Widget only accepts `debitcard` as the payment user operation. **Caveats** This hosted Wyre widget currently only supports `metamask` or `secretKey` authentication, `debitcard` as a payment option, `USD` as a payment source and `ETH` as a destination currency. **Layout** The view will look like the following on desktop and mobile, respectively: [block:image] { "images": [ { "image": [ "https://files.readme.io/5effafa-Screen_Shot_2019-05-02_at_3.58.59_PM.png", "Screen Shot 2019-05-02 at 3.58.59 PM.png", 489, 197, "#f5f5f7" ], "caption": "Layout views for desktop and mobile." } ] } [/block] [block:api-header] { "title": "Example URL" } [/block] Here's an example URL you would send users to after a button click or your d/applications specific logic to send users to a Wyre hosted widget. This example uses `metamask` as the authentication mechanism. `https://verify.testwyre.com/widget/v1?env=test&operation=debitcard&accountId=AC_1234` `&authType=metamask&destCurrency=ETH&sourceCurrency=USD&sourceAmount=0.01` `&dest=ethereum:0x4f5d52710C8C3E23e4c44f678868d23Aa2a49B37` `&redirectUrl=https://sendwyre.com` Here's a URL example for `secretKey` authentication: `https://verify.testwyre.com/widget/v1?env=test&operation=debitcard&accountId=AC_1234` `&authType=secretKey&destCurrency=ETH&sourceCurrency=USD` `&sourceAmount=0.01&dest=ethereum:0x4f5d52710C8C3E23e4c44f678868d23Aa2a49B37` `&redirectUrl=https://sendwyre.com` In production, make sure to switch to verify.sendwyre.com/v1?env=prod and your production accountId. Example would be: `https://verify.sendwyre.com/widget/v1?env=prod&operation=debitcard&accountId=AC_PROD_ID` `&authType=secretKey&destCurrency=ETH&sourceCurrency=USD` `&sourceAmount=0.01&dest=ethereum:etherereum_mainnet_address` `&redirectUrl=https://sendwyre.com` Below is a breakdown of the query parameters you'll need to add to your Wyre URL. [block:parameters] { "data": { "h-0": "Query Parameter", "h-1": "Description", "0-0": "`env`", "0-1": "This is the environment variable you would pass. Either test or production.\n**Required**", "1-0": "`operation`", "1-1": "This is the payment processing operation you'd pass in. \n\nOnly supports debit card.\n\n**Required**", "h-2": "Value", "0-2": "`test` or `prod`.", "1-2": "`debitcard`", "2-0": "`accountId`", "2-1": "This is your Wyre Account Id\n**Required**", "2-2": "`AC_XXXXXXXXX`", "3-0": "`authType`", "3-1": "The authorization object that defines how the widget connects to a Wyre account. \n\nEither `metamask` or `secretKey`. If `secretKey` a secret Key will be generated by Wyre and will be stored in localStorage. \n\n**Required**", "3-2": "`metamask`", "4-0": "`destCurrency`", "4-1": "Specifies the currency to present for purchase to the user. This is present when a transfer is initiated. \n\nOnly supports `ETH` for Ethereum.\n\n**Required**", "4-2": "`ETH`", "5-0": "`sourceCurrency`", "5-1": "Specifies the source currency to use for the transfer. This is present when a transfer is initiated.\n\nOnly supports `USD` as a source currency.\n\n**Required**", "5-2": "`USD`", "6-0": "`dest`", "6-1": "An [SRN](doc:srns) which is where the funds will be sent after the completes\n\n**Required**", "6-2": "`ethereum:0xYYYY`", "7-0": "`redirectUrl`", "7-1": "A url to navigate to when the complete event is triggered.\n\n**Required**", "7-2": "`https://sendwyre.com`", "8-0": "`destAmount` or `sourceAmount`", "8-1": "Currency amount to purchase. **Can only have one param passed in.** Read more [here](https://docs.sendwyre.com/docs/create-transfer). \n\nIf not `destAmount` or `sourceAmount` is passed, users will be shown a view with an input with the respective currency label.\n\n**Required**", "8-2": "`0.5`", "9-0": "`pageTitle`", "9-1": "Title of the redirect page. Defaults to \"Verify with Wyre\" if nothing is provided.\n\n**Optional**", "9-2": "`Thingo page title`", "10-0": "`secretKey`", "10-1": "**(only if auth_type is secretKey)** More information [here](https://docs.sendwyre.com/docs/widget-api#authorization)\n\n**Optional**", "10-2": "`your_secret_key`" }, "cols": 3, "rows": 10 } [/block] [block:api-header] { "title": "Common Errors" } [/block] If any required parameters are omitted or invalid, the following view will be displayed, with a link to our developer docs page. Also, if a secret key value is passed, an error message will be displayed to the user. [block:image] { "images": [ { "image": [ "https://files.readme.io/69751d5-Screen_Shot_2019-05-02_at_4.16.43_PM.png", "Screen Shot 2019-05-02 at 4.16.43 PM.png", 625, 336, "#13141c" ] } ] } [/block] [block:api-header] { "title": "Events" } [/block] There are specific events that trigger browser states. Read below for more events. [block:parameters] { "data": { "h-0": "Event Name", "h-1": "Description", "0-0": "`close`", "0-1": "If the close event is triggered, the entire page will close.", "1-0": "`complete`", "1-1": "If a redirect url has been passed during initialization, the page will redirect to this url, and all parameters passed to the complete event from the widget will be passed to this url as separate query parameters.\n\nResult:" }, "cols": 2, "rows": 2 } [/block] **Complete Event Details** When completing a debit card fiat to crypto payment, the widget’s complete event will only trigger once a cryptocurrency transaction has been broadcasted to the network with a referenceable id that can be checked on a block explorer (i.e. etherscan, blockcypher, etc). When the event is fired, the following data will be passed to the event: `https://redirecturl.com/?accountId=AC_XXXXX&paymentMethodId=PA_XXXXX&networkTxId=0xYYYYYY` **When to show a success message/view** The widget will only show the debit card transaction was successful once a transaction has been broadcasted to the network.