TkxPaymentButton

Mock config, buttons disabled — no SDK loads, no real payment

Pay ₹499Pay with Stripe

import { TkxPaymentButton } from 'tekivex-ui';

<TkxPaymentButton
  config={{
    provider: 'razorpay',
    publicKey: 'rzp_live_...',
    orderId: 'order_...', // server-generated
    amount: 49900,        // paise
    currency: 'INR',
  }}
  onSuccess={(result) => console.log(result.id)}
  onFailure={(err) => console.error(err.message)}
>
  Pay ₹499
</TkxPaymentButton>

A button that loads the payment provider’s SDK lazily on first click. No SDK is downloaded on page load — keeps your bundle clean and your CSP strict. Falls back to a clear error message if the SDK fails to load (blocked by ad-blocker, network error, etc.).

Props

Prop	Type	Notes
provider	'stripe' | 'razorpay' | 'paypal'	required
amount	number	smallest unit (paise / cents)
currency	ISO-4217	required
publicKey	string	provider’s publishable / public key
onSuccess	(payment) => void	required
onError	(err) => void	required
disabled	boolean	also disables during SDK load

Sizes

size='sm' | 'md' | 'lg' (still mock + disabled)

Pay ₹499Pay ₹499Pay ₹499

Loading state

The button shows a spinner and is aria-busy while:

1. SDK script is downloading (first click only)
2. The provider’s modal is open

Accessibility

• Real <button> element with aria-busy and aria-live="polite" status
• Error messages render in an <Alert role="alert"> below the button
• Keyboard-triggerable; payment modal handles focus trap

Testing

See tests/TkxPaymentButton.test.tsx — 6 tests covering provider switching

• SDK-load failure paths.