<aside> 💡 Available from v1.15.0

</aside>

This guide outlines how to perform any necessary validation, such as validating a form, before tokenization starts.

Complex validations are likely to be performed on the server-side, resulting in an asynchronous validation. By contrast, synchronous validation in the client prevents unnecessary popups from being displayed during the payment process. Use synchronous validation whenever possible.

<aside> ⚠️ Don't do any validation when onTokenizeSuccess is called. Not all payment methods are able to recover from an error thrown in onTokenizeSuccess - meaning that the user will have to go through the payment flow another time.

</aside>

Synchronous validation

Call the function setTokenizationEnabled(isEnabled) to disable tokenization if the form is invalid, and to re-enable tokenization when everything is ready!

// Tokenization enabled by default
const checkout = await primer.checkout({ ... });

// Disable tokenization
checkout.setTokenizationEnabled(false);

// A function created by you to disable or re-enable tokenization synchronously
const handleFormValid = (isValid) => {
	checkout.setTokenizationEnabled(isValid);
} 

If tokenization is disabled, the callback onTokenizeDidNotStart is called whenever the user clicks on a payment method button or the "Pay" button.

Use this callback to share any feedback with the user.

const checkout = await primer.checkout({
	onTokenizeDidNotStart: (reason) => {
		// Show an alert, an error on the form, ...
	}
});

// reason is `TOKENIZATION_DISABLED` or `TOKENIZATION_SHOULD_NOT_START`

Asynchronous validation

Use the callback onTokenizeShouldStart - called right before tokenization starts - to perform asynchronous validations. This callback should return a Promise.

• Resolve it to false to prevent tokenization. This calls the callback onTokenizeDidNotStart that you can use to share feedback with the user.
• Resolve it to true or any other value to proceed to tokenization.

const checkout = await primer.checkout({
	onTokenizeShouldStart: async () => {
		// Check that everything is valid on the server
		const isValid = await checkValid();
		
		return isValid;
	},

	onTokenizeDidNotStart: (reason) => {
		// Show an alert, an error on the form, ...
	}
});

// reason is `TOKENIZATION_DISABLED` or `TOKENIZATION_SHOULD_NOT_START`