@sqala/threedsecure-js NPM

3D Secure Vanilla Library

A modern Vanilla library that simplifies the integration of 3D Secure (3DS) authentication for secure payment processing in web applications.

Overview

This library provides a set of utilities to implement 3D Secure authentication flows in your payment applications. It supports the full 3DS authentication lifecycle including directory server interactions, challenges, and result handling.

Features

Complete 3D Secure authentication flow
Handles the entire authentication lifecycle
Type-safe implementation with TypeScript
Responsive challenge rendering
Cancellable authentication processes

Installation

npm install @sqala/threedsecure-js
# or
yarn add @sqala/threedsecure-js

Quick Start

import { ThreeDSecureService } from '@sqala/threedsecure-js';

async function PaymentComponent() {
  const container = document.getElementById('container');
  
  const threeDSecureService = new ThreeDSecureService({
    baseUrl: 'https://api.sqala.tech/core/v1/threedsecure',
    publicKey: 'your-public-key',
    container: container
  });

  const result = await threeDSecureService.execute({
    id: 'authentication-id' // Unique identifier for the authentication
  });

  console.log(result);
}

Development Setup

Prerequisites

Node.js 18+ and npm/yarn
Modern browser with DevTools for debugging

Setting Up the Development Environment

Clone the repository:

git clone https://github.com/rpo-pay/threedsecure-js.git
cd threedsecure-js

Install dependencies:
```
npm install
# or
yarn
```
Start the development server:
```
npm run start:dev
# or
yarn start:dev
```

This will concurrently:

Build the library TypeScript files
Watch for changes in the lib folder
Start Vite's development server

Project Structure

threedsecure-js/
├── lib/                  # Library source code
│   ├── services/         # Service implementation
│   ├── models/           # Data models
│   ├── types/            # TypeScript type definitions
│   └── main.ts           # Main entry point
├── src/                  # Demo application
├── dist/                 # Build output
├── .vscode/              # VS Code configuration
├── tsconfig.lib.json     # TypeScript config for the library
└── vite.config.ts        # Vite configuration

Debugging

The project is configured with source maps for easy debugging. When using VS Code:

Open the project in VS Code
Set breakpoints in your code
Press F5 to start debugging (this launches Edge with the development server)
The debug session will automatically terminate the development server when stopped