6 Steps To Add Stripe Donate Button In WordPress Websites

The emergence of e-commerce solutions along with online payment processors has given a boost to internet-based commerce. Services like Stripe have made it easy for e-commerce operators to accept payments on their websites. However, it is not only online businesses who need a facility for accepting money. There are numerous other websites which need to have the feature to fulfill different purposes. Many websites for non-profits would like to have a feature for accepting donations. In case, they were using a WordPress website, they had to install an e-commerce plugin for the purpose. However, now it is possible to add Stripe donate button in WordPress interfaces without using such plugins. A simple payment form will be enough for the task. The following steps will help you easily conduct the process.

1. Set Up A Stripe Account 

First, you will need to create a Stripe account in order to be able to process donations through the service. Stripe is a popular online payment processor which provides the necessary infrastructure for conducting monetary transactions through your website. You can create an account with the service for free. Stripe will charge a fee on every transaction you conduct through it. Visit its website and then click on the sign-up link for creating your account. Follow the instructions to complete the process and then move to the next step.

2. Install A Form Plugin 

As mentioned before, we will add the functionality of accepting donations through Stripe without using an e-commerce solution. Instead, we will use a form to do the needful. You will need a form plugin for generating a donation form. Before you install the tool, it will be pertinent to remind you that you must implement an SSL certificate to your website. People do not want to share sensitive personal data like credit card details on interfaces which are not secure. An SSL certificate adds a protective layer to your website. It also adds the vital visual indicator “HTTPS” in your URL which signifies the secure nature of the interface to visitors.

In this tutorial, we are using the Contact Form by WPForms plugin to build our form. It is a powerful freemium product which helps in generating all kinds of forms. Go to the admin dashboard of your installation and visit the Plugins section. Click on Add New and then search for the tool. Use the below image to identify and download the correct product.

3. Install The Stripe Addon 

Many people conduct Drupal to WordPress conversion or other migrations to shift to the platform. They must remember that a plugin needs to be activated after installation in order to function. Activate the tool and then go to WPForms > Addons. Locate the Stripe Addon and then hit the Install Addon button.

 

4. Connect WPForms To The Stripe Account

In order to add Stripe donate button in WordPress, we will first need to connect WPForms to our Stripe account. This is necessary for enabling payments through the processing service on the website. Locate the WPForms option in the control panel menu and go to the Settings option under it. The screen which opens now will list various tabs. Switch to the Payments tab where you will need to provide the Stripe API keys. These codes can be found by visiting your profile on the Stripe website.

Log in to the dashboard of the processor and select API Keys in the Developers option in the menu on the left-hand side.

Copy the Publishable key and then paste it in the Live Publishable Key field in the WPForms settings screen. Now click on the Reveal live key token tab in the Stripe dashboard.

Copy the secret key and paste it in the relevant section in the WPForms settings page. Toggle the radio button against the View test data option to the on position. Copy the test API keys and then paste them in the relevant fields in the WordPress dashboard. Hit the Save Settings tab at the bottom of the screen.

5. Create The Stripe Donation Form 

We will now create the donation firm with a Stripe button, with the plugin. Go to your website’s control panel and select the Add New option under WPForms. You will now have to enter a title for the form and choose a template for it. Provide a tile and then select the Donation Form template option in the list.

The form builder will now open the chosen layout. The basic fields like name, e-mail, donation amount, etc. are already included in the design. You can drag other fields from the menu on the left-hand side and drop onto your layout. Do not forget to add a credit card field. You can find it in the Payment FIelds section.

Make all the design modifications and then click on the Payments tab in the toolbar on the left-hand side. Tick the box against the Enable Stripe Payments option. Select the e-mail option if you want to send a receipt for the contribution to the donors.

Move to the Settings tab and choose a confirmation option. Provide a confirmation message and then press the save button to confirm the changes.

6. Add The Form To The Website 

Open the post or page where you want to place the form in your editor. Add the WPFroms block to the content and then select the donation form built in the previous step. The plugin will now embed the form in the desired location. You can display the form through a widget in a widget-ready location.

Conclusion

This simple process will enable you to add a Stripe-enabled donation form on your website. You also have the option of hiring WordPress customization experts for doing the job.