Quick Exchange
Search…
Event Hooks
Vanilla Javascript
1
<div id="qex-widget" style="background: #0b1b2f; padding: 40px;"></div>
2
<script src="https://partners.liquid.com/static/liquid-qex-widget/index.umd.js"></script>
3
<script>
4
var elem = document.getElementById("qex-widget");
5
const qexPlugin = new LiquidQex.QexWidgetApi(elem);
6
qexPlugin.init({
7
public_api_key: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
8
payout_settlement: {
9
method: 'BLOCKCHAIN_TRANSFER',
10
currency: 'LIKE',
11
quantity: '10000',
12
input_parameters: {
13
account_key: {
14
type: "WALLET_ADDRESS",
15
value: "cosmos1skmnyzegmwtms3nhlp5fun20v2jz2ckn2ynqpd",
16
}
17
}
18
}
19
});
20
qexPlugin.onSuccess((transaction) => {
21
console.log("Transaction Complete", transaction);
22
});
23
qexPlugin.onError((errors) => {
24
console.log("Transaction Failed", errors);
25
});
26
qexPlugin.onStepTransition((stepTransition) => {
27
console.log(
28
`Step transition. Old Step: ${stepTransition.old_step}, New step: ${stepTransition.new_step}`,
29
stepTransition
30
);
31
});
32
</script>
Copied!
React Integration
1
import React from "react";
2
import { QexWidget, SETTLEMENT_METHOD, THEME } from "liquid-qex-widget";
3
4
function App() {
5
return (
6
<div className="App">
7
<QexWidget
8
config={{
9
public_api_key: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
10
theme: THEME.LIGHT,
11
payout_settlement: {
12
method: SETTLEMENT_METHOD.BLOCKCHAIN_TRANSFER,
13
},
14
}}
15
onSuccess={(transaction) => {
16
console.log("Transaction Complete", transaction);
17
}}
18
onError={(errors) => {
19
console.log("Transaction Failked", errors);
20
}}
21
onStepTransition={(stepTransition) => {
22
console.log(
23
`Step transition. Old Step: ${stepTransition.old_step}, New step: ${stepTransition.new_step}`,
24
stepTransition
25
);
26
}}
27
/>
28
</div>
29
);
30
}
Copied!
Last modified 1yr ago
Copy link