# Checkouts
### 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 (
)
}
```
**JavaScript (CDN Installation)**
```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 (
)
}
```
#### JavaScript (CDN) Usage
```html
```
### 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(event: K, handler: CheckoutEvents[K])`: Registers an event listener for a specified checkout event.
* `checkout.off(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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.paynow.gg/paynow.js/checkouts.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.