Checkouts

Once you've embedded PayNow.js in your website - you can easily open and manage checkout lifecycles.

Opening the Checkout

React

TSX

import PayNowJS from "@paynow-gg/paynow.js"

export default function CheckoutComponent() {
    function openCheckout() {
        PayNowJS.checkout.open({ token: "checkout token" })
    }

    return (
        <button onClick={() => openCheckout()}>Open Checkout</button>
    )
}

JavaScript (CDN Installation)

HTML

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.paynow.gg/paynow-js/bundle.js" defer></script>
    </head>
    <body>
        <button onclick="openCheckout">
            Open Checkout
        </button>

        <script>
            function openCheckout() {
                window.PayNow.checkout.open({
                    token: "CHECKOUT_TOKEN"
                })
            }
        </script>
    </body>
</html>

Closing the checkout

Call close() to programmatically dismiss the checkout overlay:

React:

TSX

PayNowJS.checkout.close()

JavaScript (CDN)

JavaScript

window.PayNow.checkout.close()

Event Listeners

PayNow.js emits three events during the checkout lifecycle:

ready - Fires when the checkout overlay is rendered
completed - Fires when the customer completes their purchase
closed - Fires when the checkout overlay is dismissed

You can listen to these events via the on and off functions on checkout

React Usage

TSX

import { useEffect } from "react"

import PayNowJS from "@paynow-gg/paynow.js"

export default function CheckoutComponent() {
  useEffect(() => {
    const handleReady = () => {
      console.log("Checkout is ready")
    }

    const handleCompleted = (event) => {
      console.log(`Order completed! ID: ${event.orderId}`)
      
      // Optionally close the overlay
      PayNowJS.checkout.close()
      
      // Redirect to your order completed page or update your UI!
    }

    const handleClosed = () => {
      console.log("Checkout was closed")
    }

    // Register listeners
    
    PayNowJS.checkout.on("ready", handleReady)
    PayNowJS.checkout.on("completed", handleCompleted)
    PayNowJS.checkout.on("closed", handleClosed)

    // Cleanup on unmount
    
    return () => {
      PayNowJS.checkout.off("ready", handleReady)
      PayNowJS.checkout.off("completed", handleCompleted)
      PayNowJS.checkout.off("closed", handleClosed)
    }
  }, [])

  return (
    <button onClick={() => PayNowJS.checkout.open({ token: "token_here" })}>
      Open Checkout
    </button>
  )
}

JavaScript (CDN) Usage

HTML

<button onclick="openCheckout()">Open Checkout</button>

<script>
function openCheckout() {
  window.PayNow.checkout.open({
    token: "checkout_token_here"
  })
}

// Register event listeners
window.PayNow.checkout.on("ready", () => {
  console.log("Checkout is ready")
})

window.PayNow.checkout.on("completed", (event) => {
  alert("Order completed! ID: " + event.orderId)
  window.PayNow.checkout.close()
  // Redirect or update your page
  window.location.href = "/success?orderId=" + event.orderId
})

window.PayNow.checkout.on("closed", () => {
  console.log("Checkout was closed")
})
</script>

Developers

Methods

checkout.open(options: { token: string, baseURL?: string; renderTo?: { element: HTMLElement; }; disableRedirect?: boolean; theme?: "auto" | "light" | "dark" }): Opens the checkout with the specified token. baseURL changes which checkout opens. Leave it unset for production, or set it to open the test environment's checkout. renderTo mounts the checkout inside your own element instead of a full-page overlay. theme picks the checkout colour scheme, defaulting to auto.
Narrow windows redirect. When window.innerWidth is below 800px, open() navigates the browser to the hosted checkout page instead of rendering the overlay. Pass disableRedirect: true to always render in place. Because a redirected customer leaves your page, always set return_url on the checkout session.
checkout.close(): Closes the open checkout.
checkout.on<K extends keyof CheckoutEvents>(event: K, handler: CheckoutEvents[K]): Registers an event listener for a specified checkout event.
checkout.off<K extends keyof CheckoutEvents>(event: K, handler: CheckoutEvents[K]): Unregisters an event listener for a specified checkout event.

Events

ready: Emitted when the checkout is ready to use.
completed: Emitted when an order is completed, providing an object with the orderId.
closed: Emitted when the checkout is closed.