Parafin Elements Quickstart

Parafin Widget is a React component available via the @parafin/react npm package that allows you to embed Parafin's capital experience directly within your app. Get up and running in minutes with this quickstart guide.

Prerequisites

• Access to a Parafin dashboard
• Node.js

Instructions

1. Clone repo

First, clone the quickstart repository and install dependencies:

$ git clone https://github.com/buildparafin/embedded-demo.git
$ cd embedded-demo
$ npm install

2. Fetch and include API keys

Next, Navigate to the Settings > API keys in your Parafin dashboard and fetch your sandbox Client ID and Client secret.

Rename the sample.env file to .env and populate with your Client ID and Client secret.

$ mv sample.env .env

# .env
PARAFIN_CLIENT_ID="<your-client-id>"
PARAFIN_CLIENT_SECRET="<your-client-secret>"

3. Create a pre-approved offer

There are a few requirements before you can display a pre-approved offer with @parafin/react:

• Create a Business, Person, and Bank Account
• Generate a Capital Product Offer for the newly created Business
• Replace the personId in the App.js file with the ID from your newly created Person (person_xxx)

See our documentation for more detailed information on how to create a pre-approved offer.

4. Run the app

You're now ready to run the app and check out your embedded offer!

In the project directory, run:

$ npm run dev

Open http://localhost:3000 to view the app with an embedded Parafin Widget in your browser.