search

Events

Events are fired by Tebex.checkout upon specific actions to alert your frontend and enable you to take action when required. These events should not be used to confirm actual receipt of payment - you should use Webhooks instead.

To add a checkout event callback, use Tebex.checkout.on() . The first argument to this function should be the name of the event to listen to, and the second argument should be a function to call when that event is fired:

Tebex.checkout.on("payment:complete", (event) => {
    console.log("Payment completed!", event);
});

Available events are as follows:

Name
Fired Upon

"open"

The portal popup opening after calling Tebex.checkout.launch().

"close"

The portal popup closing after being dismissed by the user.

"payment:complete"

The customer has successfully completed their payment.

"payment:error"

The customer experienced an error, such as incorrect card details or insufficient funds, when making a payment.

All events that can be listened to with Tebex.checkout.on() are exposed on the element as custom DOM events, which means you can use addEventListener to subscribe to them:

<html>
    <body>
        <tebex-checkout id="checkout"></tebex-checkout>
    </body>
    <script>
        const checkout = document.getElementById("checkout);
        
        checkout.addEventListener("open", () => {
            console.log("checkout opened");
        });

        checkout.addEventListener("close", () => {
            console.log("checkout closed");
        });

        checkout.addEventListener("payment:complete", (event) => {
            console.log("payment completed", event);
        });

        checkout.addEventListener("payment:error", (event) => {
            console.log("payment errored", event);
        });
    </script>
</html>
PreviousCheckoutNextWeb Component

Last updated