Forms module

With Paperbits Forms module your users can make custom input forms for various purposes, e.g. "user registration", "product checkout (and payment)", "leave a comment", etc.

To get started with Forms, you'll need to:

1. Install the package

> npm install @paperbits/forms

2. Import and register it in startup files (startup.design.ts and startup.publish.ts)

import { FormsModule } from "@paperbits/forms/forms.module";

injector.bindModule(new FormsModule());

Now, when you rerun the project (npm start), the new "Form" widget should appear in Widget Selector. If you place it on the page and click "plus" button on it, you'll see a list of input controls that you can add to the form and configure as needed (for instance, you can set an initial value or specify a placeholder text).

When your Form is ready, you can see it in action on a published website:

> npm run publish

Speaking of "action", there is a property on the Form widget itself named like that. It expects a URL of where the form data needs to be submitted. In case you don't already have an endpoint for this purpose, the next step provides an example of how to implement it.

Firebase Cloud Functions as a backend

Just like most of our examples, this one also based on Firebase platform. This time we're going to use Cloud Functions to implement a backend for the form. Here's what we do:

1. Install Firebase tools (globally):

> npm install -g firebase-tools

2. Clone repository with Paperbits examples:

> git clone https://github.com/paperbits/examples.git

3. Head into the folder of the just cloned repository and install dependencies:

> cd examples/forms/firebase-cloud-functions
> npm install

4. Now, to be able to manage and deploy Cloud Functions, you need to log-in to Firebase account (hopefully you already have one):

> firebase login

5. Once you logged in, you need to add a project from your Firebase account:

> firebase use --add

6. Now you can explore the example (which consists of a single index.ts file) and debug it locally:

> firebase serve

This command instructs Firebase Tools to launch the Function locally and listen at endpoint similar to:

http://localhost:5000/<your-firebase-project>/submitForm

As you have guessed, this URL you need to put into "Action" property of your Form widget.

7. When everything is ready, you can deploy the Cloud Function to Firebase:

> firebase deploy --only functions

At this point, the action URL for your form changes to:

https://<your-firebase-project>.cloudfunctions.net/submitForm

Payment forms with Stripe

Let's look at another example of backend implementation for forms (also based on Cloud Functions). Here we're going to create a credit card payment form and set up the processing with Stripe - a popular platform for online payments.

The process is fairly straightforward: a form submits credit card data to Cloud Function which, in turn, makes a record in the database and sends another request to Stripe REST API using secret API key.

Assuming you went through all the previous steps, you have already cloned Paperbits examples repository and only need to switch to another folder and install dependencies.

1. Switch to Stripe sample project

> cd examples/forms/firebase-cloud-functions-stripe
> npm install

2. Create your Stripe account

Just go to the registration page and follow the steps.

3. Get Stripe API key

To call Stripe API you need a key that can be found in API keys section

(Stripe dashboard > Developers > API keys).

Then, you can add it to Firebase configuration so that our Function could pick it up at runtime:

> firebase functions:config:set stripe.token=<your-stripe-api-key>

4. Enable billing on your Firebase project

Unfortunately, Cloud Functions running on free Firebase plan (called "Spark") are not allowed to call any non-Google services (including Stripe), so in order to make it work, you'll have to switch to Blaze or Flame plan (see pricing details).

5. Create a Payment Form

Everything is ready to actual test. As usual, run the project by executing:

> npm start

To save you some time, we have added "Credit card payment form" design block, so that you can drop it on the page right away and just fill-in your project name in Action field of the form:

https://<your-firebase-project>.cloudfunctions.net/submitPayment

Finally, publish the website, go to your form and try to submit a payment or two. See your test payments appear in Events section of Stripe dashboard.