Finalize the Registration

This section covers how to finalize a sign-up with the regilyDoneCallback.

regilyDoneCallback

Communication between the iFrame and the client side is handled via JavaScript callbacks. Once a registration is completed, a regilyDoneCallback will be emitted.

At this point, you need to read the user data and store it in your backend just like you are already doing today.

The Checkin.com Framework will automatically adapt the collected data to match your current setup today. All fields will have the same names and come in the same format as your backend is already expecting in order for you to re-use all your endpoints without modifying the data.

In the regilyDoneCallback you can find this data in the structure data.mapped.

The user data will also be available in the normalized structures user, credentials and consent.

Why

The regilyDoneCallback indicates that the user has gone through the full sign-up and that you need to store the registration in your backend.

At this point, you can also run final validations on the full set of user data.

To ensure the best possible user experience, it is also recommended that you set up an error message in case there are technical errors while attempting to store the registration

How

In order to capture the regilyDoneCallback and read the data, you need to set up a callback listener.

The regilyDoneCallback needs to be handled as a promise and explicitly resolved or rejected.

Once you have resolved the callback, you can re-direct the user anywhere. Such a use case could be to log the user in automatically or show them your own confirmation page.

Here is an example on how to capture the data, store the data and throw an error in case of failure.

// Add this to a script element within your body, remember to return a promise
Object.defineProperty(window, 'regilyDoneCallback', {
  value: function (regilyDoneCallbackData) {
      console.log(regilyDoneCallbackData)
     
    // This example function is described below and returns a promise
      return registerDataToBackend(regilyDoneCallbackData.mapped) 
  }
})

// An example of how to save the data to backend and resolve the promise
function registerDataToBackend (mapped) {
  return new Promise(function (resolve, reject) {
    
    // Add your current endpoint for registrations here
    var url = 'https://localhost:8888/api/v2/signup'
    
    fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: mapped})
      .then(function (data) {
        if (data.status == 200) {
          console.log('Save successful!', data)
          resolve()
        }
      }).catch(function (err) {
      // Define a Regily error message with the pre-defined error for technical issues
        var errorMessage = 'There was an error when we tried to save your data'
      	var errorName = 'unknown'
      	var error = new Error(errorMessage)
     	  error.name = errorName
      	reject(error)
      })
  })
}

Throw an error

Errors can be thrown with a rejected promise on the regilyDoneCallback just like on the regilyUpdateCallback. At this point, all user data is available in the data object mapped for you to run validations on. It is recommended to also allow for a separate error in case you are experiencing technical issues.

For more details, see the page on errors

Re-direct the user

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

There are two ways of re-directing the user, depending on if you want to show the Regily welcome screen or not.

Without welcome screen
If you do not want to display the welcome screen, you can add a re-direct directly after you resolve the promise for the regilyDoneCallback.

//  Capturing the regilyDoneCallback
Object.defineProperty(window, 'regilyDoneCallback', {
  value: function (regilyDoneCallbackData) {
      console.log(regilyDoneCallbackData.mapped)
      //Get the pre-configured data structure called "mapped"
      const readyJSONData = regilyDoneCallbackData.mapped
      return saveDataToBackend(readyJSONData) // Example function to save data
    }
  })

// An example function to save the data, resolve the promise and re-directing
function saveDataToBackend (regilyDoneCallbackData) {
  return new Promise(function(resolve, reject) {
      console.log("DoneCallback");
      resolve()
      window.location.href = "https://yoursite/loggedIn.html";
    })
}

With welcome screen

When the user gets to the welcome screen for a successful registration, there is a close button for the user to click. When the button is clicked, an event callback is triggered. For more information on the JavaScript events, see [PAGE].

This event will have two properties, action="close" and flowStatus="completed", which indicates that the user has clicked the button on the success screen.

Below is an example of how you can listen for the regilyEventCallback and trigger a re-direct on a completed registration when the user has closed the confirmation screen.

Object.defineProperty(window, 'regilyEventCallback', {
  value: function (data) {
     console.log(data)
  	 if (data.action=='close-module' && data.flowStatus='complete')
      // A close event has been triggered and "flowStatus" indicates the user
      // has gone through the full registration. Time to re-direct. 
       window.location.href = "https://yoursite/loggedIn.html";
    }
  })

If you want to use the welcome screen but customize the content on it, see this page .