How to add a recurring donation widget to your website with PayWhirl

Setup a recurring donation widget on your website so users can select the frequency and amount of their automated donations.

Ryan P. avatar
Written by Ryan P.
Updated over a week ago

This tutorial will show you how to se-tup a recurring donation widget that will allow your users to enter any donation amount ($) they wish and also select a frequency (daily, weekly, monthly, or yearly) for their future recurring donations. 

These types of donation widgets are sometimes referred to as "flexible" payment forms because the end-user can choose what amount they would like to pay, versus selecting from pre-determined options. The payment amount is "flexible," hence the name.

To create a flexible donation widget, we will chain two widgets together using the forward to widget setting (see Linking Widgets Together) on PayWhirl widgets.

Edit Widget > Advanced Settings > Forward To Widget

In WIDGET #1, users will select the FREQUENCY of their donation:

In WIDGET #2, users will enter the AMOUNT they would like to donate on a recurring basis:

NOTE: The donation amount the user enters into the flexible payment form will process automatically with their selected frequency from WIDGET #1 on a recurring basis. 


WIDGET #1 - PRICING TABLE - FREQUENCY OPTIONS

  • The first widget should be a pricing table widget so users can only select one of the plans, which will set their donation frequency.

  • All of the plans in the first widget should cost $0.00 because we only want users to set the frequency in this step.

  • You can add daily, weekly, monthly and/or yearly intervals.

  • "Clear Cart On Reload" setting should be set to YES.

  • "Forward To Widget" setting (under Chained Widget Settings) should be WIDGET #2.

WIDGET #2- PAYMENT FORM - DONATION AMOUNT

  • The second widget should be a payment form widget set to charge the user a "flexible amount" in the settings (see picture below).

  • "Clear Cart On Reload" setting should be set to NO.

  • "Forward To Widget" setting (under Chained Widget Settings) should be CART.

Once you have both widgets setup and chained, you are ready to embed. You just need to embed the FIRST widget into your website using either of the embed codes we provide at the bottom of the widget settings page.

After you embed WIDGET #1 into a page on your website, you'll be ready to test the donation widget using PayWhirl's built-in test gateway. 

You will notice that the zero charge price of the subscription shows up in the cart. This can be hidden with a bit of custom code.

Finally, change the gateway setting on BOTH widgets to use your LIVE payment gateway, and you'll be set up to collect recurring donations on your website.

Related Articles:

Please let us know if you have any questions. 

Sincerely,
The PayWhirl Team

Did this answer your question?