Embed a FundraiseUp (FRU) modal directly on mozilla.org.

[enavajas]

Hello. We recieved a request to embed a FundraiseUp (FRU) modal directly on mozilla.org. Below are the steps I received:

• Step 1 - Update CSP Policy:

To ensure that FundraiseUp elements can render correctly on the site, please update your Content Security Policy with the directives described in the FundraiseUp documentation.

• Step 2 - Add FundraiseUp Installation Script:

Add the Mozilla Foundation's FundraiseUp Installation Code to your website by placing the following JavaScript snippet within the global section of your HTML, ideally as the last script.

To confirm installation, inspect the area of your website’s source code; the installation code should be present.

<!-- Fundraise Up: the new standard for online giving -->
<script>
(function(w,d,s,n,a){
  if(!w[n]){
    var l='call,catch,on,once,set,then,track'.split(','),
        i,o=function(n){return 'function'==typeof n?o.l.push([arguments])&&o
          :function(){return o.l.push([n,arguments])&&o}},t=d.getElementsByTagName(s)[0],
        j=d.createElement(s);j.async=!0;j.src='https://cdn.fundraiseup.com/widget/'+a;
        t.parentNode.insertBefore(j,t);o.s=Date.now();o.v=4;o.h=w.location.href;o.l=[];
    for(i=0;i<7;i++)o[l[i]]=o(l[i]);
    w[n]=o
  }
})(window,document,'script','FundraiseUp','ADCYPWMX');
</script>
<!-- End Fundraise Up -->

• Step 3: Link to Campaign Forms

To display a FundraiseUp campaign's checkout modal when a user clicks a link:

1. Access the desired campaign's page on the FundraiseUp dashboard and note the query parameter in the URL found in the “Checkout Modal” section. In this example, the parameter is “?form=donate”

2. Append the query string "?form=donate" to the href attribute of the desired link/button https://mozilla.org/?form=featured-section

3. Now when the user clicks on the link, the checkout modal will appear:

• Step 4: Make a Test Donation

To test the functionality, add "&fundraiseupLivemode=no" to the URL after the checkout modal is triggered and refresh the page. This allows you to make test donations without processing actual funds, as test card details will be provided to you once the checkout process begins.

[craigcook]

https://www-demo9.allizom.org/?form=donate

Collecting a few thoughts after an initial pass, in no particular order:

1. The FundraiseUp docs on CSP recommend giving pretty broad permissions to several entire domains, so we may need to consider the security implications of that. Perhaps we can tighten it up without breaking the widget (e.g. do we actually need to allow all of *.paypal.com or are there specific subdomains we can limit it to? Do we really need to allow fonts from those domains or can we use system fonts or our own webfonts? How much control of the widget styling do we get?).

2. This is a pure JavaScript widget and of course fails completely if JavaScript is disabled or there's an error of any kind. We also need to consider that it may become nonfunctional with various adblockers or tracking protections blocking any of the (MANY) scripts being injected.

3. We'll need to write some functional tests.

4. If this widget is global (i.e. can appear on any page if you load that page with the ?form=foo query string) does that mean all our current donate links will become non-links and just invoke the widget instead of going somewhere? href="#?form=foo?

5. I think we'll still need an actual www.mozilla.org/donate/ page that people can link to.

6. I'm not sure how l10n works for the widget. They do support lots of languages, but they don't seem to detect language automatically. Seems like we may have to configure it per URL? https://fundraiseup.com/docs/localization-settings/

7. This adds about 400k of third-party JavaScript to the pageload (EVERY pageload if we embed it globally) and that's before the widget appears. Once it's invoked (which, when it's triggered by a query param, means it's triggered on pageload) it injects another 5MB(!!) of third-party JS. We can try to mitigate that and only load scripts when actually called for, but the basic implementation isn't very performant.

[alexgibson]

We also need to get confirmation from legal that the MoFo implementation of this form is OK to load in EU/EAA countries without a cookie banner, or if a banner is required. FundraiseUp have a doc here that lists their essential/non-essential cookies, but I'm not clear if our config is already restricting cookies to only those that are essential. We need to confirm with MoFo/legal teams before this goes live.