Checkout Form

A payment checkout form with card details and billing fields.

Preview · Checkout Form

Code

HTML · @primus/ui-core

<div class="card" style="max-width:360px;padding:1.25rem">
  <h3 style="margin:0 0 1rem;font-size:0.975rem">Payment Details</h3>
  <div class="vstack">
    <label>Card number <input type="text" placeholder="4242 4242 4242 4242" /></label>
    <div class="hstack">
      <label style="flex:1">Expiry <input type="text" placeholder="MM/YY" /></label>
      <label style="flex:0 0 90px">CVV <input type="text" placeholder="•••" /></label>
    </div>
    <label>Name on card <input type="text" placeholder="Jane Doe" /></label>
    <button>Pay $499.00</button>
  </div>
</div>

React

import { PrimusCheckoutForm } from '@/components/ui/primus-checkout-form';

<PrimusCheckoutForm
  amount={499}
  currency="USD"
  description="Pro Plan subscription"
  onPaymentComplete={(paymentId) => navigate('/success')}
  onCancel={() => navigate(-1)}
/>

Angular

<primus-checkout-form [amount]="499" currency="USD"
  [apiUrl]="'https://api.yourdomain.com'"
  (onSuccess)="handlePayment($event)" (onError)="handleError($event)">
</primus-checkout-form>

Props

Prop	Type	Default	Description
amount	number	required	Charge amount (e.g. 499)
currency	string	'USD'	Currency code
description	string	—	Payment description shown on form
onPaymentComplete	(paymentId: string) => void	—	Called when payment succeeds
onCancel	() => void	—	Called when the user cancels

Version history

See the Changelog for version history and breaking changes.