Prevent tracking from Stripe and Ko-fi widgets on Faircamp

When I first added a Ko-fi iframe and a Stripe widget to my Faircamp site, I forgot to check for trackers and cookies. I was not happy to discover that both of them had been tracking my visitors. Rather than remove the payment options from the site, I decided to hide the third party content and require people to click a button to activate it. Below is a description of how I did it.

Stripe

The Stripe button loads a script on startup which creates a custom HTML tag called stripe-buy-button. When the script is loaded, the button will be rendered. The problem is that the script also loads trackers. To solve this I added a button which will run the script when clicked. Before the button has been clicked, the stripe-buy-button will not be rendered.

In the eno file, add the following inside a -- custom block:

<script>
  function loadStripe() {
    document.getElementById('load-stripe-button').remove();
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', 'https://js.stripe.com/v3/buy-button.js');
    document.head.appendChild(script);
  }
</script>

<button onclick="loadStripe()" id="load-stripe-button">Click to load Stripe. This will run a script from Stripe which may use cookies.</button>
<stripe-buy-button ...></stripe-buy-button>
  

You can add any other text and tags inside the same -- custom block. This is just what's needed for the Stripe button.

The loadStripe function

This is the function which loads the Stripe button. The first line removes the load button, to make it impossible to click it more than once. Line 2-4 dynamically creates a new script tag. Finally, line 5 adds the script tag to the page head. When the script tag is added, the stripe-buy-button becomes valid HTML, and will load.

The load button

There are three parts to this button, the onclick parameter, the id parameter, and the text that appears on the button.

The onclick parameter tells the button to run the loadStripe function when clicked.

To make it possible for the script to remove the button, it must be able to find it. That's made possible by the id tag.

The text can be changed to whatever you want it to be, or just keep it like in the example.

The stripe button

In the example above you'll need to replace the ... with the buy-button-id and publishable-key parameters. Just copy and paste what you get from Stripe.

Ko-fi

Ko-fi does things different from Stripe. Rather than loading a script, it loads the entire thing inside an iframe. So there's no need to create a script element and add it to the page head.

In the eno file, add the following inside a -- custom block:

<script>
  function loadKoFi() {
    document.getElementById('load-kofi-button').remove();

    var iframe = document.getElementById('kofiframe');
    iframe.src = 'https://ko-fi.com/[your Ko-fi username]/?hidefeed=true&widget=true&embed=true&preview=true';
    iframe.height = '712';
    iframe.style = 'border:none;width:100%;padding:4px;background:#f9f9f9;';
  }
</script>

<button onclick="loadKoFi()" id="load-kofi-button">Click to load Ko-fi. This will run a script from Ko-fi which may use cookies.</button>
<iframe id='kofiframe' style='visibility: hidden;' height='0' display='None' title='[your Ko-fi username]'></iframe>
  

As with the Stripe button, you can add any other text and tags inside the same -- custom block. This is just what's needed for the Ko-fi widget.

The loadKoFi function

This function will load the Ko-fi widget inside the iframe. The first line removes the load button. Then the iframe element is fetched, and some parameters are set on it:

• iframe.src: This is the link to your Ko-fi profile. Edit the link in the script to point to your Ko-fi profile
• iframe.height: The height of the iframe. For the widget I use 712 is the default, but you can experiment with this setting if you want another height.
• iframe.style: This sets the style of the iframe to make it visible.

The load button

This button is almost exactly the same as in the Stripe example. The function name and id are different. These names can be whatever you want, as long as they are the same in the script.

The iframe

The original iframe which I copied from the Ko-fi website was like this:

<iframe id='kofiframe' src='https://ko-fi.com/defaultmediatransmitter/?hidefeed=true&widget=true&embed=true&preview=true' style='border:none;width:100%;padding:4px;background:#f9f9f9;' height='712' title='defaultmediatransmitter'></iframe>
  

The src parameter must be removed, to prevent the widget from loading when the page loads. Because I don't want the widget to be visible at all before the load button is clicked, some other settings must be changed:

• style: The style provided by Ko-fi is set in the loadKoFi function. Before loading we want it to be hidden, so we only need to set it to visibility: hidden
• height: Set it to 0 here, and it will be reset by the loadKoFi function
• display: We don't want the hidden widget to take up any space on the page, so this is set to None