@usestack/react

npm install @usestack/react

Peer dependencies: react and react-dom 18 or later.

<StackProvider>

Wrap your app, or just the part with checkout, once.

<StackProvider publishableKey="pk_test_..." appearance={{ accent: '#6d28d9' }}>
  <App />
</StackProvider>

Prop
publishableKey	required	pk_test_… / pk_live_…. A secret key is refused.
apiUrl	https://api.usestack.cc	The Stack API.
appearance		{ accent?: string; radius?: number }: the sheet’s accent colour and corner radius in px.
connectWithStack	true	Reserved for Continue with Stack, which is coming soon. It has no effect yet.
fetch	global fetch	For tests.

usePaymentSheet()

const { presentPaymentSheet, loading } = usePaymentSheet();
const result = await presentPaymentSheet({ clientSecret });

• presentPaymentSheet({ clientSecret }) opens the sheet and resolves with a PaymentResult when it closes. It never rejects. Only one sheet opens at a time: a second call while one is open resolves failed.
• loading is true while the sheet is open.

type PaymentResult =
  | { status: 'succeeded'; paymentIntentId: string }
  | { status: 'canceled' }
  | { status: 'failed'; error: { type: string; message: string } };

useStackSession()

const { isConnected, contactMasked, firstName, signOut } = useStackSession();

isConnected	The customer is signed in to Stack on this site.
contactMasked	Their email, masked: a•••@example.com.
firstName	If they’ve given one.
signOut()	Signs them out of Stack on this site.

<PayWithStackButton>

The branded button. It takes every <button> prop (onClick, disabled, …) plus:

Prop
variant	'dark'	'dark' or 'light'.
loading	false	Shows a spinner and disables the button.

Other exports

• formatMoney(minor, currency): formatMoney('570000', 'NGN') gives "₦5,700".
• StackApiError.
• Types: PaymentResult, PaymentIntent, Appearance.