Getting Started with Pre-Approvals

Get up and running with Pre-Approvals with our step-by-step guide.

​

Prerequisites

Before diving into the integration process, ensure you have the following:

1. Sign up for a Drivly account
2. Create a DRIVLY_API_KEY.
3. Basic understanding of TypeScript and REST APIs.
4. A secure environment for handling sensitive data.
5. Install the Drivly SDK

yarn add @drivly/commerce

​

Overview

The concept of pre-approvals is to allow a user to get pre-approved for a loan before they start shopping for a car. This allows the user to know how much they can afford and what their interest rate will be. This is a great way to get users to commit to a purchase.

To complete this scenario, you will need to:

1. Install Dependencies
2. Create a Schema
3. Setup the SDK
4. Create a Pre-Approval
5. (Bonus) Update a Pre-Approval

​

Install Dependencies

This guide uses some other dependencies along with the Drivly SDK. Let’s install those dependencies.

yarn add zod react-hook-form @hookform/resolvers

​

Create a Schema

Next, we will use Zod to create a schema for the Pre-Approval. This schema will be used to validate the form data before we send it to the server.

import * as z from 'zod'
import { states } from './states'

export const PreApprovalSchema = z.object({
  firstName: z.string(),
  middleInitial: z.string().optional(),
  lastName: z.string(),
  suffix: z.enum(['', 'JR', 'SR', 'II', 'III', 'IV']).optional().nullable(),
  email: z.string().email(),
  phone: z.string().min(5),
  address: z.string(),
  city: z.string(),
  state: z.enum(statesArray),
  zip: z.string().min(5),
})

export type PreApprovalSchemaType = z.infer<typeof PreApprovalSchema>

​

Setup the SDK

Let’s create a singleton instance of the SDK and export it for use in our application.

import { SDK } from '@drivly/commerce'

export const sdk = SDK({
  apiKey: process.env.DRIVLY_API_KEY as string,
  environment: process.env.VERCEL_ENV === 'production' ? 'production' : 'sandbox',
})

​

Create a Pre-Approval

Now that we have the schema and the SDK setup, we can create the form that will be used to collect the user’s information. We will use react-hook-form to handle the form state and @hookform/resolvers to use the Zod schema to validate the form data.

We will Server Actions for this example.

We also need a server action to handle the creation of the pre-approval. This action will use the SDK to create the pre-approval and return the pre-approval ID.

import { PreApprovalSchema, PreApprovalSchemaType } from './PreApprovalSchema'
import { zodResolver } from '@hookform/resolvers/zod'
import { SubmitHandler, useForm } from 'react-hook-form'
import { createPreApproval } from './preapproval.action'

export default function PreApprovalForm() {
  const form = useForm<PreApprovalSchemaType>({
    resolver: zodResolver(PreApprovalSchema),
    defaultValues: {
      firstName: '',
      middleInitial: '',
      lastName: '',
      suffix: undefined,
      email: '',
      phone: '',
      address: '',
      city: '',
      state: '',
      zip: '',
    },
  })

  const onSubmit: SubmitHandler<PreApprovalSchemaType> = async (data) => {
    const result = await createPreApproval(data)
    console.log(result.message)
  }

  return <form onSubmit={form.handleSubmit(onSubmit)}>{/* ... */}</form>
}

​

Update a Pre-Approval

If we need to update or add information to their pre-approval, we can use the updatePreApproval action.

'use server'

import { UpdatePreApprovalParams } from './shared.param.types'
import { sdk } from './sdk'

export const updatePreApproval = async (params: UpdatePreApprovalParams) => {
  try {
    const { id, data } = params
    const update = await sdk?.commerce.preApprovals.updateById({
      id,
      patch: data,
    })

    if (!update) throw new Error('Pre-approval failed to update')

    console.log('Pre-approval updated:', update)
  } catch (error) {
    console.error(error)
  }
}

​

Conclusion

You have successfully created a form that will allow users to get pre-approved for a loan. You have also created a server action that will use the SDK to create the pre-approval. You can now use this form to get users pre-approved for a loan.

You can also use the updatePreApproval action to update the pre-approval if more information is needed from the user (e.g. income).

​

Next Steps

Ready to get started with Pre-Approvals? Check out the official Drivly SDK documentation to learn more.