Overview

The Wyre Checkout Hosted Dialog will open a browser dialog centred in the screen with the full Checkout Widget loaded.

HTML and a Javascript Sample

<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',
                reservation: 'EFR2WLGEDAMYU6QEAXFF',
 /*A reservation id is mandatory. In order for the widget to open properly you must use a new, unexpired reservation id. Reservation ids are only valid for 15 minutes. A new reservation must also be made if a transaction fails.*/
                operation: {
                    type: 'debitcard-hosted-dialog'
                }
            });

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

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

        })(jQuery);


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

Generating a Reservation ID & Quotation
Learn how to generate a Wallet Order Reservation. Reservation ids are mandatory. In order for the widget to open properly, you must use a new, unexpired reservation id. Reservation ids are only valid for 15 minutes. A new reservation id must also be generated if a transaction fails.

Generate a Wallet Order Quotation. Quotations can greatly improve the user experience. This will allow your app to display fees related to the proposed transaction in advance.

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
`reservation`	Your wallet order reservation id. See Wallet Order Reservations for details.	This parameter is mandatory.
`operation`	Defines the user operation to perform after on-boarding/compliance requirements have been achieved Required	See operation 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	See Widget Authorization for details.

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 application

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 application

Callback Events

The widget will emit an event when payment is successfully made. You can register an event handler like this:

Event Name	Event Properties	Description
`paymentSuccess`	`{ paymentObject }`	This event is emitted once Wyre has initiated sending destCurrency to the user.

The callback will return an object to the client with details about the order. This data can be useful for immediate feedback in addition to Wallet Order Webhooks.

data:{
  data: {
     accountId: "account:AC_ATE69GGNMNC"
     blockchainNetworkTx: null
     dest: "bitcoin:n4VQ5YdHf7hLQ2gWQYYrcxoE5B7nWuDFNF"
     destAmount: 0.00015081
     fees: "{\"USD\":0.44,\"BTC\":0.00005}"
     orderId: "WO_6JC7TUV32G"
     transferId: "TF_A6MUVDYUGRW"
  }
     type: "paymentSuccess"
}

After initiating a purchase, users will be taken to a processing view as the payment is being completed. This process takes a bit of time. Once Wyre has initiated a blockchain transaction, the user will be taken to the Purchase Completed view which displays information about the completed transaction.

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/transfer/[transferId]/track

Users will be shown the following payment methods based on the browser they are using:

Payment Method	Browser
Apple Pay	Safari for macOS Sierra (v12.1.2) or iOS 10 (v602.1)