Card

Methods

These methods are available on an AdvancedReverePay instance for Card flows.

Method	Description	Parameters	Returns
checkValidity	Triggers a validity check on all mounted inputs; calls onCheckValidity(validation).	None	boolean (internal); callback receives object
reset	Clears out all inputs (including optional email if configured).	None	None
submit	Initiates submission. For Card, runs validation; if valid it requests token and completes tokenization + payment init.	{ gatewayCustomerId?: string } (optional)	None
updateFields	Updates placeholders/values after initialization. Known limitation: cannot set empty string; does not work after reset() for some fields.	FieldUpdateConfig	None
updateStyle	Applies styles to mounted inputs. Pass null to reset to configured defaults.	CSSProperties | null	None
focusField	Sets focus to a specific field.	FieldName	None

How to call a method

// Assume `reverePay` is your AdvancedReverePay instance
reverePay.checkValidity();
reverePay.submit();
reverePay.updateFields({
	cardHolderName: { value: 'John Doe' },
	postalCode: { value: '12345' },
	email: { value: 'john@doe.com' }
});
reverePay.updateStyle({ backgroundColor: '#f59d9d' });
reverePay.focusField('cardNumber');
reverePay.reset();

Configuration

Quick Reference

Option	Type	Default	Description
fields.form.id	string	ccForm	Container element ID for the payment form wrapper (used in Card mode).
fields.cardNumber.id	string	ccNumber	Mount target for Card Number input.
fields.cardExpiration.id	string	ccExpiration	Mount target for Expiration input.
fields.cardCVV.id	string	ccCvv	Mount target for CVV input.
fields.cardCVV.required	boolean	false	Marks CVV as required.
fields.cardHolderName.id	string	ccHolderName	Mount target for Cardholder Name input.
fields.cardHolderName.maxLength	number	128	Max input length for Cardholder Name.
fields.cardHolderName.pattern	string	See the pattern	Regex pattern for Cardholder Name.
fields.postalCode.id	string	ccPostalCode	Mount target for Postal Code input.
fields.postalCode.maxLength	number	10	Max input length for Postal Code.
fields.postalCode.pattern	string	See the pattern	Regex pattern for Postal Code.
fields.email.id	string	-	Email field mount target. Required when strictMode: true.
fields.email.required	boolean	false	Marks email as required.
fields.email.placeholder	string	-	Email input placeholder.
fields.email.value	string	-	Default email value. Also mirrored to reverePay.email.
fields.email.css	CSSProperties	-	Inline styles applied to the mounted email input.
fields.*.css	CSSProperties	-	Inline styles applied to the mounted input iframe/field.
fields.*.onInvalid	() => void	-	Called when the field fails a validity check.
fields.*.onCheckValidity	(isValid: boolean) => void	-	Fired after a validity check with the field’s validity.

CardFieldsConfig

type CardFieldsConfig = {
	form?: { id: string };
	cardCVV?: FieldConfigBase & { required?: boolean };
	cardExpiration?: FieldConfigBase;
	cardHolderName?: FieldConfigBase & { pattern?: string; placeholder?: string; value?: string };
	cardNumber?: FieldConfigBase;
	postalCode?: FieldConfigBase & {
		inputmode?: 'text' | 'numeric';
		maxLength?: number;
		pattern?: string;
		placeholder?: string;
		size?: number;
		value?: string;
	};
	email?: FieldConfigBase & {
		placeholder?: string;
		required?: boolean;
		value?: string;
	};
};

// Additional types for the broader context.
type CSSProperties = Partial<Record<keyof CSSStyleDeclaration, string | null>>;
type FieldConfigBase = {
	/** `ccNumber` by default. */
	id?: string;
	/** Fired when the input fails a validation check */
	onInvalid?: () => void;
	/** Fired after a validity check runs on the input  */
	onCheckValidity?: (isValid: boolean) => void;
	/** Fired after a validity report runs on the input */
	onReportValidity?: (isValid: boolean) => void;
	css?: CSSProperties;
};

• Defaults (IDs): form.id = 'ccForm', cardNumber.id = 'ccNumber', cardExpiration.id = 'ccExpiration', cardCVV.id = 'ccCvv', cardHolderName.id = 'ccHolderName', postalCode.id = 'ccPostalCode'.
• Each field supports per-field hooks: onInvalid, onCheckValidity, onReportValidity and css for styling.

Per-field Callbacks

Each field in CardFieldsConfig can have individual validation callbacks (except email):

onCheckValidity: (isValid: boolean) => void

Example:

const reverePay = new AdvancedReverePay({
	merchantId: 'yourMerchantId',
	publicAPIKey: 'yourPublicAPIKey',
	config: {
		paymentMethod: 'card',
		sandbox: true,
		fields: {
			cardNumber: {
				id: 'ccNumber',
				onCheckValidity: (isValid) => {
					console.log('Card number is valid:', isValid);
				}
			},
			cardHolderName: {
				id: 'ccHolderName',
				onCheckValidity: (isValid) => {
					if (!isValid) {
						console.log('Cardholder name validation failed');
					}
				}
			},
			postalCode: {
				id: 'ccPostalCode',
				onCheckValidity: (isValid) => {
					// Update UI based on validation state
				}
			}
		}
	}
});

onInvalid: () => void

Called when the field fails a validity check.

onReportValidity: ()=> void

Called when validity is reported for the field.

FieldName

export type FieldName =
	| 'cardNumber'
	| 'cardExpiration'
	| 'cardCVV'
	| 'cardHolderName'
	| 'postalCode'
	| 'email';

FieldUpdateConfig

export type FieldUpdateConfig = {
	cardHolderName?: { placeholder?: string; value?: string };
	postalCode?: { placeholder?: string; value?: string };
	email?: { placeholder?: string; value?: string };
};

CSSProperties

updateStyle accepts any valid subset of CSS style keys as strings (e.g., backgroundColor, color, fontSize). Pass null to revert to configured defaults.

Example (TypeScript)

TypeScript

import { AdvancedReverePay } from '@revere_payments/tokenizer';
import type { SuccessResponse, ErrorResponse } from '@revere_payments/tokenizer/types';

const reverePay = new AdvancedReverePay({
	merchantId: 'yourMerchantId',
	publicAPIKey: 'yourPublicAPIKey',
	config: {
		paymentMethod: 'card',
		sandbox: true,
		initRequestOrigin: 'https://api.sandbox.reverepayments.dev',
		fields: {
			form: { id: 'ccForm' },
			cardHolderName: { id: 'ccHolderName' },
			postalCode: { id: 'ccPostalCode' },
			cardNumber: { id: 'ccNumber' },
			cardExpiration: { id: 'ccExpiration' },
			cardCVV: { id: 'ccCvv', required: true },
			email: { id: 'email', required: false }
		}
	}
});

reverePay.onSuccess = (res: SuccessResponse) => console.log('SUCCESS', res);
reverePay.onError = (status: number, validation, err?: ErrorResponse) => {
	console.log('ERROR', status, validation, err);
};
reverePay.onCheckValidity = (validation) => console.log('VALID', validation);
reverePay.onLoaded = () => console.log('loaded');

Response Types

For detailed information about response types, see Response Types.

Postal code default pattern

'^(?!.*(--|  |- | -))[A-Za-z0-9](?:[A-Za-z0-9\\- ]{3,8})[A-Za-z0-9]$'

Holdername default pattern

'^\\s*[^0-9\\s]+(?:\\s+[^0-9\\s]+)+\\s*$'

Playgrounds

TypeScript

JavaScript

Javascript - UMD