@verapay/verapay-js 0.0.2 → 0.0.3

package/README.md

@@ -15,7 +15,7 @@ A simple, PCI-compliant TypeScript SDK for Stripe payment processing.
 ## Installation
 
 ```bash
-npm install verapay-js
+npm install @verapay/verapay-js
 ```
 
 ## Quick Start
@@ -23,7 +23,7 @@ npm install verapay-js
 Initialize the SDK with your `merchantId` and the payment details — no backend setup required:
 
 ```typescript
-import { VerapayClient } from 'verapay-js';
+import { VerapayClient } from '@verapay/verapay-js';
 
 const verapay = new VerapayClient({
   merchantId: 'your-merchant-id',
@@ -44,7 +44,7 @@ const result = await verapay.processPayment({
 ## Processing Payments
 
 ```typescript
-import { VerapayClient, ValidationError, PaymentError } from 'verapay-js';
+import { VerapayClient, ValidationError, PaymentError } from '@verapay/verapay-js';
 
 const verapay = new VerapayClient({
   merchantId: 'your-merchant-id',
@@ -100,6 +100,26 @@ await verapay.mountAddress('#billing-address', 'billing');
 await verapay.mountAddress('#shipping-address', 'shipping');
 ```
 
+### Styling the Payment Form and Address Element
+
+When using `mountPaymentForm` or `mountAddress`, pass an `appearance` object to customise their look. See [Stripe's Appearance API](https://stripe.com/docs/elements/appearance-api) for the full set of options.
+
+> **Note:** Styling is split across two APIs due to a Stripe limitation. `mountPaymentForm` and `mountAddress` use newer Stripe elements that support the `appearance` API. `mountCardNumber`, `mountCardExpiry`, and `mountCardCvc` use older Stripe element types that predate `appearance` and only support per-element `style` configuration via `elementsConfig`.
+
+```typescript
+const verapay = new VerapayClient({
+  merchantId: 'your-merchant-id',
+  paymentData: { amount: 5000, currency: 'gbp' },
+  appearance: {
+    theme: 'stripe',
+    variables: {
+      colorPrimary: '#6200ee',
+      fontFamily: 'Inter, sans-serif',
+    },
+  },
+});
+```
+
 ### Styling Individual Form Elements
 
 > This section applies only when mounting individual form elements (`mountCardNumber`, `mountCardExpiry`, `mountCardCvc`). It does not apply to `mountPaymentForm`.
@@ -150,16 +170,7 @@ const verapay = new VerapayClient({
 
 #### Container styling
 
-The card field containers are standard `div` elements in your page — style them with your own CSS:
-
-```css
-.card-field {
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 12px;
-  background: white;
-}
-```
+The SDK mounts Stripe Elements into whichever `div` selectors you provide. Style those containers however you like using your own CSS — there are no SDK-specific class names.
 
 #### Locale
 
@@ -202,7 +213,7 @@ import {
   ValidationError,
   PaymentError,
   ErrorFormatter,
-} from 'verapay-js';
+} from '@verapay/verapay-js';
 
 try {
   await verapay.processPayment(request);
@@ -230,7 +241,7 @@ import type {
   ElementsConfig,
   CardValidation,
   ErrorCode,
-} from 'verapay-js';
+} from '@verapay/verapay-js';
 ```
 
 ## Extension Architecture
@@ -238,7 +249,7 @@ import type {
 Use extensions to hook into the payment lifecycle:
 
 ```typescript
-import type { PaymentExtension } from 'verapay-js';
+import type { PaymentExtension } from '@verapay/verapay-js';
 
 const analyticsExtension: PaymentExtension = {
   name: 'analytics',
@@ -304,10 +315,10 @@ new VerapayClient(config: VerapayConfig)
 |---|---|---|---|
 | `merchantId` | `string` | Yes | Your merchant ID from onboarding |
 | `paymentData` | `PaymentData` | Yes | Amount, currency, and optional partner fee |
-| `appearance` | `Appearance` | No | Stripe Elements appearance object |
+| `appearance` | `Appearance` | No | Styles `mountPaymentForm` and `mountAddress` elements |
 | `locale` | `StripeElementLocale` | No | Locale for Stripe Elements |
 | `fonts` | `StripeElementsOptions['fonts']` | No | Custom fonts for Stripe Elements |
-| `elementsConfig` | `ElementsConfig` | No | Style and placeholder overrides for individual elements |
+| `elementsConfig` | `ElementsConfig` | No | Styles `mountCardNumber`, `mountCardExpiry`, and `mountCardCvc` elements |
 
 #### PaymentData
 
@@ -331,13 +342,13 @@ new VerapayClient(config: VerapayConfig)
 
 #### ProcessPaymentRequest
 
-| Property | Type | Description |
-|---|---|---|
-| `description` | `string` | Payment description |
-| `metadata` | `Record<string, string>` | Arbitrary key-value metadata |
-| `customerEmail` | `string` | **Required.** Customer email address |
-| `customerFirstName` | `string` | Customer first name |
-| `customerLastName` | `string` | Customer last name |
+| Property | Type | Required | Description |
+|---|---|---|---|
+| `customerEmail` | `string` | Yes | Customer email address |
+| `description` | `string` | No | Payment description |
+| `metadata` | `Record<string, string>` | No | Arbitrary key-value metadata |
+| `customerFirstName` | `string` | No | Customer first name |
+| `customerLastName` | `string` | No | Customer last name |
 
 #### PaymentResult
 
@@ -356,7 +367,5 @@ This software is proprietary and confidential. Unauthorised copying, distributio
 
 ## Support
 
-For issues and questions:
-- [GitHub Issues](https://github.com/your-org/verapay-js/issues)
-- [Stripe Documentation](https://stripe.com/docs)
+For issues and questions, contact the Lopay engineering team.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verapay/verapay-js",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Simple TypeScript SDK for Stripe payment processing",
   "type": "module",
   "main": "./dist/index.cjs",