Card

danger

Please be aware that our Tokenizer is still in Beta. Breaking changes might happen in the future.

Methods

The SimpleReverePay class provides several methods that you can use to perform various actions related to payment form management and validation. These methods allow for programmatic control over the payment form's behavior, enhancing form interaction and data handling. Below is a table detailing each method available on an instance of SimpleReverePay.

Method	Description	Parameters	Returns
checkValidity	Updates the validation state for all form inputs, and returns an isValid boolean through the onCheckValidity callback function.	None	None
reset	Clears out all inputs and sets the validation states to neutral.	None	None
submit	Submits the credit card form.	None	None
updateFields	You can update the Card Holder Name and the Postal Code field values or placeholders after the initialization. Known issues: You can't set an empty string, and it does not work after calling the reset() method!	FieldUpdateConfig	None

How to call a method

To use these methods, you typically need to call the SimpleReverePay class instance methods. Here's a brief example using JavaScript:

// Assume `reverePay` is your SimpleReverePay instance
reverePay.checkValidity(); // Validates the form and executes the callback
reverePay.reset(); // Resets the credit card form
reverePay.submit(); // Submits the credit card form
reverePay.updateFields({
	cardHolderName: {
		value: 'John Doe'
	},
	postalCode: {
		value: '12345'
	}
}); // Updates the existing field values in the form.

Playgrounds

TypeScript

JavaScript

Javascript - UMD

Types of response

CardPaymentResponse

Details associated with a card payment method.

Property	Type	Description
bin	string	Bank Identification Number.
brand	string	Card brand (e.g., Visa, MasterCard).
cardType	string	Type of card (e.g., credit, debit).
cardVerification	CardVerification	Verification details for the card.
domesticPushToCard	string	Indicator if the card supports domestic push.
expiration	CardExpiration	Expiration details of the card.
holderName	string	Name of the cardholder.
lastFourCardNumber	string	Last four digits of the card number.

CardExpiration

Details regarding the card's expiration.

Property	Type	Description
month	string	Expiration month of the card.
year	string	Expiration year of the card.

CardVerification

Information about the card's verification status.

Property	Type	Description
status	string	Verification status of the card.

CardFieldsConfig

The types of the configurable options for the tokenizer card payment fields.

/**
 * Configuration for the card fields.
 */
export type CardFieldsConfig = {
	/**
	 * Configuration for the card CVV field.
	 * @default undefined
	 */
	cardCVV?: {
		/**
		 * Indicates if the CVV field is required.
		 * @default true
		 */
		required?: boolean;
	};

	/**
	 * Configuration for the card holder name field.
	 * @default undefined
	 */
	cardHolderName?: {
		/**
		 * Placeholder text for the card holder name field.
		 * @default undefined
		 */
		placeholder?: string;
		/**
		 * Default value for the card holder name field.
		 * @default undefined
		 */
		value?: string;
	};

	/**
	 * Configuration for the postal code field.
	 * @default undefined
	 */
	postalCode?: {
		/**
		 * Placeholder text for the postal code field.
		 * @default undefined
		 */
		placeholder?: string;
		/**
		 * Default value for the postal code field.
		 * @default undefined
		 */
		value?: string;
	};
};

FieldUpdateConfig

The types of the configurable options for the updatable card payment fields.

/**
 * Configuration for the card fields.
 */
export type FieldUpdateConfig = {
	/**
	 * Configuration for the card holder name field.
	 */
	cardHolderName?: {
		/**
		 * Placeholder text for the card holder name field.
		 */
		placeholder?: string;

		/**
		 * Value for the card holder name field.
		 */
		value?: string;
	};

	/**
	 * Configuration for the postal code field.
	 */
	postalCode?: {
		/**
		 * Placeholder text for the postal code field.
		 */
		placeholder?: string;

		/**
		 * Value for the postal code field.
		 */
		value?: string;
	};
};