Skip to main content

Using URL Parameters

The donation form can be customized via URL parameters.

Additionally, when a donation is successful and the donate form is set to jump to a thank-you page, some information is passed to the new page via other parameters.

You could use the information in the URL to alter how your page looks. We'll explain that below.

Where we're going​

Let's say we have a simple Thank You page:

<h1>Thank you!</h1>

This is good, but we can do better.

We want to check if the donation was a one-off (that is: a non-recurring), and if so we want to give the supporter the option to upgrade to a recurring donation.

How we'll do it​

First, we check whether the donation was a one-off, and if so we alter the page's HTML to change what is visible.

Was it a one-off?​

Here's a small JavaScript function to extract the donation info. You could place this in the <head> of your thank-you page. (If you have many pages, you'll probably want to use something like Google Tag Manager to load this same function on all your pages.)

<script>
/** Get donation info from donate redirect URL parameters.
 */
function getDonationInfo() {
  var url = new window.URL(window.location.href);
  return {
    amount: url.searchParams.get('amount'),
    firstName: url.searchParams.get('firstName'),
    recurring: url.searchParams.get('recurring') === 'true',
    meta: JSON.parse(decodeURIComponent(url.searchParams.get('meta')) || null),
    transaction: {
      id: url.searchParams.get('transactionId'),
    },
  };
}
</script>

Assuming that function is loaded, we can use it like so:

<script>
var donationInfo = getDonationInfo();
</script>

Update the page​

We'll add to the code above:

if (donationInfo.recurring) {
  document.body.classList.add('recurring-gift');
} else {
  document.body.classList.add('one-off-gift');
}

This adds some CSS to the <body> of the page.

Now to hide or show elements, we can make use of those classes.

We'll first add the donate form:

<h1>Thank you!</h1>

<div class="hide-if-recurring">
  <div id="gpap-donate-widget" />
</div>

and finally we can update the CSS in the <head> of our HTML:

<head>
  <style>
  .hide-if-recurring {
    display: none;
  }
  body.one-off-gift .hide-if-recurring {
    display: block;
  }
  </style>
</head>

That gives the browser two (CSS) rules:

  1. By default, hide (display: none) the donate form.
  2. Override rule #1 if the class "one-off-gift" is present on the body element, and in this case show (display: block) the donate form.

Conclusion​

In this recipe, we've made a simple thank you page which hides or shows an additional donate form depending on donation information which we found in the URL parameters.