Donation Button

The Donation Button is a script to embed in your website: it opens the checkout in a modal on the page, inside an iframe, without a redirect.

Guided generation from Riseact

From the campaign detail, Actions menu > Donation button, you configure appearance and behavior and copy the ready-made code.

Embedding

Each button needs a <button> with the riseact-donate-btn class and a <script> block with its configuration. The Riseact script is loaded only once, after all the buttons.

<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>

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, as a percentage ("70%") or pixels (800 or "800px")
height	string or number	No	80%	Height of the checkout window, as a percentage ("90%") or pixels (600 or "600px")
closeOnOuterClick	boolean	No	false	If true, the modal closes when clicking outside the checkout
closeButtonSize	string or number	No	1rem	Size of the close button, in pixels (24) or as a CSS string ("1.5rem")
closeButtonColor	string	No	#000000	Hexadecimal color of the close button
redirectUrl	string	No	-	URL to redirect the page to when the donation is complete

checkoutUrl accepts the prefilling parameters.

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://checkout.riseact.org/donate-button.js"></script>

Donation completed

At the end of the checkout the iframe sends a checkoutCompleted event to the page via postMessage and the modal closes. With redirectUrl the page is redirected; otherwise you can intercept the event with a listener added before the Riseact script:

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

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