Create a code validation page like Stripe or Paypal

[nico.dicagno]

Great guide and write up!

@lydia.provin

When the user clicks on Je m’inscris (I’m registering), I use the Sign the user up action with, among the fields filled in when adding the user, the Code pour confirmation field. I use the Data sources named Calculate formula of type Generate random string. I set Length of characters to 4 and only check Use numbers:

Just as a heads up, if you generate this random code on a page-level workflow, it will be visible to the user if they inspect the page! You can argue that people generally won’t know how to, but its the tech-savvy people who can/will exploit all your app’s vulnerabilities. It would be advisable to create a backend API workflow which generates the code and sends the email. Trigger the backend workflow from the page so that the code is generated on the server rather than on the client.

@lydia.provin

However, I haven’t found a solution if you copy-paste the code into the first input so that it sticks each digit into the others. If anyone has a solution

This could get you on the right direction. The trick is using multiple elements instead of trying to do everything on one.

Input format (_ _ _ _)

There might be an easier way, but this is how i like doing it: Don’t display the '_ _ _ ’ using the input itself; use separate visual elements Set the font color of the input to invisible. (This input is where users type, but they wont be able to actually see it) Layered under of the Input*, place as many text elements as number of characters in your code. These text elements would display ‘_’, but use a conditional that checks whether ‘Input: extract with regex: (regex pattern= . (a single…