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>
);
}