Checkout Form

A payment checkout form with card details and billing fields.

Preview · Checkout Form

Code

HTML · @primus/ui-core
React
Angular

<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>

import { CheckoutForm } from 'primus-react-ui';

<CheckoutForm amount={499} currency="USD" apiUrl="https://api.yourdomain.com"
  onSuccess={(result) => navigate('/success')}
  onError={(err) => setError(err)} />

<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
`currency`	`string`	'USD'	Currency code
`apiUrl`	`string`	—	Payment API URL

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props