kbc-club-checkout

The club checkout wrapper for the Kano Studio Boilerplate apps, which uses the Club Checkout UI to create an iframe using the hosted club-checkout.kano.me custom Paddle checkout and handles tracking wherever the component is being used. Includes GTAG, FBQ and Kano Telemetry event listeners.

Usage

import { KbcClubCheckout } from '@kano/kbc-club-checkout'

const App = () => (
    return (
        <KbcClubCheckout
            showCheckout={ */ Trigger for showing the checkout /* }
            url="club-checkout.kano.me"
            path={ */ Select the checkout view, either 'checkout' (default) or 'redeem' (redeem is for best buy promo codes) /* }
            action={(action: string) => this.handleCheckoutAction(action)} // Currently only triggered by 'close-club-checkout' event to close the checkout
        />
    )
)

Checkout UI

Creates the checkout UI frame

Usage

Create the UI instance using the checkout url and path, if path is not provided the default is the checkout view

import ClubCheckout from '@kano/kbc-club-checkout';

// url: club-checkout.kano.me / staging.club-checkout.kano.me
// path: /checkout or /redeem (default is checkout)
this.clubCheckout = ClubCheckout.createUI(url, path);

Append the iframe to desired child in your app using getDomNode()

this.container.appendChild(this.clubCheckout.getDomNode());

Load in the frame using openCheckout(), awaiting result currently only occurs when the user tries to close the iframe, either by clicking the backdrop or the cross button.

const result = await this.clubCheckout.openCheckout();

You will need to action the result once the Promise is resolved by closing the iframe however you choose.