@croem/croem-card-widget

An Angular UI library designed to provide a secure, validation-compliant, and responsive card payment interface. It facilitates card tokenization, card detail management, and transaction execution.

Features

• Robust Card Validation: Uses advanced validation rules for card numbers, expiration dates, and CVVs.
• AMP Theme Compliant: Clean, modern, responsive styling designed to integrate with the AMP ecosystem.
• Multiple Integration Modes:
  • Add Card Widget: Collect card details securely to generate tokenized credentials.
  • Update Card Widget: Manage and update existing tokenized cards.
  • Payment Widget: Execute sales or pre-authorization transactions directly using card tokens.

Installation

Install the package via npm:

npm install @croem/croem-card-widget

Dependencies

Ensure your project has the required peer dependencies installed:

npm install card-validator

Setup & Usage

1. Import the Module

Import CroemCardWidgetModule into your Angular application module:

import { NgModule } from '@angular/core';
import { CroemCardWidgetModule } from '@croem/croem-card-widget';

@NgModule({
  imports: [
    CroemCardWidgetModule
  ]
})
export class AppModule { }

2. Available Components

The library provides three main components for different stages of the payment lifecycle:

A. Add Card Component (croem-add-card-widget)

Used for collecting new card details and generating a secure payment token.

HTML Template:

<croem-add-card-widget 
  [inputParamsForWidget]="inputParams" 
  (fieldResponseEmitter)="onFormFieldsReceived($event)" 
  (widgetResponseEmitter)="onApiResponse($event)" 
  (HandleError)="onError($event)">
</croem-add-card-widget>

B. Update Card Component (croem-update-card-widget)

Used for editing details of an already registered card token.

HTML Template:

<croem-update-card-widget 
  [inputParamsForWidgetForUpdate]="inputParams" 
  (fieldResponseEmitter)="onFormFieldsReceived($event)" 
  (widgetResponseEmitter)="onApiResponse($event)" 
  (HandleError)="onError($event)">
</croem-update-card-widget>

C. Payment Card Component (croem-payment-card-widget)

Used for processing transactions directly using a card token.

HTML Template:

<croem-payment-card-widget 
  [inputParamsForWidgetForPayment]="inputParams" 
  (fieldResponseEmitter)="onFormFieldsReceived($event)" 
  (widgetResponseEmitter)="onApiResponse($event)" 
  (HandleError)="onError($event)">
</croem-payment-card-widget>

Configuration API

All widgets accept configuration parameters through their respective input bindings.

Input Parameters (InputParamsForWidget)

| Parameter | Type | Required | Description | | :--- | :--- | :--- | :--- | | APIKey | string | Yes | The merchant API key. | | Token | string | No | Card account token (required for Update & Payment modes). | | Culture | string | No | Language locale code (e.g. 'en', 'es'). Defaults to 'en'. | | IsSale | boolean | No | Set to true for sale/charge transactions; false for authorizations. | | DtrUrl | string | Yes | The Gateway DTR service endpoint URL. | | Keys | object | Yes | DSA Encryption Keys (EncKey1 and EncKey2). | | Mode | CardMode | Yes | Component interaction mode (CardMode.Add, CardMode.Edit, CardMode.Show). |

Event Emitters

• fieldResponseEmitter: Fires when form validation status or input controls change.
• widgetResponseEmitter: Fires on successful communication with the gateway API, returning the response payload.
• HandleError: Fires when an error occurs during token validation or transaction processing.

License

This project is licensed under the MIT License.