Need help?

Handle User Data

How to store and process user data during the registration

During the registration, all user data will be available via callbacks.

In order to make the data handling as simple as possible, the Checkin.com SDK has pre-defined methods to capture these callbacks.

Two types of callbacks

  • updateCallback
    • This callback is sent each time the user data set changes
    • setOnUpdate is the method to handle the callback
  • doneCallback
    • This callback is sent when the user has finished the registration and you are supposed to read the data and store it in your backend
    • setOnComplete is the method to handle the callback

The callbacks can also be used to validate user data and throw errors. For more detailed information on this, see the next section

In addition to the two callback handlers, there are also helper methods available for some specific fields.

If you can't access a method, make sure you have loaded the SDK correctly.

Finalize the registration

When the user has gone through the full registration, you can use the setOnComplete method to capture the callback.

Two sets of data are available on completion:

  • data contains all user data adjusted to your backend
    • The full set of user data you receive from your Checkin.com flow has already been configured to match your current setup. Your API endpoint for creating the user account will be usable without needing to convert any of the data to another format.
  • completeData contains all user data normalized to Checkin.com default formats

You should also make sure to add error handling in case creation of the user account fails and you need to display an error message towards the user. 

window.checkin.dataFlow.setOnComplete(({ data, completeData }) => {
  console.log('Complete captured', { data, completeData })
  // Create the user account by sending the data via your API here
})

Re-directing the user

Once a registration has been completed and you have created the user account successfully, you are free to re-direct the user anywhere.

The most common scenario is to log the user in straight away, but you can also re-direct with a simple window.location.href. 

window.checkin.dataFlow.setOnComplete(({ data, completeData }) => {
  console.log('Complete captured', { data, completeData })
  // Create the user account by sending the data via your API here
  window.location.href = "https://yoursite/loggedIn.html"; // Re-direct the user 
})

Customize your "Account created" message

In most scenarios, you will most likely want to re-direct and log the user in automatically once the account has been created and you have resolved the doneCallback, but it is also possible to customize a welcome message to display towards the user before the re-direct.

Please note that if you want to use customized content, you also need to make sure the proper localization is in place. 

window.checkin.dataFlow.setOnComplete(({ data, completeData }) => {
  return window.checkin.generate.successScreenObject({
    title: "Success title text",
    body: "Success body text",
    button: "Success button text",
    url: "http://www.checkin.com",
  });
})

Capture user data during the registration

Every time the user data is updated, an update callback will be triggered. You can use the setOnUpdate method to capture these callbacks.

An update contains two sets of data:

  • data contains the total data entered so far during the registration
  • diff contains the specific data field(s) which triggered the update

The updates can be used to

  • Run validations on partial user data (e.g. check if the email address already exists)
  • Save partial user data for re-targeting in case the user abandons the registration
  • Send tracking events to your monitoring systems
window.checkin.dataFlow.setOnUpdate((data, diff) => {
  console.log('Update captured', {data, diff})
})

📘

⚠️ Updates are only triggered when a set of data has been changed or entered for the first time

Validate user data

The Checkin.com Framework comes with many front-end validations to make sure the data you get is accurate and fits the requirements of your backend. These validations are enabled out of the box and part of your configured sign-up flow.

Validations based on the user data, on the other hand, needs to be handled by you.

By using the setOnComplete and setOnUpdate methods described above, you should validate the user data to fit your scenarios.

Here are some common scenarios:

  • Check for duplicate accounts
  • Check if the user name is already taken
  • Reject a customer who is from a country/market you do not support

As part of the user data validation, there are also several error messages you can display towards a user.

Here is an example of how to use the setOnUpdate to validate the user email address and throw a duplicate account error. 

window.checkin.dataFlow.setOnUpdate((data, dataDiff) => {
  if (dataDiff.credentials && dataDiff.credentials.email) {
    if (dataDiff.credentials.email.startsWith("test")) {
      return window.checkin.generate.dataError.duplicateAccount();
    }
  }
})

Updated 6 months ago