Events

Events are fired by Tebex.js 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 an 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 function is fired:

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

Available events are as follows:

Name
Fired Upon

"open"

The checkout popup opening.

"close"

The checkout popup closing.

"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>
PreviousIntegrationNextWeb Components

Last updated