Payment Form Widget

In this video we'll take a look at how to add a custom payment form, integrate a payment processor, and style the form!

Introduction

Our latest tutorial will guide you through the process of adding a payment form to your Churchly website. Whether you're collecting payments for events like a kids' camp or accepting donations, this step-by-step guide has got you covered.

Step-by-Step Guide

Step 1: Adding a New Block

• Navigate to the section of your Churchly website where you'd like to add a payment form.
• Select "Add a new block" and choose an empty block. 
• For a balanced design, opt for a block with three columns and adjust the column width to your liking, making the center column larger for emphasis.

Step 2: Inserting the Payment Form Widget

• Scroll through the widget options and locate "Payment Form".
• Drag and drop the Payment Form widget into the center column of your new block.

Step 3: Customizing the Form

• By default, the form requests the submitter's name and email. However, Churchly's form builder allows for customization, enabling you to add additional fields like file uploads, dates, checkboxes, etc.

Step 4: Editing Form Settings

• Under "Edit Settings", name your form appropriately, such as "Kids Camp Payment". This is crucial for organization and tracking purposes, especially when viewing submissions in the "Engage" section.

Step 5: Setting Up Notifications

• Specify the recipient email for form submissions. This can be any email address

associated with your church that is monitoring form submissions.

Step 6: Configuring Payment Settings with Stripe

• Choose your payment gateway (e.g Stripe). On your payment gateway’s dashboard, obtain your API keys (Publishable Key and Private Key).
• Define the payment amount for the event or service, e.g., $200 for a camp registration fee. Alternatively, enable submitters to enter a custom amount, useful for donation forms.

Step 7: Confirmation Message or Redirect

• Decide whether to display a confirmation message post-submission (e.g., "Thanks for registering for Kids Camp!") or to redirect users to a specific page on your website.

Step 8: Finalizing Your Payment Form

• Once your Payment Gateway account is connected, and the necessary payment fields are populated, you can further customize the design of your form to match your website's style.
• Consider adding a header like "Online Giving" and adjust spacing around elements for a clean, professional look.

Step 9: Testing Your Form

• Preview your website to ensure the payment form looks and functions as expected. Note that the payment details section will only display after connecting Stripe and entering your API keys.

Step 10: Publishing Your Form

• After thoroughly testing, publish your changes. Your payment or donation form is now live and ready to accept submissions.

Need Further Assistance? 

If you have any questions or need further assistance, click on the "Need Some Help" button on your dashboard to reach out to our support team. We're here to help you make the most out of your Churchly website and ensure you can effectively reach your community.