Donation Button

The Donation Button is a script to embed in your website to open a donation modal directly on the page, without a redirect. The checkout is loaded in an iframe overlaid on the page through a modal window.

Guided generation from Riseact

To generate the code without writing HTML by hand, go to the campaign detail on Riseact, open the Actions menu and click on Donation button. The form lets you configure appearance and behavior. Copy-paste the ready-to-use code!

Embedding

For each button you want to add to the page, insert three elements in the HTML:

1. A <button> element with the class riseact-donate-btn
2. A <script> block with the configuration
3. The <script> tag that loads the Riseact script (only needed once)

<button class="riseact-donate-btn">Dona ora</button>

<script>
  (window.riseactDonateBtns = window.riseactDonateBtns || []).push({
    checkoutUrl: "https://tua-org.riseact.site/campaigns/nome-campagna/donate"
  })
</script>

<script src="https://checkout.riseact.org/donate-button.js"></script>

info

You can insert multiple buttons on the same page. Repeat the <button> + configuration <script> block for each one, then load the script only once at the end.

Configuration parameters

Parameter	Type	Required	Default	Description
checkoutUrl	string	Yes	-	URL of the campaign's Riseact checkout
buttonColor	string	No	#7f20df	Hexadecimal color of the button
width	string or number	No	50%	Width of the checkout window. Accepts a percentage ("70%") or pixels (800 or "800px")
height	string or number	No	80%	Height of the checkout window. Accepts a percentage ("90%") or pixels (600 or "600px")
closeOnOuterClick	boolean	No	false	If true, closes the modal on a click on the shaded area outside the checkout
closeButtonSize	string or number	No	1rem	Size of the close "×" in pixels (24) or as a CSS string ("1.5rem")
closeButtonColor	string	No	#000000	Hexadecimal color of the close "×". Useful when the page background is dark
redirectUrl	string	No	-	URL to redirect the page to upon donation completion. If not set, the modal closes and the checkoutCompleted event remains available for custom listeners on the page

Prefilling

The checkoutUrl accepts prefilling parameters in the query string to pre-populate personal fields, amount and frequency before the donor opens the checkout.

Complete example

<button class="riseact-donate-btn">Dona ora</button>

<script>
  (window.riseactDonateBtns = window.riseactDonateBtns || []).push({
    checkoutUrl: "https://tua-org.riseact.site/campaigns/nome-campagna/donate",
    buttonColor: "#805AD5",
    width: "70%",
    height: "85%",
    closeOnOuterClick: true,
    closeButtonSize: 24,
    closeButtonColor: "#ffffff",
    redirectUrl: "https://tuosito.it/grazie"
  })
</script>

<script src="https://cdn.riseact.org/donate-button.js"></script>

Handling donation completion

At the end of the checkout, the iframe sends a checkoutCompleted event to the parent page via postMessage.

With redirectUrl set: the modal closes and the page is redirected to the specified URL.

Without redirectUrl: the modal closes and the event remains available. You can intercept it with a custom listener added before the Riseact script tag:

<script>
  window.addEventListener('message', function(event) {
    if (event.data?.type === 'checkoutCompleted') {
      console.log('Donazione completata!', event.data.payload);
    }
  });
</script>

<script src="https://cdn.riseact.org/donate-button.js"></script>