Creating A Custom Signup Page

Hint provides every practice with the ability to have multiple signup pages out of the box, each with custom settings. For most practices, this works. But if you need full control, you might want to build your own signup page. This guide will show you how to do just that using Hint's API.

🚧

This is a technical document

Creating your own signup page requires significant technical expertise. This tutorial is intended for web developers, and assumes understanding of terms like servers, api keys, front-end, etc.

Overview

When someone signs up for your practice, your end goal is to create a Membership. But Memberships are complicated, because they may have multiple patients, payment info, and particular settings and plans. Thus, many parts of Hint's API work together to create a Membership; specifically: Patient, Membership, Plan, PaymentMethod and CustomerInvoice. Creating your signup page will require most, if not all of these endpoints to be used.

How Does it Fit Together?

• At a minimum, Memberships are made up of Patients, and a Plan.
• But you likely will want to attach a Card or Bank Account to the owner (Patient) of that Membership.
• Memberships can generate Customer Invoices, which you can trigger manually, or let them be triggered automatically.

The Data Flow

When you create your own signup page, you're basically acting as a proxy for Hint's normal signup page. Thus, your goal is to get whatever data you need from your user, and then pass it on to the Hint API (and of course, showing the user successes or errors accordingly). Passing data to Hint's API requires a server, since you'll need your secret API key to authenticate with the Hint API. The diagram below shows the general flow.

Note - The "signup data" in the diagram below represents any object you may want to send to Hint, whether Patients, Memberships, Cards/Banks, etc. Thus in a real signup page, this means separate API calls for each object you need to create.

Collecting Payment Information

See our updated guide on Collecting payment information

❗️

Do Not Send Hint Sensitive Payment Details

Please note the diagram above. Sensitive payment details like card numbers and bank account numbers should never be sent to Hint. If you are collecting payment details, they should always be sent to Stripe first, so they can be tokenized, and then you send the token to Hint.

Unless you are PCI compliant, you probably don't want card/bank numbers to hit your servers either, which is why the Stripe JS library sends this information from the user's client directly to Stripe (more detail here: https://stripe.com/docs/security)

Handling Errors

When errors occur, it's critical that you inform the user by showing a useful error message. Hint's API helps you with this by providing useful error messages by default, but you will still need to display them back to the user. For more info on Hint API errors, see our page on Handling Errors

Example Flow of Events and API Calls

What follows is a chronological set of events and API calls that could reasonably happen to create a membership using Hint's API.

• Sam lands on your page.
• GET /plans to display all of your available plans to Sam.
• Sam chooses a plan, fills out his information, as well as the information for his spouse Sierra.
• Optionally you can quote the price to Sam using POST /quotes
• Sam accepts your terms of service, the email communication waiver, and confirms he wants to sign up.
• Sam fills out his credit card details through Stripe's Payment Element ( Collecting payment information)
• POST /patient with Sam's info.
• POST /patient with Sierra's info.
• POST /patients/:sam's_id/payment_methods to create a payment methods on Sam's account.
• POST /memberships using the patient IDs you got from creating Sam and Sierra, as well as the Plan ID you got when Sam selected his plan.

At this point, you would have a membership created that would bill later that night. If you want to bill them immediately, you can use the bill action on the membership to accomplish this.