Subscription/Customer document in Sanity

In this section, we need to define the subscription and customer documents. For the respective documents, we need to store the following data.

1. In the customer document, we store the email and password of the user.
2. In the subscription document, we need to store the payment detail of the recipient from the Stripe dashboard.

Customer document

Firstly, we need to define the schema for the customer document. For the customer document, we can create the file at the below location:

• /schemas/documents/customer.js

In the customer.js document, we can paste the code as below.

import { MdEmojiEmotions } from 'react-icons/md'

export default {
  name: "customer",
  title: "Customer",
  type: "document",
  icon: MdEmojiEmotions,
  fields: [
    {
      name: "name",
      title: "Customer Name",
      type: "string",
    },
    {
      name: "email",
      title: "Customer Email",
      type: "string",
      validation: (Rule) =>
        Rule.regex(
          /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/,
          {
            name: "email", // Error message is "Does not match email-pattern"
            invert: false, // Boolean to allow any value that does NOT match pattern
          }
        ),
    },
    {
      title: "Password",
      name: "password",
      type: "string",
    },
  ],
  preview: {
    select: {
      title: "name",
      subtitle: "email",
    },
  },
};

The customer document preview in the Sanity Studio is as below:

As shown in the above Gif, the Sanity validates the email input. The Sanity schema does not have email schema input. Therefore, we can use the string schema input and validate the email using regex as shown in the below code.

Subscription document

We need to define the schema for the subscription documents. Later in the project, We are using Stripe API to process the user payment. We use the subscriptions/create API to handle subscriptions payments for the customers. You can read more about subscriptions/create API in the below link.

• https://stripe.com/docs/api/subscriptions/create

In the Stripe checkout, when the user completes the payment, the Stripe sends the response data back as a result. We need to store the subscription response object in the Sanity server for our record. As explained in the below image, a few important information from the response object from the Stripe subscription API is stored in the Sanity Server.

In the Subscription document, we need to format the dates. For that, we can install the date-fns npm package.

• https://www.npmjs.com/package/date-fns

To install the date-fns npm package, we can execute the below command in the terminal:

npm i date-fns

For the subscription document, we can create the document in the below location:

• /schemas/documents/subscriptions.js

In the subscriptions.js, we can paste the code as below.

import React from 'react'
import { MdSubscriptions } from 'react-icons/md'

import { format } from 'date-fns'

export default {
  name: "subscriptions",
  title: "Subscriptions",
  type: "document",
  icon: MdSubscriptions,
  fields: [
    {
      name: "subID",
      title: "Subscription ID",
      type: "string",
    },
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "customer",
      title: "customer",
      type: "reference",
      to: { type: "customer" },
    },
    {
      name: "price",
      title: "Price",
      type: "reference",
      to: { type: "price" },
    },
    {
      title: "Plan keyword",
      name: "plankey",
      type: "string",
    },
    {
      title: "Cancel at period end",
      name: "cancel_at_period_end",
      type: "boolean"
    },
    
    {
      title: "Canceled at",
      name: "canceled_at",
      type: "datetime"
    },
    {
      title: "Cancel at",
      name: "cancel_at",
      type: "datetime"
    },
    {
      title: "Live Mode",
      name: "livemode",
      type: "boolean"
    },
    {
      title: "Start date",
      name: "start_date",
      type: "datetime"
    },
    {
      title: "Status",
      name: "status",
      type: "string"
    }
  ],
  preview: {
    select: {
      title: 'title',
      start_date: 'start_date',
      status: 'status'
    },
    prepare: ({title, start_date, status}) => {
      let previewData = format(new Date(start_date), 'MMMM yyyy')
      const EMOJIS = {
        active: '✅',
        pending: '🎫',
        canceled: '🚫',
        incomplete: '😞',
        incomplete_expired: '⌛',
        trialing: '🌠',
        past_due: '👀',
        unpaid: '😶'
      }
      
      return {
        title,
        subtitle: `${status}, Subscribed on  ${previewData}`,
        media: <span style={{fontSize: '1.5rem'}}>
                  {status ? EMOJIS[status] : '🎫'}
                </span>
      }
    }
  }
};

The subscription document preview in the Sanity Studio is as below:

Let's explain the code of the subscription document.

In the Stripe subscription, the user subscription can have to follow the subscription status as below.

active, pending, canceled, incomplete, incomplete_expired, trialing, past_due, unpaid

For example, if the user subscription is successful, the subscription status is active...

In the subscription document, we can write the code as below:

Great! In the next section, we learn how to query the Sanity document data using the GROQ language.