Skip to main content

Donation Button

Il Donation Button è uno script da incorporare nel tuo sito: apre il checkout in una modale sulla pagina, dentro un iframe, senza redirect.

Generazione guidata da Riseact: Dal dettaglio della campagna, menu Azioni > Pulsante di donazione, configuri aspetto e comportamento e copi il codice pronto.

Embedding

Per ogni bottone servono un <button> con classe riseact-donate-btn e un blocco <script> con la configurazione. Lo script Riseact si carica una sola volta, dopo tutti i bottoni.

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

Parametri di configurazione

ParametroTipoObbligatorioDefaultDescrizione
checkoutUrlstringSì-URL del checkout Riseact della campagna
buttonColorstringNo#7f20dfColore esadecimale del bottone
widthstring o numberNo50%Larghezza della finestra di checkout, in percentuale ("70%") o pixel (800 oppure "800px")
heightstring o numberNo80%Altezza della finestra di checkout, in percentuale ("90%") o pixel (600 oppure "600px")
closeOnOuterClickbooleanNofalseSe true, la modale si chiude cliccando fuori dal checkout
closeButtonSizestring o numberNo1remDimensione del pulsante di chiusura, in pixel (24) o come stringa CSS ("1.5rem")
closeButtonColorstringNo#000000Colore esadecimale del pulsante di chiusura
redirectUrlstringNo-URL a cui reindirizzare la pagina a donazione completata

checkoutUrl accetta i parametri di prefilling.

Esempio completo

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

Donazione completata

A fine checkout l'iframe invia alla pagina un evento checkoutCompleted via postMessage e la modale si chiude. Se c'è redirectUrl la pagina viene reindirizzata; altrimenti puoi intercettare l'evento con un listener aggiunto prima dello script Riseact:

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

Fonte: https://dev.riseact.org/docs/checkout/donation-button. Copia automatica da dev.riseact.org: non modificare qui, le modifiche vanno fatte sulla documentazione Docusaurus.

Back to top