Skip to main content

ID verification before checkout

Due to specific age restrictions or K.Y.C. compliance requirements, you may require ID verification before the customer can place the order.

The before checkout flow will require ID verification before the customer can enter in their payment details and check out their order - without any code changes to your theme.

Below is an example of a unverified customer being shown the prompt to verify their ID:

Requiring ID verification before the customer can place the order

Then after verifying their ID, the Checkout button reappears automatically so they can continue checkout.

Real ID will override the Checkout button on your cart or product pages and replace it with a prompt to complete ID verification until the customer has passed ID verification automatically or a staff member has manually approved it.

The cart's checkout button re-enabled after the customer has completed ID verification

Shopify Checkout Extensibility

The before checkout flow is supported on both Shopify and WooCommerce.

However, if you're looking for our Shopify Checkout app block to drag and drop directly on your checkout page, see our During Checkout guide.

Getting started

To enable ID verification before checkout, open the Settings area and make sure you're on the Automations tab. Then click Enable automated checks.

This will open the different ID check flow options. Select the Before checkout option.

Finally, click Save to apply the check.

Find the before checkout ID verification no-code option

Then Real ID will automatically replace your site's checkout buttons with a prompt to verify your ID before purchase for unverified customers.

Theme compatibility

By default Real ID works with most themes on Shopify and WooCommerce. It searches for common checkout or payment buttons on your entire site and will replace them in real time with the Verify your ID button instead.

However, if the customer is already verified, the checkout buttons will not be affected.

Here's a short list of selectors that Real ID uses to detect checkout buttons on the page:

For Shopify themes:

  • input[name='checkout']
  • button[name='checkout']
  • .real-id-checkout-button
  • .verify-id-prompt
  • #checkout
  • a[href='/checkout']
  • a[href='/checkout/']

For WooCommerce themes:

  • .wc-proceed-to-checkout
  • form[name='checkout']
  • button.checkout
  • a.checkout
ID verification button not appearing?

You might have a very custom theme or have a side cart that doesn't render on the page load, when Real ID is searching for buttons that qualify for ID checks.

We can help with that! Contact us for assistance.

How it works

When a new customer starts checkout from the cart, they are prompted to verify their ID first.

After the successfully complete ID verification, they will be able to checkout as normal, and provide their billing and shipping details.

After checkout, their customer account is created as well as their order. Their ID check will be associated with both the new customer account and the order. ID verification tags, notes and metafields will also be added to the customer account and order.

How already verified customers are recognized

Returning customers won't be required to complete ID verification again, but for best results; guide customers to login before they start checking out.

For more details on how Real ID recognizes already verified customers, please see our documentation here.

Overriding ID check results

Some customers may have extraordinary circumstances that keeps them from successfully passing an ID check automatically.

You can override the ID check requirement for individual customer, to allow them to complete checkout.

When the customer first opens their ID check, they're presented with a form to enter in their name and email address.

The initial prompt to require customers to provide their name and email address

Using the customer's name and email address, you'll be able to search for their in progress ID check in the search bar.

Then with the check open, manually approve it to allow the customer to continue.

tip

After manually approving a customer's ID check, they should see they have passed within 10 seconds. However, you can instruct the customer to refresh the page if it's taking longer than expected.

Limiting ID verification to specific products

By default, Real ID will require ID verification for all products if the Before checkout flow is enabled.

You can only require ID verification if the customer's cart only contains one or more restricted products.

Within the Automations area of the Settings page, scroll down the to Filters section to see the products and collections filters:

Only require ID verification on specific products and collections

To enable ID verification on a specific collection for example, click Collections then enable the feature, and search for a collection. Clicking on the collection will require ID verification if the customer's cart contains one or more products from this collection.

How to only require ID verification for a specific collection

tip

As a best practice, we recommend that you create a single collection with the name ID verification required, and add products to it, and track it with this feature.

Then you can add additional products without having to also update them individually in Real ID.

Adding ID verification to any button

Real ID will automatically recognize normally structured checkout buttons on your product and cart pages. However you may have a custom theme or a custom button that will need to be gated by ID verification.

You can trigger ID verification to any button on your site by adding the verify-id-prompt class to the button. For example:

<button class="verify-id-prompt">
Buy it now
</button>

This will replace the Buy it now button, with a Verify your ID button instead. Once the customer passes ID verification, the Buy it now button will return and become clickable.

AJAX carts

Some carts are generated by Javascript and are not rendered during the initial page load. These types of carts might not be compatible with Real ID. Please contact us if you have this type of side cart so we can help!

Hiding elements that require ID verification

You can also hide product images, descriptions or any other element that requires a verified ID by adding the class hidden-until-verified class:

<p class="hidden-until-verified">
This product is only available to customers with a verified ID.
</p>

Styling the start verification button

The button that starts verification is customizable without code through the appearance section in the settings.

But if that doesn't meet your exact criteria, you can use CSS within your site's theme to modify additional properties such as the border, border radius, shadows and more.

The Real ID verification button has the class name .real-id-start-verification, which you can use to apply custom styling via CSS rules. Here is an example:

button.real-id-start-verification {
border-radius: 5px; /* Adjust the value to control the amount of rounding */
}

Troubleshooting

Occasionally unverified customers checkout

If your seeing orders come through occasionally where customers can still checkout without completeing their ID check, you can follow these steps.

In Shopify, the before checkout flow is restricted to only modifying the Checkout buttons on your site's frontend. This means it's not possible to guarantee verification before checkout for all cases, but to help reduce that risk:

  1. Recommended consider using the during checkout flow instead. This is a Checkout Extension that doesn't have the same compatibility or performance issues as the before checkout flow.
  2. Make sure other apps are not modifying the checkout buttons on your order status page. Apps that add checkboxes, or rental date pickers will occasionally override the Real ID app's verification button.
  3. Make sure your page isn't loading another app's JavaScript or theme JavaScript that is blocking Real ID from loading performantly.
  4. Make sure that all checkout buttons across all side carts, product pages and your cart pages have the checkout button overridden for verification. You can use CSS classes to add ID verification to any checkout button.

WooCommerce

The Verify your ID button stopped appearing on my site, or it's failing to load after clicking the button suddenly

If you're using a caching plugin such as Speed Optimizer to bundle JavaScript scripts, you'll need to exclude the Real ID script from the bundle.

If you have Speed Optimizer installed, you can tell if you have this feature enabled by opening the plugin, then clicking Frontend and open the JavaScript tab. Check to see if the the Combine JavaScript Files feature is enabled:

Checking to see if the Combine JavaScript Files feature for Speed Optimizer is enabled

If this feature is enabled, you'll need to exclude the Real ID script by opening the Exclude Scripts popup and selecting the https://real-id-flow.getverdict.com/assets/index.js script:

How to disable Speed Optimizer plugin from breaking the Real ID script

Then click Confirm to confirm the exclusion of the Real ID script from the Speed Optimizer's bundle of scripts:

Confirming the exclusion of the Real ID script from the Speed Optimizer bundle

After you've confirmed this change, refresh the page and you should see Real ID working properly once again.