Checkout 3.0
More features
Client-side validation

Client-side validation

It’s an external validation provided by merchant before customer is allowed to complete purchase. This validation is optional and can be asynchronous.

Before submit callback

Optional callback that allows partner to do additional checks before submitting and completing purchase in Checkout3

Callback is triggered when all this conditions are fulfilled:

  • Checkout form has all required fields filled;
  • All required fields are valid;
  • Payment method is selected;
  • User clicks “Complete Payment” button;

Registering callback

To use this optional callback, partner has to pass an additional flag beforeSubmitCallback to avardaCheckoutInit. Please refer to Showing the checkout form for additional info about Checkout 3 form initialisation.

Callback payload

Callback receives object payload as first parameter and checkoutInstance as second parameter. Payload consists of following properties:

PropertyData TypeDescription
zipstringZIP – post code – from delivery address
countrystringCountry from delivery address in ISO 3166-1 alpha2 format – two letters country codes: “SE”, “NO”, “FI” etc..
selectedPaymentMethodIdstringId of the selected payment method – in case multiple payment methods of same type available in the Checkout can be used to identify the correct one
selectedPaymentMethodTypestringType of the selected payment method: “PayOnDelivery”, “Card”, etc..
invoicingAddressobjectCustomer’s invoicing address or Company’s invoicing address – more details in Checkout 3 API types
emailstringEmail address
modestringPurchase mode type – either “B2C” or “B2B”
purchaseIdstringPurchaseId of connected checkout session. Unique identifier for a purchase.

Example of using the callback

<script>
  var beforeSubmitCallback = function (payload, checkoutInstance) {
    // Extract data that you need from the payload
    const {
      mode,
      email,
      zip,
      country,
      invoicingAddress,
      selectedPaymentMethodId,
      selectedPaymentMethodType,
      purchaseId,
    } = payload;
    // Use data for your business logic
    console.log(zip, country);
 
    // Decide if you want to continue and submit the form or bring the user back
    if (isOkToContinue) {
      // Trigger continue on Checkout instance
      checkoutInstance.beforeSubmitContinue();
    } else {
      // Trigger abort on Checkout instance
      checkoutInstance.beforeSubmitAbort();
    }
  };
</script>

When your forms are valid and Checkout can continue to complete payment, you have to call beforeSubmitContinue callback, which is provided by Checkout in it’s instance returned from avardaCheckoutInit. After that Checkout will continue to complete payment. Meantime Checkout is fully disabled to prevent other actions and user can’t do nothing in Checkout – except reading currently shown informations.

When your forms are invalid or you don’t want to let the Checkout complete payment, you can call beforeSubmitAbort and Checkout won’t continue to complete payment and enable back all forms. This gives you opportunity to display some information to the user or prevent user from completing the purchase.

Change languageCustomer Token