Card

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 a validity object 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 Cardholder Name, Postal Code and Email field values or placeholders, and the Card Number and CVV 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'
	},
	cardNumber: {
		placeholder: '1234 1234 1234 1234'
	},
	cardCVV: {
		placeholder: 'CVV'
	}
}); // Updates the existing field values and placeholders in the form.

Playgrounds

TypeScript

JavaScript

Javascript - UMD

Response Types

For detailed information about response types, see Response Types.

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 number field.
	 * @default undefined
	 */
	cardNumber?: {
		/**
		 * Placeholder text for the card number field.
		 * @default undefined
		 */
		placeholder?: string;
	};

	/**
	 * Configuration for the card CVV field.
	 * @default undefined
	 */
	cardCVV?: {
		/**
		 * Indicates if the CVV field is required.
		 * @default true
		 */
		required?: boolean;
		/**
		 * Placeholder text for the card CVV field.
		 * @default undefined
		 */
		placeholder?: string;
	};

	/**
	 * Configuration for the cardholder name field.
	 * @default undefined
	 */
	cardHolderName?: {
		/**
		 * Placeholder text for the cardholder name field.
		 * @default undefined
		 */
		placeholder?: string;
		/**
		 * Default value for the cardholder 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;
	};

	/**
	 * Configuration for the email field.
	 * @default undefined
	 */
	email?: {
		/**
		 * Placeholder text for the email field.
		 * @default undefined
		 */
		placeholder?: string;
		/**
		 * Default value for the email field.
		 * @default undefined
		 */
		value?: string;
		/**
		 * Default value for email field.
		 * @default undefined
		 */
		required: ?boolean;
	};
};

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 number field.
	 * Only the placeholder can be updated; the value can never be set programmatically.
	 */
	cardNumber?: {
		/**
		 * Placeholder text for the card number field.
		 */
		placeholder?: string;
	};

	/**
	 * Configuration for the card CVV field.
	 * Only the placeholder can be updated; the value can never be set programmatically.
	 */
	cardCVV?: {
		/**
		 * Placeholder text for the card CVV field.
		 */
		placeholder?: string;
	};

	/**
	 * Configuration for the cardholder name field.
	 */
	cardHolderName?: {
		/**
		 * Placeholder text for the cardholder name field.
		 */
		placeholder?: string;

		/**
		 * Value for the cardholder 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;
	};

	/**
	 * Configuration for the email field.
	 */
	email?: {
		/**
		 * Placeholder text for the email field.
		 */
		placeholder?: string;

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