Browser Dialog (Popup) Operation

Understanding the Expected Flow: Codepen.io By Ronaldo

<html>
<head>
    <title>Wyre widget</title>
</head>
<body>
    <button id='buy'>Buy</button>
    <div id="wyre-dropin-widget-container"></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://verify.sendwyre.com/js/verify-module-init-beta.js"></script>
    <script type="text/javascript">
        (function($) {
          
            // debit card popup
            var widget = new Wyre({
                env: 'test',
                operation: {
                    type: 'debitcard-hosted-dialog',
                    dest: "ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912",
                    destCurrency: "ETH",
                    sourceAmount: 10.0,
                    paymentMethod: 'debit-card'
                }
            });

          
            widget.on("paymentSuccess", function (e) {
                console.log("paymentSuccess", e );
            });

            $('#buy').click(function(){
                widget.open();
            })

        })(jQuery);


    </script>
</body>
</html>

Browser Dialog Parameters

Parameter

Description

Values

env

Defines which Wyre environment the widget operates against

Optional, defaults to "prod"

accountId

Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details

Required

You'll have a different ID in each Wyre environment

Example: "AC-FD239aR29"

operation

Defines the user operation to perform after on-boarding/compliance requirements have been achieved

Required

See "Operation Values" below for details.

Example:

{

"type": "onramp",

"destCurrency": "BTC",

...

}

auth (onramp only)

The authorization object that defines how the widget connects to a Wyre account

Required

Operation Values

Type

Description

Value

type

The type of payment flow the user will go through.

Required

debitcard-hosted-dialog: Users will go through a completely full-featured, Wyre-branded debit card payment flow in a separate popup window. This is the fastest way to integrate Wyre's widget.

debitcard-hosted: Users will go through full-featured, Wyre-branded debit card payment flow hosted by Wyre. Your application will be redirected to Wyre Widget website to finish the payment flow. Once done, you can check callbacks to redirect it back to your applicatio

destCurrency

Specifies the currency to present for purchase to the user

Required

"DAI" or "ETH" or "BTC" or "USDC"

dest

An ETH or BTC address based on the destCurrency

Optional

Example ETH Address: ethereum: "0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413"

Example BTC Address: bitcoin: "1MkMmko5WQVboafwLEGgtfT7Jxj6AEbK5S"

sourceAmount

The amount to withdrawal from the source, in units of sourceCurrency

Optional

Debit Cards - Limits TBD

Callback Events

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

Event Name

Event Properties

Description

paymentSuccess

{ paymentObject }

This event is emitted once a Wyre has initiated sending destCurrency to the user.

You can retrieve additional information for a new purchase, including the blockchain transaction hash, by submitting a GET request to the following URL: https://api.sendwyre.com/v2/[transferId]/track

PreviousHosted Redirect Operation NextUnderstanding Transaction Statuses

Last updated 4 years ago

Was this helpful?

Understanding the Expected Flow: Codepen.io By Ronaldo

You can have a pop-up version of the Wyre widget displayed on your website or app by using the Widget in Browser Dialog mode. Below you can see the HTML code that was used in example on the main Widget page of the documentation. This code example shows how to create a "buy" button which you could place on part of your page. Once the user clicks on the "buy" button a popup window containing the widget will appear with the prefilled parameters defined by the code. We hope to see some more creative ways of re-creating the "buy" button in partners' apps and web pages. What will you do!?

<html>
<head>
    <title>Wyre widget</title>
</head>
<body>
    <button id='buy'>Buy</button>
    <div id="wyre-dropin-widget-container"></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://verify.sendwyre.com/js/verify-module-init-beta.js"></script>
    <script type="text/javascript">
        (function($) {
          
            // debit card popup
            var widget = new Wyre({
                env: 'test',
                operation: {
                    type: 'debitcard-hosted-dialog',
                    dest: "ethereum:0x98B031783d0efb1E65C4072C6576BaCa0736A912",
                    destCurrency: "ETH",
                    sourceAmount: 10.0,
                    paymentMethod: 'debit-card'
                }
            });

          
            widget.on("paymentSuccess", function (e) {
                console.log("paymentSuccess", e );
            });

            $('#buy').click(function(){
                widget.open();
            })

        })(jQuery);


    </script>
</body>
</html>

Browser Dialog Parameters

Parameter

Description

Values

env

Defines which Wyre environment the widget operates against

Optional, defaults to "prod"

prod: Our real environment, live at

test: Our partner testing environment, available at

accountId

Your Wyre Account ID. This associates accounts created inside the widget with you, though it does not give you access to their details

Required

You'll have a different ID in each Wyre environment

Example: "AC-FD239aR29"

operation

Defines the user operation to perform after on-boarding/compliance requirements have been achieved

Required

See "Operation Values" below for details.

Example:

{

"type": "onramp",

"destCurrency": "BTC",

...

}

auth (onramp only)

The authorization object that defines how the widget connects to a Wyre account

Required

Operation Values

Type

Description

Value

type

The type of payment flow the user will go through.

Required

debitcard-hosted-dialog: Users will go through a completely full-featured, Wyre-branded debit card payment flow in a separate popup window. This is the fastest way to integrate Wyre's widget.

destCurrency

Specifies the currency to present for purchase to the user

Required

"DAI" or "ETH" or "BTC" or "USDC"

dest

An ETH or BTC address based on the destCurrency

Optional

Example ETH Address: ethereum: "0xBB9bc244D798123fDe783fCc1C72d3Bb8C189413"

Example BTC Address: bitcoin: "1MkMmko5WQVboafwLEGgtfT7Jxj6AEbK5S"

sourceAmount

The amount to withdrawal from the source, in units of sourceCurrency

Optional

Debit Cards - Limits TBD

Callback Events

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

Event Name

Event Properties

Description

paymentSuccess

{ paymentObject }

This event is emitted once a Wyre has initiated sending destCurrency to the user.