{"_id":"5c0f3c0cde5eb8004ade42bf","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-11T04:24:44.800Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","examples":{"codes":[]},"apiSetting":null,"auth":"required","params":[],"url":""},"isReference":true,"order":2,"body":"This document describes the Javascript API provided by the Wyre Widget in full. See [Widget Developer Guide](doc:widget-developer-guide) for an overview of the widget's operation.\n[block:api-header]\n{\n  \"title\": \"Loader\"\n}\n[/block]\nInclude a `<script>` tag on your page pointing at the environment-agnostic Wyre widget loader:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://verify.sendwyre.com/js/widget-loader.js\\\"></script>\\n<script>\\nvar widget = new Wyre.Widget({ /* pass initialization parameters here */ });\\n</script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis should always be placed toward the end of the body on your page, (and prior to any scripts that depend on it). The constructor takes an initialization object which consists of parameters that control the widget's operation as defined below.\n\nFor the time being, please do not host this loader on your own servers. Always use it from the URL we have supplied.\n[block:api-header]\n{\n  \"title\": \"Widget Initialization Parameters\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parameter\",\n    \"0-0\": \"`env`\",\n    \"0-1\": \"Defines which Wyre environment the widget operates against\\n\\nOptional, defaults to `\\\"prod\\\"`\",\n    \"1-0\": \"`accountId`\",\n    \"2-0\": \"`auth`\",\n    \"4-0\": \"`operation`\",\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    \"2-1\": \"The authorization object that defines how the widget connects to a Wyre account\\n\\n**Required**\",\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    \"h-1\": \"Description\",\n    \"h-2\": \"Values\",\n    \"1-2\": \"You'll have a different ID in each Wyre environment\\n\\nExample: `\\\"AC-FD239aR29\\\"`\",\n    \"2-2\": \"See [authorization](doc:widget-api#authorization) below for details.\\n\\nExample: `{ \\\"type\\\": \\\"default\\\" }`\",\n    \"4-2\": \"See [operation](doc:widget-api#operation) below for details\\n\\nExample: \\n```\\n{\\n  \\\"type\\\": \\\"onramp\\\",\\n  \\\"destCurrency\\\": \\\"DAI\\\"\\n}\\n```\",\n    \"4-1\": \"Defines the user operation to perform after on-boarding/compliance requirements have been achieved\\n\\n**Required**\",\n    \"3-0\": \"`requireYes`\",\n    \"3-2\": \"\",\n    \"3-1\": \"*Coming soon*\\n\\nDescription of compliance requirements\",\n    \"5-0\": \"`style`\",\n    \"5-2\": \"See [styling](doc:widget-api#styling) below for details\",\n    \"5-1\": \"Adjusts the look and feel of the widget\"\n  },\n  \"cols\": 3,\n  \"rows\": 6\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    \"h-2\": \"Details\",\n    \"1-2\": \"\",\n    \"0-2\": \"Example: \\n\\n`auth: {type: \\\"default\\\"}`\",\n    \"2-0\": \"`signature`\",\n    \"2-1\": \"Signature-based handshake. Similar in theory to a web3 integration, except entirely over message-passing, without the need for a web3 implementation.\\n\\n*Coming soon, please contact [support:::at:::sendwyre.com](mailto:support@sendwyre.com) to let us know this would be helpful to you!*\",\n    \"3-0\": \"`default`\",\n    \"3-1\": \"Presently a synonym for `\\\"metamask\\\"` but this may change in the future\\n\\n`auth: { type: \\\"default\\\" }`\"\n  },\n  \"cols\": 2,\n  \"rows\": 4\n}\n[/block]\n## Secret Key Auth\nSecret key authentication is a form of bearer token authentication where the client generates its own secret token. This is useful in particular to clients that do not support web3. Example:\n\n```\nauth: {\n  type: \"secretKey\",\n  secretKey: \"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa\"\n}\n```\n\nThe following table describes the attributes of the secret key auth object\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`type`\",\n    \"0-1\": \"Value: `\\\"secretKey\\\"`\\n\\n**Required**\",\n    \"1-0\": \"`secretKey`\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Description / Value\",\n    \"1-1\": \"Supply a 25+ character cryptographically random generated unique string which identifies the device being used\\n\\n**Required**\"\n  },\n  \"cols\": 2,\n  \"rows\": 2\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:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"widget.on('complete', function(e) {\\n          // onboarding was completed successfully!\\n          console.log('Widget on complete');\\n          console.log(e);\\n        });\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nBelow are a list of events the widget will emit:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Event Name\",\n    \"h-1\": \"Parameters Object\",\n    \"0-0\": \"`ready`\",\n    \"0-1\": \"none\",\n    \"h-2\": \"Description\",\n    \"1-0\": \"`close`\",\n    \"2-1\": \"`{\\\"accountId\\\":\\\"AC_XXX\\\"}`\",\n    \"2-0\": \"`complete`\",\n    \"0-2\": \"This event is emitted when the widget has initialized and is ready to be opened.\",\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    \"2-2\": \"This event is emitted after the user completes the flow and then closes the widget.\",\n    \"1-1\": \"string containing the error message\",\n    \"3-0\": \"`account`\",\n    \"4-0\": \"`paymentmethod`\",\n    \"3-1\": \"`{\\\"accountId\\\":\\\"AC_XXX\\\"}`\",\n    \"4-1\": \"`{\\\"paymentMethodId\\\":\\\"ZZZ\\\"}`\",\n    \"3-2\": \"This event is emitted immediately after the account ID has been created/established. It may fire multiple times\",\n    \"4-2\": \"This event is emitted immediately after a payment method has been created/established.\"\n  },\n  \"cols\": 3,\n  \"rows\": 5\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Compliance On-Boarding\"\n}\n[/block]\nPresently, there is only available a single tier of US compliance available.\n[block:api-header]\n{\n  \"title\": \"Operation\"\n}\n[/block]\nAfter the compliance requirements have been met, the `operation` field of the initialization object defines the flow presented to the user.\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`onramp`\",\n    \"1-0\": \"`none`\",\n    \"h-2\": \"Parameters\",\n    \"h-0\": \"Type\",\n    \"h-1\": \"Description\",\n    \"1-1\": \"After on-boarding has concluded, the widget will close with no further customer actions\",\n    \"0-1\": \"Directs your user to a purchasing 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  },\n  \"cols\": 2,\n  \"rows\": 2\n}\n[/block]\n## Onramp\nThe following table describes the valid attributes of the on-ramp operation object:\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`type`\",\n    \"h-0\": \"Parameter\",\n    \"0-1\": \"`\\\"onramp\\\"`\",\n    \"1-0\": \"`destCurrency`\",\n    \"2-0\": \"`dest`\",\n    \"2-2\": \"Optional\\n\\nExample ETH Address: \\n`\\\"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\\\"`\\n\\nExample Wyre Account ID:\\n`\\\"account:AC-BAAA2222\\\"`\\n\\n*Note: * When setting a BTC address SRN as the dest make sure you use a valid address for the network you are attached to. For example, in our test environment use a valid testnet3 address, and in production use a valid main net address.\",\n    \"1-2\": \"**Required**\\n\\nExamples: `\\\"DAI\\\"`, `\\\"ETH\\\"`, `\\\"BTC\\\"`\",\n    \"1-1\": \"Specifies the currency to present for purchase to the user\",\n    \"0-2\": \"**Required**\",\n    \"2-1\": \"An [SRN](doc:srns) which is where the funds will be sent after the completes\"\n  },\n  \"cols\": 3,\n  \"rows\": 3\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Styling\"\n}\n[/block]\nThese attributes can be passed to the widget in the `style` attribute to adjust the look and feel of the widget. (If you have additional needs, please let us know!)\n[block:parameters]\n{\n  \"data\": {\n    \"0-0\": \"`primaryColor`\",\n    \"h-0\": \"Parameter\",\n    \"h-1\": \"Description\",\n    \"0-1\": \"A CSS-safe color used throughout the widget as a primary color for styling UI elements\\n\\nExample: `\\\"#ff0000\\\"`\"\n  },\n  \"cols\": 2,\n  \"rows\": 1\n}\n[/block]","excerpt":"","slug":"widget-api","type":"basic","title":"Widget API"}
This document describes the Javascript API provided by the Wyre Widget in full. See [Widget Developer Guide](doc:widget-developer-guide) for an overview of the widget's operation. [block:api-header] { "title": "Loader" } [/block] Include a `<script>` tag on your page pointing at the environment-agnostic Wyre widget loader: [block:code] { "codes": [ { "code": "<script src=\"https://verify.sendwyre.com/js/widget-loader.js\"></script>\n<script>\nvar widget = new Wyre.Widget({ /* pass initialization parameters here */ });\n</script>", "language": "html" } ] } [/block] This should always be placed toward the end of the body on your page, (and prior to any scripts that depend on it). The constructor takes an initialization object which consists of parameters that control the widget's operation as defined below. For the time being, please do not host this loader on your own servers. Always use it from the URL we have supplied. [block:api-header] { "title": "Widget Initialization Parameters" } [/block] [block:parameters] { "data": { "h-0": "Parameter", "0-0": "`env`", "0-1": "Defines which Wyre environment the widget operates against\n\nOptional, defaults to `\"prod\"`", "1-0": "`accountId`", "2-0": "`auth`", "4-0": "`operation`", "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**", "2-1": "The authorization object that defines how the widget connects to a Wyre account\n\n**Required**", "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)", "h-1": "Description", "h-2": "Values", "1-2": "You'll have a different ID in each Wyre environment\n\nExample: `\"AC-FD239aR29\"`", "2-2": "See [authorization](doc:widget-api#authorization) below for details.\n\nExample: `{ \"type\": \"default\" }`", "4-2": "See [operation](doc:widget-api#operation) below for details\n\nExample: \n```\n{\n \"type\": \"onramp\",\n \"destCurrency\": \"DAI\"\n}\n```", "4-1": "Defines the user operation to perform after on-boarding/compliance requirements have been achieved\n\n**Required**", "3-0": "`requireYes`", "3-2": "", "3-1": "*Coming soon*\n\nDescription of compliance requirements", "5-0": "`style`", "5-2": "See [styling](doc:widget-api#styling) below for details", "5-1": "Adjusts the look and feel of the widget" }, "cols": 3, "rows": 6 } [/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)", "h-2": "Details", "1-2": "", "0-2": "Example: \n\n`auth: {type: \"default\"}`", "2-0": "`signature`", "2-1": "Signature-based handshake. Similar in theory to a web3 integration, except entirely over message-passing, without the need for a web3 implementation.\n\n*Coming soon, please contact [support@sendwyre.com](mailto:support@sendwyre.com) to let us know this would be helpful to you!*", "3-0": "`default`", "3-1": "Presently a synonym for `\"metamask\"` but this may change in the future\n\n`auth: { type: \"default\" }`" }, "cols": 2, "rows": 4 } [/block] ## Secret Key Auth Secret key authentication is a form of bearer token authentication where the client generates its own secret token. This is useful in particular to clients that do not support web3. Example: ``` auth: { type: "secretKey", secretKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" } ``` The following table describes the attributes of the secret key auth object [block:parameters] { "data": { "0-0": "`type`", "0-1": "Value: `\"secretKey\"`\n\n**Required**", "1-0": "`secretKey`", "h-0": "Parameter", "h-1": "Description / Value", "1-1": "Supply a 25+ character cryptographically random generated unique string which identifies the device being used\n\n**Required**" }, "cols": 2, "rows": 2 } [/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:code] { "codes": [ { "code": "widget.on('complete', function(e) {\n // onboarding was completed successfully!\n console.log('Widget on complete');\n console.log(e);\n });", "language": "text" } ] } [/block] Below are a list of events the widget will emit: [block:parameters] { "data": { "h-0": "Event Name", "h-1": "Parameters Object", "0-0": "`ready`", "0-1": "none", "h-2": "Description", "1-0": "`close`", "2-1": "`{\"accountId\":\"AC_XXX\"}`", "2-0": "`complete`", "0-2": "This event is emitted when the widget has initialized and is ready to be opened.", "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.", "2-2": "This event is emitted after the user completes the flow and then closes the widget.", "1-1": "string containing the error message", "3-0": "`account`", "4-0": "`paymentmethod`", "3-1": "`{\"accountId\":\"AC_XXX\"}`", "4-1": "`{\"paymentMethodId\":\"ZZZ\"}`", "3-2": "This event is emitted immediately after the account ID has been created/established. It may fire multiple times", "4-2": "This event is emitted immediately after a payment method has been created/established." }, "cols": 3, "rows": 5 } [/block] [block:api-header] { "title": "Compliance On-Boarding" } [/block] Presently, there is only available a single tier of US compliance available. [block:api-header] { "title": "Operation" } [/block] After the compliance requirements have been met, the `operation` field of the initialization object defines the flow presented to the user. [block:parameters] { "data": { "0-0": "`onramp`", "1-0": "`none`", "h-2": "Parameters", "h-0": "Type", "h-1": "Description", "1-1": "After on-boarding has concluded, the widget will close with no further customer actions", "0-1": "Directs your user to a purchasing 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)" }, "cols": 2, "rows": 2 } [/block] ## Onramp The following table describes the valid attributes of the on-ramp operation object: [block:parameters] { "data": { "0-0": "`type`", "h-0": "Parameter", "0-1": "`\"onramp\"`", "1-0": "`destCurrency`", "2-0": "`dest`", "2-2": "Optional\n\nExample ETH Address: \n`\"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413\"`\n\nExample Wyre Account ID:\n`\"account:AC-BAAA2222\"`\n\n*Note: * When setting a BTC address SRN as the dest make sure you use a valid address for the network you are attached to. For example, in our test environment use a valid testnet3 address, and in production use a valid main net address.", "1-2": "**Required**\n\nExamples: `\"DAI\"`, `\"ETH\"`, `\"BTC\"`", "1-1": "Specifies the currency to present for purchase to the user", "0-2": "**Required**", "2-1": "An [SRN](doc:srns) which is where the funds will be sent after the completes" }, "cols": 3, "rows": 3 } [/block] [block:api-header] { "title": "Styling" } [/block] These attributes can be passed to the widget in the `style` attribute to adjust the look and feel of the widget. (If you have additional needs, please let us know!) [block:parameters] { "data": { "0-0": "`primaryColor`", "h-0": "Parameter", "h-1": "Description", "0-1": "A CSS-safe color used throughout the widget as a primary color for styling UI elements\n\nExample: `\"#ff0000\"`" }, "cols": 2, "rows": 1 } [/block]