Auto-verify customer email addresses, with Mechanic.

Mechanic is an automation development platform for Shopify. :)

Auto-verify customer email addresses

by Isaac Bowen (team@usemechanic.com)

Use this task to perform an extra verification step for your newly-created customers, in which a verification code is emailed to them, along with a link to a form on your online storefront where they can enter the code for verification. Once verified, the customer will be tagged, and sent a confirmation email.

Runs when a customer is created and when user/customers/verify_webhook is triggered. Configuration includes tag to add after verifying, verification email subject, verification email body, verification confirmed email subject, verification confirmed email body, and verification webhook event topic.

15-day free trial – unlimited tasks

Documentation

Use this task to perform an extra verification step for your newly-created customers, in which a verification code is emailed to them, along with a link to a form on your online storefront where they can enter the code for verification. Once verified, the customer will be tagged, and sent a confirmation email.

Setting up

  1. Install this task! :) Customize the email content to taste.
  2. Navigate to your Mechanic account settings, and use the "Webhooks" section to create a new webhook, named "Customer verification" (or another name of your choosing), and using the event topic "user/customers/verify_webhook". Make a note of the webhook URL that Mechanic generates for you.
  3. Adapt and use the following code sample on your online store, perhaps using a new page and editing its HTML. Make sure to replace the mechanicWebhookUrl javascript variable with the webhook URL that Mechanic generated for you earlier.

    <p>Please verify your account:</p>
    
    <form id="verify">
      <p><label>Email address: <input type="email" name="customer_email" required></label>
      <p><label>Verification code: <input type="text" name="verification_code" required></label>
      <p><button type="submit">Submit</button></p>
    </form>
    
    <script>
      var mechanicWebhookUrl = 'https://usemechanic.com/webhook/00000000-0000-0000-0000-000000000000';
      window.addEventListener('load', function () {
        $('#verify').on('submit', function (e) {
          e.preventDefault();
          $.post(mechanicWebhookUrl + '?' + $(this).serialize());
          alert('Your information has been submitted. If verification was successful, you will receive a confirmation email.');
        });
      });
    </script>
    
  4. You're done! Perform a test to make sure everything works as intended.

Please note: the team at Mechanic can help with debugging the Mechanic side of things, but we can't help with adapting the code above. Work with a web designer or developer to create the right experience for your store.

Developer details

Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Gurus, everybody.

That’s why we make it easy to configure automation without code, why we make it easy to tweak the underlying code once tasks are installed, and why we publish it all here for everyone to learn from.

Events
when a customer is created (shopify/customers/create)
when user/customers/verify_webhook is triggered (user/customers/verify_webhook)
Options
tag to add after verifying (required), verification email subject (required), verification email body (multiline, required), verification confirmed email subject (required), verification confirmed email body (multiline, required), verification webhook event topic (required)
Script
{% comment %}
  Preferred option order:

  {{ options.tag_to_add_after_verifying__required }}
  {{ options.verification_email_subject__required }}
  {{ options.verification_email_body__multiline_required }}
  {{ options.verification_confirmed_email_subject__required }}
  {{ options.verification_confirmed_email_body__multiline_required }}
  {{ options.verification_webhook_event_topic__required }}
{% endcomment %}

{% if event.topic == "shopify/customers/create" %}
  {% assign customer_tags = customer.tags | split: ", " %}
  {% unless customer_tags contains options.tag_to_add_after_verifying__required %}
    {% assign verification_code = "now" | date: "%s" | append: customer.email | sha256 | slice: 0, 6 | upcase %}
    {% action "email" %}
      {
        "to": {{ customer.email | json }},
        "subject": {{ options.verification_email_subject__required | json }},
        "body": {{ options.verification_email_body__multiline_required | replace: "VERIFICATION_CODE", verification_code | strip | newline_to_br | json }},
        "reply_to": {{ shop.customer_email | json }},
        "from_display_name": {{ shop.name | json }}
      }
    {% endaction %}

    {% assign cache_key = customer.email | downcase | sha256 | prepend: "customer_verification_code:" %}
    {% action "cache", "set", cache_key, verification_code %}
  {% endunless %}
{% elsif event.topic == options.verification_webhook_event_topic__required %}
  {% assign cache_key = event.data.customer_email | downcase | sha256 | prepend: "customer_verification_code:" %}
  {% assign submitted_verification_code = event.data.verification_code %}
  {% assign required_verification_code = cache[cache_key] %}
  {% assign customer = shop.customers[event.data.customer_email] %}

  {% if event.preview %}
    {% assign submitted_verification_code = "123ABC" %}
    {% assign required_verification_code = "123ABC" %}
    {% assign customer = hash %}
    {% assign customer["admin_graphql_api_id"] = "gid://shopify/Customer/1234567890" %}
    {% assign customer["email"] = "customer@example.com" %}
  {% endif %}

  {% if customer == nil %}
    {"log": {{ event.data.customer_email | json | prepend: "Unable to locate customer for submitted email address " | json }}}
  {% elsif required_verification_code == nil %}
    {"log": {{ event.data.customer_email | json | prepend: "No verification code on file for customer " | json }}}
  {% elsif required_verification_code != submitted_verification_code %}
    {"log": {{ event.data.customer_email | json | prepend: "Submitted verification code did not match the code on file for customer " | json }}}
    {"log": {{ required_verification_code | json | prepend: "Verification code on file: " | json }}}
  {% else %}
    {% action "email" %}
      {
        "to": {{ customer.email | json }},
        "subject": {{ options.verification_confirmed_email_subject__required | json }},
        "body": {{ options.verification_confirmed_email_body__multiline_required | strip | newline_to_br | json }},
        "reply_to": {{ shop.customer_email | json }},
        "from_display_name": {{ shop.name | json }}
      }
    {% endaction %}
    {% action "cache", "del", cache_key %}
    {% action "shopify" %}
      mutation {
        tagsAdd(
          id: {{ customer.admin_graphql_api_id | json }}
          tags: {{ options.tag_to_add_after_verifying__required | json }}
        ) {
          userErrors {
            field
            message
          }
        }
      }
    {% endaction %}
  {% endif %}
{% endif %}
Mechanic tasks are written in Liquid, which makes them easy to write and easy to modify. Learn more about our platform.
Defaults
Tag to add after verifying
verified
Verification email subject
[{{ shop.name }}] Please verify your account
Verification email body
Hello,

We've received your registration, but we need you to verify your email address before continuing.

Please visit https://example.com/pages/verify, and submit the verification code VERIFICATION_CODE.

If you have any questions, please reply to this email.

Thanks,
{{ shop.name }}
Verification confirmed email subject
[{{ shop.name }}] Your account has been confirmed
Verification confirmed email body
Hello,

Your account has been successfully verified. Thank you!

Cheers,
{{ shop.name }}
Verification webhook event topic
user/customers/verify_webhook