Onboarding ACH Widget

Widgetized account and payment method creation

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"
                  accountId: "AC_YC3NT6GEZ8U",
                        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.

Secret Key Auth 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 draw funds from. View Supported Currencies

ACH - Optional

Defaults to USD