Donate Step 1 - Donation Widget

Primer offers a unique extension to accept donations on your website.

The widget is divided into 3 sections, which are displayed depending on the business case and are therefore invisible or variable if necessary. For end users, this enables a choice or even an obligation to choose.

The donation widget appears in one of its many forms and, with the chosen purpose, also controls the appearance of the subsequent checkout process up to the thank you page.


Corinne Tarnai, Portrait

The Primer Donation solution allows me to customize and integrate donation widgets into the content very quickly and easily. The newly gained flexibility makes my daily work easier.

Corinne Tarnai, Informatics UNICEF Switzerland and Liechtenstein

In case of a single fixed purpose, the selection area "purpose" is omitted. The widget title or intro text must then reference to the purpose, otherwise it will not be mentioned in the widget.


The following cases may occur for visitors:

  • No UI element = No selection
    when the widget is assigned to a specific purpose.
  • Forced selection
    when several purposes are active and no default is selected.
  • optional selection
    when several purposes are active, but a default is set.

Configuration per widget

  • Available purposes
    Ordered selection from the global purpose list
  • Default purpose
    Empty or one of the permitted purposes

If the user selects a different donation purpose, the widget will be reloaded, because the purpose configuration (allowed donation types and amounts) may differ.


Values: Single value or recurring value with interval X

When only one type of donation is enabled, the area "Type" is omitted. If only recurring donations are allowed, this area is still shown in the widget.


The following cases may occur for visitors:

  • No selection, no UI element when no choice is possible
    when the widget is assigned to a specific type (e.g. only single donation or only annual).
  • Forced selection
    when several types are active and no standard is selected.
  • Optional selection
    when types are active, but a default is set.

If only one interval is allowed, the selection is omitted. The widget description should mention that it is a recurring charge. The donation summary on the checkout page reminds you again that it is a recurring charge.

The choice of a recurring type restricts the means of payment to those that allow recurring charges.

The permitted intervals are output in fixed order. The first in the list does not necessarily have to be the standard one.

The globally defined purpose defines among other things, which intervals are allowed. See "Purpose Definition" below.


The amount is always displayed in the widget.


The following cases may occur for visitors:

  • Fixed amount
  • Forced selection
    when several amounts are active and no standard is selected.
  • Optional selection
    when several amounts are active, but a default is set.

The amounts are displayed in a two-column grid. If an individual amount is allowed and appears on a separate line, the input field is expanded to the entire width.

The allowed amounts as well as the standard amount can be varied for single donations as well as per interval. If the interval is changed, the amounts are recalculated using the basis.

The permitted amounts are output in the defined order. The first in the list does not necessarily have to be the standard one.


Anhand eines Fortschrittsbalken wird aufgezeigt, wie viel vom Ziel-Betrag des Spendenaufrufes bereits eingegangen ist, wobei nur die abgeschlossenen Transaktionen berücksichtigt werden.

Der Fortschrittsbalken kann im jeweiligen Zweck des Spenden-Widgets definiert werden und wird am oberen Rand des Spenden Widgets angezeigt.

Mithilfe von Tokens wird der Betrag in der Nachricht automatisch angepasst.


Mit dem dynamischen Element wird einem Spender oder Besucher der Website der Fortschritt des Spendenaufrufes transparent aufgeführt und soll zur Mitwirkung auffordern.

The functionality and the design of the donation widget and the entire donation process can be customized according to individual specifications.