Weavr Component Integration Guide

Build payment and banking features using Weavr's API and secure UI components.

Architecture Overview

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Your App UI   │────▶│  Weavr Secure   │────▶│   Weavr API     │
│                 │     │  UI Components  │     │                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                       │                       │
        │                       ▼                       │
        │               Tokenized Data                  │
        │               (never raw PII)                 │
        │                       │                       │
        └───────────────────────┴───────────────────────┘
                        Your Backend

Quick Start

1. Setup Secure UI

<script src="https://sandbox.weavr.io/app/secure/static/client.1.js"></script>

window.OpcUxSecureClient.init("{{ui_key}}");

2. Create Identity (Server-side)

// POST /multi/corporates or /multi/consumers
const response = await fetch('https://sandbox.weavr.io/multi/corporates', {
  method: 'POST',
  headers: {
    'api-key': API_KEY,
    'programme-key': PROGRAMME_KEY,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    rootUser: { name, surname, email, mobile, companyPosition, dateOfBirth },
    company: { type, name, registrationNumber, registrationCountry, businessAddress },
    baseCurrency: 'GBP'
  })
});

3. Secure Password Setup (Client-side)

var form = window.OpcUxSecureClient.form();
var input = form.input("p", "password", { placeholder: "Create Password" });
input.mount(document.getElementById("password-container"));

form.tokenize(function(tokens) {
  // Send tokens.password to your server - never see raw password
});

Key Concepts

Component Categories

Input Components (Collect Sensitive Data)

• password / confirmPassword - Authentication credentials
• passCode / confirmPassCode - PIN-based authentication
• cardPin - Physical card PIN capture

Display Components (Show Sensitive Data)

• cardNumber - Full card number display
• cvv - Card security code display
• pin - Existing PIN display

Verification Components

• consumer_kyc() - Consumer identity verification
• kyc() - Director/representative KYC
• kyb() - Business verification

Common Flows

See references/flows.md for complete implementation patterns:

• Corporate Onboarding
• Consumer Onboarding
• Card Issuance & Management
• Payment Transfers
• Authentication & Step-up

API Reference

Full API documentation: https://weavr-multi-api.redoc.ly/

See references/api-quick-ref.md for endpoint summary.

Styling

See references/styling.md for component customization.