Implementing age verification service into checkout page

[JaroslavP]

Hello,
I would like to create extension for age validation for our company over18.cz (https://www.over18.cz), it works technicaly a little similar like google reCaptcha (iframe with our content, redirecting to service for age validation through banks and other). It can be then used by shops in Czech republic and Slovakia, but after studying documentation, I am not sure how to do it, because our standard steps can't be used in Shopify. When we do implementation to other shop systems, we do it like this:

1. There is an element added to final step of order, through which is validation managed (its div and external or internal javascript file, which create content of iframe)
2. Until validation is done, submit button is disabled
3. Validation is managed at our website through secure systems like bank identity etc.
4. When is validation finished, submit button is enabled and customer can send his order
5. After creating order, there is secondary validation following order:create webhook and adding note to order for shop owner (either validated or not validated info)

But now I have poblem even with first two steps. As I understand, when I create app and extension for checkout, I am not able to manipulate DOM (disable button) or even add our element inside (because only prepared elements can be used). And I cant find another way to add some script or some element into last checkout page, because without this step it cant work as prevention for ordering below proper age.

There are some screenshots how it works:

This is how created element looks like

On click, there are services which can be used

Validation is done through external oficial services like bank ID or other

After validation is done, create order is enabled

And after second validation there is note for shop owner

Do you have some advice how to solve it or which solution to use?

Thank you in advance,
Jaroslav Pazdera

[Liam]

Hi Jaroslav,

As you've noted it's not possible to inject external elements into the checkout pages - this is to maintain the security and consistency of the Shopify checkout. Would adding the age verification prior to checkout be an option, eg on the cart page? 

[JaroslavP]

Hello,

thank you for your reply.

This would be a solution if it is possible to somehow prohibit the user from submitting the order until the age verification is done. If this is not possible, then age verification is meaningless and does not fulfill a legal obligation. If some background parameter or condition could do it, then I could put element in the cart for example.

Jaroslav

[Liam]

Hi Jaroslav - it should be possible to implement logic on the cart to prevent the user from navigating from the cart page to the checkout until the verification step is completed. (Similar to carts that require users to agree to a terms and conditions checkbox)

Would this approach work?

[AsimTahir1]

Hi @JaroslavP ,

i also did the same thing like Age Varification before submiting the order.

you can create a private/custom app for Age Varification, and once age is verified update the Customer metafield.

e.g: On Go to Checkout button, add custom validation through liquid to prevent customer on checkout page, but if customer directly land of checkout page through URL, then you have to validate the Customer metafield again using Cart-checkout-validation shopify function to prevent user to submit order before Age Verified.

[JaroslavP]

Hello,

I followed your idea and I added to cart our validation element, its not problem even to block button to next step. Problem is, as you mentioned, when customer go directly to checkout. I am able to create custom checkout extension but I am unable to save some data in cart and check it in checkout. There are not available cookies, localstorage, internalstorage and for now I was not able to use custom metafields ...

Do you have some examples from you app or some advices? Its not necessary for me to create app because we probably have only few users with shopify system, so It can be some basic solution with editing theme etc, but big problem is checkout and validate, that user is validated before saving order.

Thank you

[JaroslavP]

Hello,
I just wanted to remind myself with a request for advice on how to solve the age verification on the order summary page. Unfortunately, so far I have not been able to move forward even following the various tutorials and examples.
Thank you very much

[AsimTahir1]

Hi @JaroslavP,

let me try to explain you.

Create a metafield on Customer level, add a condition on Checkout button, e.g: if customer Age Verification metafield is True then redirect to checkout page otherwise redirect ot Verify age portal.

Same thing you can do on Checkout page as well, if you are still using checkout.liquid then can add JavaScript like i added in the end of checkout.liquid

  $(document).ready(function () {
    {% if customer %}
    {% assign verifyDate = customer.metafields.yotiAgeVerification.ageVerificationProcessedAt | date: "%s" %}
    {% assign this_year = 'now' | date: "%s" %}
    {% assign diffSeconds = this_year | minus: verifyDate %}
    {% assign diffDays = diffSeconds | divided_by: 3600 | divided_by: 24 %}
  console.log({{diffDays}});
      {% if customer.metafields.yotiAgeVerification.isAgeVerified and diffDays <= 365 %}
        $(".step__footer[data-step-footer]").find("#continue_button").show();
      {% else %}
        $(".step__footer[data-step-footer]").find("#continue_button").hide();
        $(".step__footer[data-step-footer]").prepend('<a href="/cart" class="step__footer__continue-btn btn"><span class="btn__content" data-continue-button-content="true">VERIFY YOUR AGE</span><svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg></a>');
      {% endif %}
    {% endif %}
  });

but if you are using Checkout Extensibility functions, you can use cart-checkout-validation function to achieve this thing on Checkout page.
For more information you can directly email me: asim_craz@live.com

[Thuisbier]

Hi JaroslavP,

There is a workaround to accomplish this at checkout.
1. Require the buyer to enter a company name at te checkout page.
2. Change the text from "company name" to ''date of birth'' in that field. (you can change it at Theme content)

That's all, hope this helps