Event Hooks

Vanilla Javascript

<div id="qex-widget" style="background: #0b1b2f; padding: 40px;"></div>
<script src="https://partners.liquid.com/static/liquid-qex-widget/index.umd.js"></script>
<script>
  var elem = document.getElementById("qex-widget");
  const qexPlugin = new LiquidQex.QexWidgetApi(elem);
  qexPlugin.init({
    public_api_key: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    payout_settlement: {
      method: 'BLOCKCHAIN_TRANSFER',
      currency: 'LIKE',
      quantity: '10000',
      input_parameters: {
        account_key: {
          type: "WALLET_ADDRESS",
          value: "cosmos1skmnyzegmwtms3nhlp5fun20v2jz2ckn2ynqpd",
        }
      }
    }
  });
  qexPlugin.onSuccess((transaction) => {
    console.log("Transaction Complete", transaction);
  });
  qexPlugin.onError((errors) => {
    console.log("Transaction Failed", errors);
  });
  qexPlugin.onStepTransition((stepTransition) => {
    console.log(
      `Step transition. Old Step: ${stepTransition.old_step}, New step: ${stepTransition.new_step}`,
      stepTransition
    );
  });
</script>

React Integration

import React from "react";
import { QexWidget, SETTLEMENT_METHOD, THEME } from "liquid-qex-widget";

function App() {
  return (
    <div className="App">
      <QexWidget
        config={{
          public_api_key: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
          theme: THEME.LIGHT,
          payout_settlement: {
            method: SETTLEMENT_METHOD.BLOCKCHAIN_TRANSFER,
          },
        }}
        onSuccess={(transaction) => {
          console.log("Transaction Complete", transaction);
        }}
        onError={(errors) => {
          console.log("Transaction Failked", errors);
        }}
        onStepTransition={(stepTransition) => {
          console.log(
            `Step transition. Old Step: ${stepTransition.old_step}, New step: ${stepTransition.new_step}`,
            stepTransition
          );
        }}
      />
    </div>
  );
}