LogoLogo
  • Welcome
  • Getting Started
  • Integration Methods
  • SDKs
  • Tebex for Unreal Engine 5
  • Tebex for Unity Engine
  • Webstore Builder
    • Overview
    • Getting Started
    • Twig
      • Tags
      • Filters
      • Functions
    • Global Variables
      • basket
      • store
      • page
    • Pages
      • index.html
      • checkout.html
      • username.html
      • options.html
      • package.html
      • cms/page.html
      • category.html
      • layout.html
    • Sidebar Modules
      • module.communitygoal.html
      • module.featuredpackage.html
      • module.giftcardbalance.html
      • module.goal.html
      • module.payments.html
      • module.serverstatus.html
      • module.textbox.html
      • module.topdonator.html
    • Assets
    • Schema
    • Developer Plan
    • Footer
    • Guides
      • Package Slugs
  • Headless API
    • Overview
    • Getting Your Listings
    • Creating a Basket
    • Adding Packages
    • Gifting Packages
    • Applying Discounts / Creator Codes
    • Directing to Checkout
    • Endpoints
    • Postman Config
    • Example Integration
  • Checkout API
    • Overview
    • Headers and Authentication
    • Start the Checkout Process
    • Checkout Webhooks
    • Endpoints
    • Errors
    • Postman Config
  • Tebex.js
    • Overview
    • Integration
    • Events
    • Web Components
    • Custom Render Location
    • NPM
    • GitHub
  • Webhooks
    • Overview
    • Login Webhooks
  • Game Server API
    • Overview
    • Authentication
    • Error Handling
    • Endpoints
  • Affiliate API
    • Overview
    • Referrals
    • Game Types
    • Webhooks
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Tebex.js

Events

PreviousIntegrationNextWeb Components

Last updated 7 months ago

Was this helpful?

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 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 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>
Webhooks
Tebex.checkout.on()