Adding a Payment Form

Want to accept payments on your site? Here's a walk-through on the steps to do just that.

Overall Steps

1. Create a Stripe account
   Stripe is the credit processor we use on our forms. They process the payment, store credit card and billing info securely and charge 2.9% + 30¢ per payment. Create an account with them and fill out all the necessary info.
   
2. Connect your Stripe account to your Basepage Site
3. Create a form that will accept credit card info
4. Create a subscription or one-time payment
5. Embed on to a page or popup

1. Create a Stripe Account

To create a stripe account, visit https://stripe.com

It'll ask you for your basic info, bank account to deposit money, address, etc. You must fill that out before connecting to your basepage website.

2. Connect your Stripe account to your Basepage Site

To connect your Stripe account with your Basepage site:

1. Connect Account
From your dashboard head over to Forms -> Settings -> Stripe. Then click on Connect Stripe Account.

Set the settings as shown in the screen shot above. You can use the Test Mode to test that everything is working without actually charging a card.

2. Add your Webhook to Stripe

Click on this link and you'll get pop-up with instructions.

Note: Make sure to turn off Test data, if you're ready to start making real purchases on your site.

3. Create a form that will accept credit card info

From your Basepage dashboard, navigate to Forms → Add New and add these fields to the form:

1. Name field
2. Email Field 
3. Stripe Card Field
4. Product field

Adjust the pricing on the product field and name your plan.

Tip: You can also hide/remove labels so you forms looks a little cleaner like ours by going into each field option under appearance.

Save your Form when done.

4. Create a subscription or one-time payment

This step tells Stripe whether you'd to create a subscription or one-time payment.

From the form you just created, click on Settings → Stripe

Click on Add New to create a new feed and select options

5. Embed on to a Page or Pop-up

You can embed a form onto a page or create a popup. To create a popup:

Create Saved Row

1. From the dashboard navigate to Page Editor - Saved Rows - Add New
2. Name the Row (do not make it global)
3. Click on Launch Designer
4. From the "+", search for Gravity Form Styler
5. Drag it to the page and open settings.
6. Under Select Form, find the form you just created
7. Adjust sizing, colors and text size to your liking and Publish

Create Pop-Up

1. Navigate to the page you'd like the popup to appear on
2. Click on Design Editor
3. From the + icon, search for Modal Popup
4. Drag it to your page and it will create a popup button.
5. In the Popup Settings, under Content select type Saved Rows and for Select Row, select the Saved Row you just created.
6. Adjust settings to your liking and you're set!