TkxCheckout

Mock data — no real transaction. The payment step is disabled in this demo.

Step 1 of 3

Shipping address

PIN code

City

State

Continue to payment

Order summary

TekiVex T-shirt ×2₹998.00

Quantum mug ×1₹349.00

Sticker pack ×3₹297.00

---

Tax (18%)₹295.92

Shipping₹49.00

Total₹1,988.92

import { TkxCheckout } from 'tekivex-ui';

<TkxCheckout
  items={items}
  currency="INR"
  taxRate={0.18}
  shipping={49}
  paymentConfigFor={async (address) => {
    // Ask your server to create the order, then return the provider config.
    const { orderId } = await fetch('/api/orders', { method: 'POST' }).then(r => r.json());
    return {
      provider: 'razorpay',
      publicKey: 'rzp_live_...',
      orderId,
      amount: 49900,
      currency: 'INR',
    };
  }}
  onComplete={({ address, payment }) => console.log('paid', payment.id, address)}
/>

A pre-assembled three-step checkout. Step 1 collects shipping address, step 2 takes payment details (delegated to your provider’s SDK), step 3 shows a review-and-confirm screen with line totals + tax.

Props

Prop	Type	Notes
items	CheckoutLineItem[]	line-item array (required)
currency	string	ISO-4217 (required)
paymentConfigFor	(address) => PaymentConfig | Promise<PaymentConfig>	builds the razorpay / stripe / square config after the address step (required)
onComplete	({ address, payment }) => void	fires after successful payment (required)
onCancel	() => void	cancel / failure
taxRate	number	0–1, optional
shipping	number	flat fee, optional
locale	string	currency formatting, defaults to navigator language
initialAddress	Partial<AddressValue>	pre-fill from user profile

What it composes

• TkxAddressInput for step 1
• TkxPaymentButton for step 2
• TkxStepper for step navigation
• TkxResult for the success screen

Accessibility

• Steps are a <nav aria-label="Checkout progress"> landmark
• Going back is allowed; previously-entered values are preserved in form state
• The “Pay now” button is disabled until validation passes — never visually-only

Testing

See tests/TkxCheckout.test.tsx — 7 tests covering step transitions and provider switching.