Skip to main content
React component and hook for integrating Chainrails payments into your app. Parameters:
  • session_url: Your server endpoint for creating payment sessions.
  • recipient: Your wallet address to receive payments/deposits.
  • destinationChain: The blockchain network to receive payments to.
  • token: The token/currency you want to receive.
  • amount: Optional. The amount to be paid. If omitted or set to 0, the user will be prompted to enter their own amount (useful for flexible deposits or donations).
Setting up the session endpoint: See the Quickstart guide for detailed instructions on creating your backend session endpoint with examples for Next.js, Express.js, and other frameworks.
import { chains, tokens, PaymentModal, usePaymentSession } from "@chainrails/react";

function App() {
  const cr = usePaymentSession({
    session_url: "https://your-server.com/create-session",
    recipient: "0x4F41BCf288E718A36c1e6919c2Dfc2E07d51c675",
    destinationChain: chains.BASE,
    token: tokens.USDC,
    amount: 1,
    onCancel: () => {
      console.log("Payment Cancelled");
    },
    onSuccess: () => {
      console.log("Payment Successful");
    },
  });

  return (
    <div>
      <button onClick={cr.open}> Open Modal </button>
      <PaymentModal {...cr} />
    </div>
  );
}