Payments UI

Recura's financial orchestration layer provides a high-fidelity interface for payment gateways, 3D card customization, and automated billing logic.

Interactive Card Primitive

3D Transformed UI Layer

3D Card Controller

Full 3D rotation with SVG design patterns and dynamic HSL gradient mapping.

Chip
Visa

4532 •••• •••• 2384

Holder

ALEXANDER RECURA

Expiry

12 / 30

123
CVV

PREVIEW ONLY – This card is a property of the Recura Design System. Restricted Use.

<div className="perspective-1000">
  <div className={cn("flip-card-inner", isFlipped && "active")}>
    <CardFront design={activeDesign} />
    <CardBack design={activeDesign} />
  </div>
</div>

Gradient Registry

SVG Design Patterns

SIM Style Selection

Premium

Radius Control

24px

Gateway Providers

Service Integration UI

S
Connected

Stripe

Live API Key Configuration

Configure settings
P
Action Required

PayPal

Live API Key Configuration

Configure settings
P
Disconnected

Paystack

Live API Key Configuration

Configure settings

Billing Optimization

Logic & Automation Controls

Autobilling Logic

Automated payment retry orchestration.

Current Status

Active & Recursive

Proration Threshold

Manage mid-cycle upgrade accounting.

Conservative70% OffsetAggressive
Enterprise Payment Module
// Financial Interface Orchestration
<PaymentController 
  gateway="Stripe"
  design={{
    background: "HSL(240, 100%, 50%)",
    pattern: "WaveStructural",
    radius: "24px"
  }}
  controls={{
    isAutobilling: true,
    prorationThreshold: 0.75
  }}
/>