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