Checkouts

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

Opening the Checkout

React

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)

<!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:

PayNowJS.checkout.close()

JavaScript (CDN)

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

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

<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>

API Reference

Methods

checkout.open(options: { token: string, baseURL?: string; renderTo?: { element: HTMLElement; } }): Opens the checkout with the specified token and optional base URL. You should never need to set baseURL - its used internally.
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.

PreviousAbout PayNow.js NextWebhooks Introduction

Last updated 2 months ago

Was this helpful?

hashtagOpening the Checkout

hashtagClosing the checkout

hashtagEvent Listeners

hashtagReact Usage

hashtagJavaScript (CDN) Usage

hashtagAPI Reference