@crypax/react

English | 한국어

@crypax/react

React bindings for Crypax — crypto payment gateway for any EVM chain.

Install

npm install @crypax/react

@crypax/js is included as a dependency — no need to install separately.

Quick Start

1. Wrap with Provider

import { CrypaxProvider } from '@crypax/react'

function App() {
  return (
    <CrypaxProvider publishableKey="pk_live_xxxxx">
      <Checkout />
    </CrypaxProvider>
  )
}

2. Use CheckoutButton

import { CheckoutButton } from '@crypax/react'

function Checkout() {
  return (
    <CheckoutButton
      clientSecret={clientSecret}
      onSuccess={(result) => console.log('Paid!', result.txHash)}
      onCancel={() => console.log('Cancelled')}
      onError={(err) => console.error(err)}
    >
      Pay 10 PLM
    </CheckoutButton>
  )
}

3. Or use hooks for full control

import { useConfirmPayment, useWallet } from '@crypax/react'

function CustomCheckout({ clientSecret }: { clientSecret: string }) {
  const { confirmPayment, status, result, error, reset } = useConfirmPayment()
  const { wallet, detect } = useWallet()

  return (
    <div>
      <p>Status: {status}</p>
      <button onClick={() => confirmPayment(clientSecret)}>
        {status === 'idle' ? 'Pay Now' : 'Processing...'}
      </button>
      {result?.status === 'confirmed' && <p>TX: {result.txHash}</p>}
      {error && <p>Error: {error}</p>}
    </div>
  )
}

API

<CrypaxProvider>

Prop	Type	Required	Description
publishableKey	string	Yes	Your Crypax publishable key
options	CrypaxConfig	No	Chain, theme, locale config

<CheckoutButton>

Prop	Type	Required	Description
clientSecret	string	Yes	From server payments.create()
onSuccess	(result) => void	No	Called on confirmed payment
onCancel	() => void	No	Called when user cancels
onError	(error: string) => void	No	Called on failure
className	string	No	Custom CSS class
disabled	boolean	No	Disable button

useConfirmPayment()

Returns { confirmPayment, status, result, error, reset }

useWallet()

Returns { wallet, loading, detect }

useCrypax()

Returns the underlying Crypax instance.

License

MIT