@furlpay/elements

Embeddable React components for Furlpay stablecoin checkout and secure card display. The sensitive surfaces (card PAN/CVV) render inside a Furlpay-hosted iframe, so raw card data never enters your DOM — the same isolation model as Stripe Elements.

• React 18+ peer dependency; no other runtime dependencies.
• TypeScript types included.
• Works with any bundler; ships CommonJS with type declarations.

Installation

npm install @furlpay/elements

FurlpayCheckoutButton

One-tap stablecoin payment button. Opens the wallet flow (WalletConnect, injected wallet, or passkey), creates a checkout session against your Furlpay backend, and reports the settled transaction.

import { FurlpayCheckoutButton } from "@furlpay/elements";

export function Checkout() {
  return (
    <FurlpayCheckoutButton
      amount={49.99}
      currency="USD"
      token="USDC"
      publishableKey={process.env.NEXT_PUBLIC_FURLPAY_PK!}
      onSuccess={({ transactionHash, amount }) => {
        console.log(`Paid ${amount} — tx ${transactionHash}`);
      }}
      onError={(err) => console.error(err)}
    />
  );
}

Props

Prop	Type	Default	Description
amount	number	—	Payment amount in currency units. Required.
currency	string	"USD"	Display/settlement currency.
token	"USDC" | "USDT" | "EURC" | "PYUSD"	"USDC"	Stablecoin used to pay.
publishableKey	string	—	Your publishable key (pk_...). Required. Safe for the browser.
onSuccess	(r: { transactionHash: string; amount: number }) => void	—	Called after a successful signed payment.
onError	(err: Error) => void	—	Called when the flow fails or is rejected.
baseUrl	string	Furlpay hosted	Point at your own deployment (http://localhost:3000 in development).
label	string	"Pay {currency} {amount} with {token}"	Custom button label.

The button manages its own state machine (idle, connecting, signing, done) and disables itself while a payment is in flight. In sandbox mode (no reachable backend) it resolves with a simulated transaction hash so UI flows can be built offline.

FurlpaySecureCardInput

PCI-scope-free display of a virtual card's full number and CVV. The details render inside a Furlpay-hosted iframe keyed by an ephemeral client secret that your server obtains — the secret expires and card data never touches your JavaScript.

import { FurlpaySecureCardInput } from "@furlpay/elements";

// Server side: const { cardClientSecret } = await furlpay.cards.issue(...)
<FurlpaySecureCardInput cardClientSecret={cardClientSecret} height={200} />

Props

Prop	Type	Default	Description
cardClientSecret	string	—	Ephemeral client secret from a server-side card call. Required.
baseUrl	string	Furlpay hosted	Origin serving the secure card view.
height	number	180	Iframe height in pixels.

Grouped export

Both components are also available under a single namespace:

import { FurlpayElements } from "@furlpay/elements";

<FurlpayElements.FurlpayCheckoutButton ... />

Related

• furlpay-node — server-side SDK (create sessions, issue cards)
• furlpay-solana-actions-template — shareable checkout links
• Documentation

Contributing and security

See CONTRIBUTING.md. Report vulnerabilities privately per SECURITY.md.

License

MIT