Shopify: Create a custom flow to create a customer (Additional metafields)

I want to create a custom form for the user to register, because I need the birthday of the customer.

So I need the user to enter his birthday as a REQUIRED field and I need to check if the user is above the age of 18.

Then at the checkout I also want to reconfirm the user is above 18.

I thought it would be the best approach to create a custom Shopify App for that.

I created a cart checkout validation so I can check for the birthday which worked out.

run.graphql:

query RunInput {
  cart {
    buyerIdentity {
      customer {
        metafield(key: "birthday") {
          value
        }
      }
    }
  }
}

run.ts:

export function run(input: RunInput): FunctionRunResult {
  const error = {
    localizedMessage: "Birthday not set.",
    target: "cart"
  };

  const errors: any = [];

  if (input.cart.buyerIdentity?.customer?.metafield?.value === undefined) {
    error.localizedMessage += input.cart.buyerIdentity?.customer?.metafield?.value ?? "{NO}";
    errors.push(error);
  }

  return {
    errors
  }
};

So currently I get this error message inside my cart, because no birthday value is deposited.

Now I needed to create that custom form for the user to register at. I used the main-register.liquid from the dawn theme as a template. I added my birthday input and added a validation method called validateForm().

This is how the script looks:

function validateForm() {
    var firstName = document.getElementById('RegisterForm-FirstName').value;
    var lastName = document.getElementById('RegisterForm-LastName').value;
    var password = document.getElementById('RegisterForm-password').value;
    var email = document.getElementById('RegisterForm-email').value;
    var birthday = document.getElementById('RegisterForm-birthday').value;

    var errorMessage = document.getElementById("error-message");

    errorMessage.hidden = true;
    
    if (!firstName.trim().length) {
      errorMessage.hidden = false;
      return false;
    }
    
    // all other checks if empty ....

    var record=birthday.trim();
    var currentdate=new Date();

    var currDay = currentdate.getDate();
    var currMonth = currentdate.getMonth() + 1;
    var currYear = currentdate.getFullYear() - 17;

    var aighteenStr = currDay + "-" + currMonth + "-" + currYear;
    var aighteen = new Date(aighteenStr);
    
    var birth = new Date(record);      

    console.log(birth);
    console.log(aighteen);

    if(birth > aighteen)
    {
        alert("Du musst über 18 Jahre sein, um einen Account erstellen zu können.");
        return false;
    }
    
    return true;
  }

I did my research and found the createCustomer function / mutation, but I’m not sure how to implement it here.

I’ve also found this tutorial, but it looked strange to put my credentials into the liquid file.

Any advice on how to call that function? Or do I need to follow a different approach?

(Different approach my mind has crossed:
Use the normal create_customer form and add a new field with the id customer[note][birthday].
This worked in the saving process, but without a validation if the user is 18+.
I also didn’t find a method to retrieve that information in the checkout validation because the customer model that gets returned in the cart only has a metafield value and no note value (information here) )