Component Props

Component Props

Complete reference for all Checkout component properties.

Required Props

proxyURL

• Type: string
• Required: ✅
• Description: The API endpoint to access

<Checkout proxyURL="https://api.example.com/protected">
  <button>Access API</button>
</Checkout>

Optional Props

method

• Type: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
• Default: 'GET'
• Description: HTTP method for the API request

<Checkout
  proxyURL="https://api.example.com/data"
  method="POST"
>
  <button>Submit Data</button>
</Checkout>

headers

• Type: Record<string, string>
• Description: Custom headers to include with the request

<Checkout
  proxyURL="https://api.example.com/data"
  headers={{
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  }}
>
  <button>Get Data</button>
</Checkout>

body

• Type: any
• Description: Request body for POST/PUT/PATCH requests

<Checkout
  proxyURL="https://api.example.com/data"
  method="POST"
  body={{ query: 'search term', limit: 10 }}
>
  <button>Search</button>
</Checkout>

theme

• Type: 'light' | 'dark' | 'auto'
• Default: 'auto'
• Description: UI theme for the payment modal

<Checkout
  proxyURL="https://api.example.com/data"
  theme="dark"
>
  <button>Get Data</button>
</Checkout>

sessionDuration

• Type: number
• Default: 86400000 (24 hours)
• Description: Cache duration in milliseconds for successful payments

<Checkout
  proxyURL="https://api.example.com/data"
  sessionDuration={3600000} // 1 hour
>
  <button>Get Data</button>
</Checkout>

Callback Props

onSuccess

• Type: (response: any) => void
• Description: Called when the API request succeeds

<Checkout
  proxyURL="https://api.example.com/data"
  onSuccess={(response) => {
    console.log('Success!', response);
    // Handle successful response
  }}
>
  <button>Get Data</button>
</Checkout>

onError

• Type: (error: Error) => void
• Description: Called when payment or API request fails

<Checkout
  proxyURL="https://api.example.com/data"
  onError={(error) => {
    console.error('Error:', error);
    // Handle error
  }}
>
  <button>Get Data</button>
</Checkout>

Children

children

• Type: ReactElement
• Required: ✅
• Description: Single React element to wrap (typically a button)

<Checkout proxyURL="https://api.example.com/data">
  <button className="custom-button">
    Custom Styled Button
  </button>
</Checkout>

Note: The children prop must be a single React element. Multiple children are not supported.