@magensa/te-connect-react

React component library for use with Token Exchange Connect (TEConnect).

This package is a Vite library-mode port of the original webpack build. The public API and exports are identical to the prior release.

Installation

npm install @magensa/te-connect @magensa/te-connect-react

Peer Dependencies

| Package | Required version | |------------|-----------------| | react | >=18.1.0 | | react-dom | >=18.1.0 |

Quick Start

import { TEConnect, CardEntry, useTeConnect } from '@magensa/te-connect-react';
import { createTEConnect } from '@magensa/te-connect';

const teConnectInstance = createTEConnect('__publicKeyGoesHere__');

const App = () => (
    <TEConnect teConnect={teConnectInstance}>
        <MyForm />
    </TEConnect>
);

See the full README in the source repository for the complete API reference, styles documentation, 3DS integration guide, and Payment Request (Apple Pay / Google Pay) documentation.

Build Outputs

| File | Format | Purpose | |-----------------------------|--------|------------------------------| | dist/te-connect-react.js | ESM | Bundlers, Vite, Next.js, etc | | dist/te-connect-react.cjs | CJS | Node.js, webpack 4, Jest | | dist/index.d.ts | DTS | TypeScript declarations |

React is not bundled — it is a peer dependency.

Development

npm install
npm run build        # Vite build + copy declarations
npm test             # Vitest unit tests
npm run test:watch   # Watch mode
npm run typecheck    # JSDoc type-check via tsc

License

MIT