Browser Dialog (Popup) Operation
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 Ronaldo's Codepen (Wyre Dev) 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 sendwyre.com
test: Our partner testing environment, available at testwyre.com
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
Last updated
Was this helpful?