Onboarding ACH Widget

The Wyre Onboarding and ACH 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, 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: 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: 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: 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.

Widget Loader Example

<html>
    <head>
        <title>Verify with Wyre</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    </head>
    <body>
        <div class="container">
            <button id="verify-button" class="btn btn-primary mt-5">Verify with Wyre</button>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="https://verify.sendwyre.com/js/verify-module-init.js"></script>
        <script type="text/javascript">
            (function($) {
                var deviceToken = localStorage.getItem("DEVICE_TOKEN");
                if (!deviceToken) {
                    var array = new Uint8Array(25);
                    window.crypto.getRandomValues(array);
                    deviceToken = Array.prototype.map
                        .call(array, x => ("00" + x.toString(16)).slice(-2))
                        .join("");
                    localStorage.setItem("DEVICE_TOKEN", deviceToken);
                }
                var handler = new Wyre({
                        env: "prod",//or "test"
                        auth: {
                            type: "secretKey",
                            secretKey: deviceToken
                        },
                        operation: {
                            type: "onramp",
                            destCurrency: "ETH",
                            dest: "ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413",
                            sourceAmount: 10.0
                        },
                        onExit: function (error) {
                            if (error != null)
                                console.error(error)
                            else
                                console.log("exited!")
                        },
                        onSuccess: function () {
                            console.log("success!")
                        }
                    });
                $('#verify-button').on('click', function(e) {
                    handler.open();
                });
            })(jQuery);
        </script>
    </body>
</html>

📘
Loader Script
Always use the loading script from the URL we have supplied.

Widget Initialization Parameters

Parameter	Description	Values
`env`	Defines which Wyre environment the widget operates against Optional, defaults to `"prod"`	`prod`: Our real environment, live at sendwyre.com `test`: Our partner testing environment, available at testwyre.com
`auth`	The authorization object that defines how the widget connects to a Wyre account Required	See authorization below for details. `auth: { type: "secretKey", secretKey: deviceToken },`
`operation`	Defines the user operation to perform after on-boarding/compliance requirements have been achieved Required	See operation below for details Example: `operation: { type: "onramp", destCurrency: "ETH", dest: "ethereum:0x", sourceAmount: 10.0 },`
transferNotifyUrl	Webhook callback Url for transfer updates.	Specify this parameter if you need to get webhook callbacks when transfer change status.

Authorization

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:

Type	Description
`metamask`	Support for any customer with Metamask installed `auth: { type: "metamask" }`
`secretKey`	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. Parameter Details

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:

var deviceToken = localStorage.getItem("DEVICE_TOKEN");
if (!deviceToken) {
    var array = new Uint8Array(25);
    window.crypto.getRandomValues(array);
    deviceToken = Array.prototype.map
        .call(array, x => ("00" + x.toString(16)).slice(-2))
        .join("");
    localStorage.setItem("DEVICE_TOKEN", deviceToken);
}

auth: {
  type: "secretKey",
  secretKey: deviceToken
}

The following table describes the attributes of the secret key auth object

Parameter	Description / Value
`type`	Value: `"secretKey"` Required
`secretKey`	Supply a 25-35 character cryptographically random generated unique string which identifies the device being used Required

Callback Events

The widget will emit several different events at various points throughout its lifecycle. You can register an event handler like this:

onExit: function (error) {
    if (error != null)
        console.error(error)
    else
        console.log("exited!")
},
  onSuccess: function () {
    console.log("success!")
}

Compliance On-Boarding

Presently, there is only available a single tier of US compliance available.

Operation

After the compliance requirements have been met, the operation field of the initialization object defines the flow presented to the user.

Type	Description
`onramp`	Directs your user to a 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
`none`	After on-boarding has concluded, the widget will close with no further customer actions

Onramp (ACH)

The following table describes the valid attributes of the onramp operation object:

Parameter	Description	Value
`type`	`"onramp"` for ACH	Required
`destCurrency`	Specifies the currency to present for purchase to the user	Required Examples: `"DAI"`, `"ETH"`, `"BTC"`
`dest`	An SRN which is where the funds will be sent after the completes	Required Example ETH Address: `"ethereum:0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413"` Example Wyre Account ID: `"account:AC-BAAA2222"` 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. For ETH, we use Kovan in test and and mainnet for production.
`destAmount` or `sourceAmount`	`destAmount` Specifies the total amount of currency to deposit (as defined in `destCurrency`. `sourceAmount` The amount to withdrawal from the source, in units of sourceCurrency	ACH - Optional Only include sourceAmount OR destAmount, not both. If a sourceAmount is not provided, an UI screen will allow the users to add an amount within the transaction limits.
`sourceCurrency`	Specifies the currency to draws funds from. Take a read here for the supported source currencies.	ACH - Optional Defaults to USD

Widget Loader Example

📘Loader Script

Widget Initialization Parameters

Authorization

Secret Key Auth

Callback Events

Compliance On-Boarding

Operation

Onramp (ACH)

📘
Loader Script