Payrex React

A collection of React components and utilities for Payrex

Usage

import { PaymentElement } from 'payrex-react';

export function MyCheckoutPage() {
  return (
    <div>
      {/** Some other checkout details and/or components here */}
      <PaymentElement apiKey="YOUR_PUBLIC_KEY" amount={10000} />
    </div>
  )
}

:warning: Note: For NextJS users, you can only use this with client components.

Components

<PaymentElement />

Creates a Payrex Payment Element integration, which is basically a drop-in payment interface inserted in your checkout page.

Props

• apiKey (required) - Your public API key to be used for initializing PayrexJS client-side library.
• amount (required) - The integer value to be used as amount for the payment intent creation.
• paymentMethods - The array of strings to be used as payment_methods for the payment intent creation. Defaults to ["card", "gcash"].
• paymentIntentUrl - The URL to send both amount and payment methods to. Ideally this is a custom API endpoint on your server. You should receive both amount and payment_methods as part of the request payload to create the payment intent. Check out official and community-supported libraries for the programming language of your choice.