@payriff-sdk/react 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,18 @@
+Payriff SDK License
+
+Copyright (c) 2026 Payriff. All rights reserved.
+
+This package (the "Software") is provided by Payriff to let merchants accept payments through
+Payriff's services.
+
+1. You may install and use the Software, and include it unmodified in the build of your own website
+   or application, solely to integrate with and accept payments through Payriff.
+2. You may not modify, sell, sublicense or distribute the Software on its own, publish it under
+   another name, or use it with any payment service other than Payriff.
+3. The Software loads Payriff.js from https://secure.payriff.com. Your use of Payriff's services is
+   governed by your agreement with Payriff.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+NO EVENT SHALL PAYRIFF BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR ITS USE.

package/README.md

@@ -1,3 +1,98 @@
-# Temporary Holding Version
+# @payriff-sdk/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components for Payriff card payments. Card data stays inside Payriff's secure iframes; your app
+never sees it.
+
+```sh
+npm install @payriff-sdk/react
+```
+
+## Ready-made card form
+
+```tsx
+import { PayriffProvider, CardForm, usePayriff } from '@payriff-sdk/react';
+
+export function Checkout({ orderId, clientSecret }: { orderId: string; clientSecret: string }) {
+  return (
+    <PayriffProvider publishableKey="pr_pk_live_…" locale="az">
+      <CardForm orderId={orderId} clientSecret={clientSecret} layout="row" holder />
+      <PayButton />
+    </PayriffProvider>
+  );
+}
+
+function PayButton() {
+  const { pay, canPay, paying, error } = usePayriff();
+  return (
+    <>
+      <button disabled={!canPay || paying} onClick={() => pay()}>{paying ? 'Paying…' : 'Pay'}</button>
+      {error && <p role="alert">{error.message}</p>}
+    </>
+  );
+}
+```
+
+`orderId` and `clientSecret` come from your server, which creates the order with your secret key. With 3DS,
+`pay()` sends the customer to the bank, and the bank sends them back to the order's `redirectUrl`.
+
+`<CardForm>` props: `layout` (`stacked` | `row` | `grouped`), `holder`, `appearance`
+(`{ theme: 'light' | 'dark' | 'auto', accent, radius, font, labels }`), `className`, `onReady`, `onError`.
+
+## Your own layout
+
+```tsx
+import { PayriffProvider, CardFields, CardNumber, CardExpiry, CardCvv, usePayriff } from '@payriff-sdk/react';
+
+<PayriffProvider publishableKey="pr_pk_live_…" theme={{ fontSize: '16px', color: '#111827' }}>
+  <CardFields orderId={orderId} clientSecret={clientSecret}>
+    <label>Card number</label>
+    <CardNumber className="input" />
+    <div className="row">
+      <CardExpiry className="input" />
+      <CardCvv className="input" />
+    </div>
+  </CardFields>
+  <PayButton />
+</PayriffProvider>
+```
+
+Each field is an empty box you style with `className` (border, focus ring via `:focus-within`). The text inside
+follows the provider's `theme`. Show field errors from `usePayriff().errors.number`, `.expiry`, `.cvv`.
+
+## `usePayriff()`
+
+| | |
+|---|---|
+| `ready` | The form is mounted and the order is loaded |
+| `canPay` | Ready, the card is complete, and no payment is running |
+| `paying` | A payment is in progress |
+| `error` | The last error, with a `message` you can show, or `null` |
+| `errors` | Error text per field |
+| `order` | The order (`amount`, `currency`, `merchantName`, …) |
+| `pay()` | Pays with the entered card; resolves with the result, or `null` on failure |
+| `payriff` | The underlying Payriff.js instance |
+
+## 3DS return page
+
+```tsx
+import { PayriffProvider, usePaymentResult } from '@payriff-sdk/react';
+
+function Result({ orderId, clientSecret }: { orderId: string; clientSecret: string }) {
+  const { loading, result, error } = usePaymentResult(orderId, clientSecret);
+  if (loading) return <p>Checking your payment…</p>;
+  if (error) return <p>{error.message}</p>;
+  return <p>Status: {result!.status}</p>;
+}
+
+// <PayriffProvider publishableKey="pr_pk_live_…"><Result … /></PayriffProvider>
+```
+
+This is for the customer only. Your server decides whether the order is paid, from `callbackUrl`.
+
+## Notes
+
+- **Next.js:** the components are client components (`'use client'` is built in) and render an empty container
+  on the server.
+- **Sandbox:** `<PayriffProvider apiBase="https://sb-api.payriff.com" …>` with your sandbox key.
+- **HTTPS:** the card fields only load on HTTPS pages, `https://localhost` included.
+- React 18 or newer. StrictMode is supported.

package/dist/CardFields.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type FormCallbacks } from './useMountedForm.js';
+export interface CardFieldsProps extends FormCallbacks {
+    /** From your server, which created the order with the secret key. */
+    orderId: string;
+    clientSecret: string;
+    /** Your own layout, with <CardNumber>, <CardExpiry>, <CardCvv> and optionally <CardHolder> anywhere inside. */
+    children: ReactNode;
+}
+/**
+ * Card fields in your own layout and styles. Put <CardNumber>, <CardExpiry>, <CardCvv> (and
+ * optionally <CardHolder>) anywhere inside; style them with className. Errors are in usePayriff().errors.
+ */
+export declare function CardFields({ orderId, clientSecret, children, onReady, onError }: CardFieldsProps): import("react").JSX.Element;
+export interface CardFieldProps {
+    className?: string;
+    style?: CSSProperties;
+}
+/** The card number field. Style the box with className; the text inside follows PayriffProvider's `theme`. */
+export declare const CardNumber: {
+    ({ className, style }: CardFieldProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** The expiry date field. */
+export declare const CardExpiry: {
+    ({ className, style }: CardFieldProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** The CVV field. */
+export declare const CardCvv: {
+    ({ className, style }: CardFieldProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** The cardholder name field (optional). */
+export declare const CardHolder: {
+    ({ className, style }: CardFieldProps): import("react").JSX.Element;
+    displayName: string;
+};

package/dist/CardFields.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef } from 'react';
+import { useMountedForm } from './useMountedForm.js';
+const FieldsContext = createContext(null);
+/**
+ * Card fields in your own layout and styles. Put <CardNumber>, <CardExpiry>, <CardCvv> (and
+ * optionally <CardHolder>) anywhere inside; style them with className. Errors are in usePayriff().errors.
+ */
+export function CardFields({ orderId, clientSecret, children, onReady, onError }) {
+    const fields = useRef({});
+    const register = useCallback((field, el) => {
+        if (el)
+            fields.current[field] = el;
+        else
+            delete fields.current[field];
+    }, []);
+    useMountedForm('<CardFields>', (payriff) => {
+        const { number, expiry, cvv, holder } = fields.current;
+        if (!number || !expiry || !cvv) {
+            return Promise.reject({ type: 'sdk', code: 'missing_field', message: '<CardFields> needs <CardNumber>, <CardExpiry> and <CardCvv> inside it' });
+        }
+        return payriff.mount({ orderId, clientSecret, fields: { number, expiry, cvv, holder } });
+    }, [orderId, clientSecret], { onReady, onError });
+    return _jsx(FieldsContext.Provider, { value: register, children: children });
+}
+function field(name, component) {
+    function Field({ className, style }) {
+        const register = useContext(FieldsContext);
+        if (!register)
+            throw new Error(`${component} must be used inside <CardFields>`);
+        return _jsx("div", { ref: (el) => register(name, el), className: className, style: style });
+    }
+    Field.displayName = component.slice(1, -1);
+    return Field;
+}
+/** The card number field. Style the box with className; the text inside follows PayriffProvider's `theme`. */
+export const CardNumber = field('number', '<CardNumber>');
+/** The expiry date field. */
+export const CardExpiry = field('expiry', '<CardExpiry>');
+/** The CVV field. */
+export const CardCvv = field('cvv', '<CardCvv>');
+/** The cardholder name field (optional). */
+export const CardHolder = field('holder', '<CardHolder>');

package/dist/CardForm.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+import type { PayriffAppearance, PayriffCardLayout } from '@payriff-sdk/payriff-js';
+import { type FormCallbacks } from './useMountedForm.js';
+export interface CardFormProps extends FormCallbacks {
+    /** From your server, which created the order with the secret key. */
+    orderId: string;
+    clientSecret: string;
+    /** Default `stacked`. */
+    layout?: PayriffCardLayout;
+    /** Add a cardholder name field. */
+    holder?: boolean;
+    /** Colours, corner radius, font and labels of the ready-made form. */
+    appearance?: PayriffAppearance;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * The ready-made card form: labels, boxes, errors and card brand icon included.
+ * Use inside <PayriffProvider>; pay with usePayriff().pay().
+ */
+export declare function CardForm({ orderId, clientSecret, layout, holder, appearance, className, style, onReady, onError }: CardFormProps): import("react").JSX.Element;

package/dist/CardForm.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useMountedForm } from './useMountedForm.js';
+/**
+ * The ready-made card form: labels, boxes, errors and card brand icon included.
+ * Use inside <PayriffProvider>; pay with usePayriff().pay().
+ */
+export function CardForm({ orderId, clientSecret, layout, holder, appearance, className, style, onReady, onError }) {
+    const container = useRef(null);
+    const appearanceKey = appearance ? JSON.stringify(appearance) : '';
+    useMountedForm('<CardForm>', (payriff) => payriff.mountCard(container.current, {
+        orderId,
+        clientSecret,
+        layout,
+        holder,
+        appearance: appearanceKey ? JSON.parse(appearanceKey) : undefined,
+    }), [orderId, clientSecret, layout, holder, appearanceKey], { onReady, onError });
+    return _jsx("div", { ref: container, className: className, style: style });
+}

package/dist/PayriffProvider.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+import type { PayriffApiBase, PayriffError, PayriffEvents, PayriffField, PayriffInstance, PayriffLocale, PayriffOptions, PayriffOrder, PayriffResult, PayriffTheme } from '@payriff-sdk/payriff-js';
+export interface PayOptions {
+    /** Cardholder name collected in your own input, when the form has no holder field. */
+    holderValue?: string;
+}
+/** A Payriff error with a `message` you can show as is. */
+export type PayriffReactError = PayriffError & {
+    message: string;
+};
+export interface PayriffProviderProps {
+    /** Your publishable key (pr_pk_live_…). Never the secret key. */
+    publishableKey: string;
+    /** Default `https://api.payriff.com`. Use `https://sb-api.payriff.com` for the sandbox. */
+    apiBase?: PayriffApiBase;
+    /** Default `az`. */
+    locale?: PayriffLocale;
+    /** Text styling inside the card fields. With `<CardForm>`, prefer its `appearance`. */
+    theme?: PayriffTheme;
+    /** Move focus number → expiry → CVV automatically. Default `true`. */
+    autoAdvance?: boolean;
+    children?: ReactNode;
+}
+export interface UsePayriff {
+    /** The card form is mounted and the order is loaded. */
+    ready: boolean;
+    /** Ready, every field is valid, and no payment is running: enable your Pay button on this. */
+    canPay: boolean;
+    /** A payment is in progress. */
+    paying: boolean;
+    /** The last error (loading, mounting or paying), or `null`. */
+    error: PayriffReactError | null;
+    /** Current error text per field, as shown to the customer. */
+    errors: Partial<Record<PayriffField, string | null>>;
+    /** The order being paid, once loaded. */
+    order: PayriffOrder | null;
+    /**
+     * Pay with the entered card. With 3DS the customer goes to the bank and comes back to your
+     * redirectUrl, so the promise doesn't resolve. Resolves with the result when no redirect is
+     * needed, or `null` if the payment failed (see `error`).
+     */
+    pay: (options?: PayOptions) => Promise<PayriffResult | null>;
+    /** The underlying Payriff.js instance, for anything not covered here. */
+    payriff: PayriffInstance | null;
+}
+/** What a mounted form reports to the provider. Internal. */
+export interface FormLink {
+    options: PayriffOptions;
+    publishableKey: string;
+    attach(instance: PayriffInstance, order: PayriffOrder): void;
+    detach(instance: PayriffInstance | null): void;
+    change(e: PayriffEvents['change']): void;
+    fail(err: unknown): void;
+    reset(): void;
+}
+export declare function toReactError(err: unknown): PayriffReactError;
+/** Loads Payriff.js once for everything inside it, and shares the payment state with usePayriff(). */
+export declare function PayriffProvider({ publishableKey, apiBase, locale, theme, autoAdvance, children }: PayriffProviderProps): import("react").JSX.Element;
+/** Payment state and actions for the card form inside the nearest <PayriffProvider>. */
+export declare function usePayriff(): UsePayriff;
+/** @internal Used by <CardForm> and <CardFields>. */
+export declare function useFormLink(component: string): FormLink;

package/dist/PayriffProvider.js

@@ -0,0 +1,104 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+const ProviderContext = createContext(null);
+const FALLBACK_MESSAGES = {
+    validation: 'Please check the card details.',
+    network_error: 'Network problem. Please try again.',
+    rate_limited: 'Too many attempts. Please start a new order.',
+    session_expired: 'This payment session has expired. Please start a new order.',
+    order_not_payable: 'This order can no longer be paid.',
+    invalid_public_key: 'Payments are not available on this site.',
+};
+/** Payriff errors are plain objects with a string `type`. A thrown Error/TypeError is something else. */
+function isPayriffError(err) {
+    return !!err && typeof err === 'object' && !(err instanceof Error) && typeof err.type === 'string';
+}
+export function toReactError(err) {
+    if (!isPayriffError(err)) {
+        // Its text could be anything (e.g. "Payriff is not a function"); keep it out of the customer's view.
+        console.error('[payriff] unexpected error:', err);
+        return { type: 'sdk', code: 'unexpected', message: 'Something went wrong. Please try again.' };
+    }
+    const message = ('message' in err && typeof err.message === 'string' && err.message) || FALLBACK_MESSAGES[err.type] || 'Payment failed.';
+    return { ...err, message };
+}
+/** Loads Payriff.js once for everything inside it, and shares the payment state with usePayriff(). */
+export function PayriffProvider({ publishableKey, apiBase, locale, theme, autoAdvance, children }) {
+    const [payriff, setPayriff] = useState(null);
+    const [order, setOrder] = useState(null);
+    const [complete, setComplete] = useState(false);
+    const [errors, setErrors] = useState({});
+    const [paying, setPaying] = useState(false);
+    const [error, setError] = useState(null);
+    const current = useRef(null);
+    // Compare the theme by value, so an inline object doesn't remount the form on every render.
+    const themeKey = theme ? JSON.stringify(theme) : '';
+    const options = useMemo(() => ({ apiBase, locale, autoAdvance, theme: themeKey ? JSON.parse(themeKey) : undefined }), [apiBase, locale, autoAdvance, themeKey]);
+    const link = useMemo(() => ({
+        options,
+        publishableKey,
+        attach(instance, loaded) {
+            current.current = instance;
+            setPayriff(instance);
+            setOrder(loaded);
+        },
+        detach(instance) {
+            if (instance && current.current !== instance)
+                return;
+            current.current = null;
+            setPayriff(null);
+            setOrder(null);
+            setComplete(false);
+            setPaying(false);
+        },
+        change(e) {
+            setComplete(e.complete);
+            setErrors((prev) => (prev[e.field] === e.error ? prev : { ...prev, [e.field]: e.error }));
+        },
+        fail(err) {
+            setError(toReactError(err));
+        },
+        reset() {
+            setErrors({});
+            setError(null);
+        },
+    }), [options, publishableKey]);
+    const pay = useCallback(async (opts) => {
+        const instance = current.current;
+        if (!instance)
+            return null;
+        setPaying(true);
+        setError(null);
+        try {
+            return await instance.confirmCardPayment(opts);
+        }
+        catch (err) {
+            setError(toReactError(err));
+            return null;
+        }
+        finally {
+            setPaying(false);
+        }
+    }, []);
+    const state = useMemo(() => {
+        const ready = payriff !== null && order !== null;
+        return { ready, canPay: ready && complete && !paying, paying, error, errors, order, pay, payriff };
+    }, [payriff, order, complete, paying, error, errors, pay]);
+    const value = useMemo(() => ({ state, link }), [state, link]);
+    return _jsx(ProviderContext.Provider, { value: value, children: children });
+}
+function useProviderContext(hook) {
+    const ctx = useContext(ProviderContext);
+    if (!ctx)
+        throw new Error(`${hook} must be used inside <PayriffProvider>`);
+    return ctx;
+}
+/** Payment state and actions for the card form inside the nearest <PayriffProvider>. */
+export function usePayriff() {
+    return useProviderContext('usePayriff()').state;
+}
+/** @internal Used by <CardForm> and <CardFields>. */
+export function useFormLink(component) {
+    return useProviderContext(component).link;
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { PayriffProvider, usePayriff } from './PayriffProvider.js';
+export type { PayriffProviderProps, UsePayriff, PayriffReactError, PayOptions } from './PayriffProvider.js';
+export { CardForm } from './CardForm.js';
+export type { CardFormProps } from './CardForm.js';
+export { CardFields, CardNumber, CardExpiry, CardCvv, CardHolder } from './CardFields.js';
+export type { CardFieldsProps, CardFieldProps } from './CardFields.js';
+export { usePaymentResult } from './usePaymentResult.js';
+export type { UsePaymentResult } from './usePaymentResult.js';
+export type { FormCallbacks } from './useMountedForm.js';
+export type { PayriffAppearance, PayriffCardLayout, PayriffError, PayriffField, PayriffLocale, PayriffOrder, PayriffResult, PayriffTheme, } from '@payriff-sdk/payriff-js';

package/dist/index.js

@@ -0,0 +1,5 @@
+'use client';
+export { PayriffProvider, usePayriff } from './PayriffProvider.js';
+export { CardForm } from './CardForm.js';
+export { CardFields, CardNumber, CardExpiry, CardCvv, CardHolder } from './CardFields.js';
+export { usePaymentResult } from './usePaymentResult.js';

package/dist/useMountedForm.d.ts

@@ -0,0 +1,13 @@
+import { type PayriffInstance, type PayriffOrder } from '@payriff-sdk/payriff-js';
+import { type PayriffReactError } from './PayriffProvider.js';
+export interface FormCallbacks {
+    /** The form is mounted and the order is loaded. */
+    onReady?: (order: PayriffOrder) => void;
+    /** Loading or mounting failed. Also available as `usePayriff().error`. */
+    onError?: (error: PayriffReactError) => void;
+}
+/**
+ * Creates a Payriff.js instance, mounts with `mount`, and unmounts on cleanup or when `deps` change.
+ * A new instance per mount keeps React StrictMode's mount → unmount → mount clean.
+ */
+export declare function useMountedForm(component: string, mount: (payriff: PayriffInstance) => Promise<PayriffOrder>, deps: unknown[], { onReady, onError }: FormCallbacks): void;

package/dist/useMountedForm.js

@@ -0,0 +1,49 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { loadPayriff } from '@payriff-sdk/payriff-js';
+import { toReactError, useFormLink } from './PayriffProvider.js';
+/**
+ * Creates a Payriff.js instance, mounts with `mount`, and unmounts on cleanup or when `deps` change.
+ * A new instance per mount keeps React StrictMode's mount → unmount → mount clean.
+ */
+export function useMountedForm(component, mount, deps, { onReady, onError }) {
+    const link = useFormLink(component);
+    // Latest callbacks without remounting when the parent passes new arrow functions.
+    const latest = useRef({ mount, onReady, onError });
+    latest.current = { mount, onReady, onError };
+    useEffect(() => {
+        let cancelled = false;
+        let instance = null;
+        link.reset();
+        const fail = (err) => {
+            if (cancelled)
+                return;
+            const error = toReactError(err);
+            link.fail(error);
+            latest.current.onError?.(error);
+        };
+        loadPayriff(link.publishableKey, link.options).then(async (payriff) => {
+            if (cancelled || !payriff)
+                return; // unmounted already, or server rendering
+            instance = payriff;
+            payriff.on('change', (e) => link.change(e));
+            try {
+                const order = await latest.current.mount(payriff);
+                if (cancelled)
+                    return;
+                link.attach(payriff, order);
+                latest.current.onReady?.(order);
+            }
+            catch (err) {
+                if (err?.code !== 'unmounted')
+                    fail(err);
+            }
+        }, fail);
+        return () => {
+            cancelled = true;
+            instance?.unmount();
+            link.detach(instance);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [link, ...deps]);
+}

package/dist/usePaymentResult.d.ts

@@ -0,0 +1,14 @@
+import { type PayriffResult } from '@payriff-sdk/payriff-js';
+import { type PayriffReactError } from './PayriffProvider.js';
+export interface UsePaymentResult {
+    /** Still waiting for a final status. */
+    loading: boolean;
+    /** `{ status, orderId, … }`, or `{ status: 'PENDING', timedOut: true }` if it took too long. */
+    result: PayriffResult | null;
+    error: PayriffReactError | null;
+}
+/**
+ * For your 3DS return page (redirectUrl): waits for the order's final status.
+ * Shows the customer the outcome only; your server confirms the payment via callbackUrl.
+ */
+export declare function usePaymentResult(orderId: string | null | undefined, clientSecret: string | null | undefined): UsePaymentResult;

package/dist/usePaymentResult.js

@@ -0,0 +1,27 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { loadPayriff } from '@payriff-sdk/payriff-js';
+import { toReactError, useFormLink } from './PayriffProvider.js';
+/**
+ * For your 3DS return page (redirectUrl): waits for the order's final status.
+ * Shows the customer the outcome only; your server confirms the payment via callbackUrl.
+ */
+export function usePaymentResult(orderId, clientSecret) {
+    const link = useFormLink('usePaymentResult()');
+    const [state, setState] = useState({ loading: true, result: null, error: null });
+    useEffect(() => {
+        if (!orderId || !clientSecret) {
+            setState({ loading: false, result: null, error: toReactError({ type: 'sdk', code: 'missing_order', message: 'No order to check' }) });
+            return;
+        }
+        let cancelled = false;
+        setState({ loading: true, result: null, error: null });
+        loadPayriff(link.publishableKey, link.options)
+            .then((payriff) => payriff?.waitForResult(orderId, clientSecret))
+            .then((result) => { if (!cancelled && result)
+            setState({ loading: false, result, error: null }); }, (err) => { if (!cancelled)
+            setState({ loading: false, result: null, error: toReactError(err) }); });
+        return () => { cancelled = true; };
+    }, [link, orderId, clientSecret]);
+    return state;
+}

package/package.json

@@ -1,6 +1,39 @@
 {
   "name": "@payriff-sdk/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "React components for Payriff.js card payments",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": false,
+  "keywords": ["payriff", "payments", "card", "3ds", "react"],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.json",
+    "test": "npm run build && node --test test/*.test.js",
+    "prepublishOnly": "npm test"
+  },
+  "dependencies": {
+    "@payriff-sdk/payriff-js": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "5.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}