@gatepayfe/pay-js-react

React bindings for @gatepayfe/pay-js. Provides a declarative <GatePayElement /> component.

Install

npm install @gatepayfe/pay-js @gatepayfe/pay-js-react react react-dom

Peer dependencies: react ^18.2.0 or ^19.0.0, react-dom ^18.2.0 or ^19.0.0.

Quick start

import { GatePayElement } from '@gatepayfe/pay-js-react'

export function Checkout() {
  return (
    <GatePayElement
      gatePay={{
        clientId: 'your-client-id',
        locale: 'en',
      }}
      payment={{
        clientSessionSecret: 'cs_xxx',
        onReady: () => console.log('ready'),
        onSuccess: result => console.log('paid', result),
        onError: error => console.error(error),
      }}
    />
  )
}

Next.js App Router

This package is marked with "use client". Import it only in Client Components.

'use client'

import { GatePayElement } from '@gatepayfe/pay-js-react'

API

<GatePayElement />

| Prop | Type | Required | Description | |------|------|----------|-------------| | gatePay | GatePayOptions | yes | Global SDK config | | payment | PaymentElementOptions | yes | Payment session config and callbacks |

gatePay (GatePayOptions)

| Option | Type | Required | Description | |--------|------|----------|-------------| | clientId | string | yes | Merchant client ID | | locale | 'ar' \| 'br' \| 'cn' \| 'en' \| 'es' \| 'fr' \| 'id' \| 'ja' \| 'pt' \| 'ru' \| 'tw' \| 'uk' \| 'vn' | no | Global locale, default browser language |

Supported locale values:

| Code | Language | |------|----------| | ar | Arabic | | br | Português (Brasil) | | cn | 简体中文 | | en | English | | es | Español | | fr | Français (Afrique) | | id | Bahasa Indonesia | | ja | 日本語 | | pt | Português (Portugal) | | ru | Русский | | tw | 繁體中文 | | uk | Українська | | vn | Tiếng Việt |

payment (PaymentElementOptions)

| Option | Type | Required | Description | |--------|------|----------|-------------| | clientSessionSecret | string | yes | Session secret from backend | | paymentMethods | ('GatePay' \| 'Web3Pay')[] | no | Filter payment methods, default all | | onReady | () => void | no | Iframe rendered | | onSuccess | (result) => void | no | Payment / authorization succeeded | | onCancel | () => void | no | User cancelled | | onError | (error) => void | no | Payment failed | | onExpired | () => void | no | Order expired | | onSessionExpired | () => void | no | Session secret expired |

Ref API

import { useRef } from 'react'
import { GatePayElement, type GatePayElementRef } from '@gatepayfe/pay-js-react'

const ref = useRef<GatePayElementRef>(null)

// ref.current?.updateLocale('cn')
// ref.current?.destroy()

Re-exports

This package also re-exports core APIs from @gatepayfe/pay-js (GatePay, CheckoutBridge, types, etc.).

License

UNLICENSED — contact Gate Pay for usage terms.