Validate Universal Checkout Fields

Overview

🚨

This guide is only relevant for the Web integration.

This guide outlines how to perform any necessary validation, such as validating a form, before any payment is created.

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.

❗️

If your implementation make use of the Manual Payment Creation, 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.

Synchronous Validation

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

1234567891011121314const options = {    /* Checkout options ... */} // Payment creation is enabled by defaultconst universalCheckout = await Primer.showUniversalCheckout(clientToken, options) // Disable payment creationcheckout.setPaymentCreationEnabled(false) // A function created by you to disable or re-enable tokenization synchronouslyconst handleFormValid = isValid => {    checkout.setPaymentCreationEnabled(isValid)}

javascript

copy

If payment creation is disabled, the callback onCheckoutFail 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.

123456789101112131415161718192021const options = {    /* Checkout options ... */     onCheckoutFail(error, { payment }, handler) {        if (error.code === 'PAYMENT_CREATION_DISABLED') {            // Present an error to the user        }         /* Rest of the implementation */         // if (!handler) {        //   return;        // }         // return handler.showErrorMessage("Custom Error Message");    },} const universalCheckout = await Primer.showUniversalCheckout(clientToken, options) // reason is `TOKENIZATION_DISABLED` or `TOKENIZATION_SHOULD_NOT_START`

javascript

copy

Asynchronous Validation

Use the callback onBeforePaymentCreate - called right before a payment is created - to perform asynchronous validations.

Call handler.abortPaymentCreation() to abort the creation of payment.
This calls the callback onCheckoutFail with the error code PAYMENT_CREATION_ABORTED that you can use to share feedback with the user.
Call handler.continuePaymentCreation() to proceed with the creation of the creation.

🚨

onBeforePaymentCreate must call one of the functions of the handler.

123456789101112131415161718192021222324252627282930const options = {    /* Checkout options ... */     async onBeforePaymentCreate({ paymentMethodType }, handler) {        // Perform an asynchronous call to validate if Universal Checkout        // should proceed with the creation of the payment         // Abort the creation of the payment        return handler.abortPaymentCreation()         // Or proceed with the creation of the payment        return handler.continuePaymentCreation()    },     onCheckoutFail(error, { payment }, handler) {        if (error.code === 'PAYMENT_CREATION_ABORTED') {            // Present an error to the user        }         /* Rest of the implementation */         // if (!handler) {        //   return;        // }         // return handler.showErrorMessage("Custom Error Message");    },} const universalCheckout = await Primer.showUniversalCheckout(clientToken, options)

javascript

copy

❗️

Don't use onBeforePaymentCreate to interact with the user.

Some payment methods have to present a popup while the callback is called.