Ako na vlastnú darovaciu stránku?

Pozeráte sa na ukážku jednoduchej implementácie vlastnej darovacej stránky, ktorej základom je formulár, resp. jeho následné odoslanie. Ukážka je doplnená o vysvetlivky pre jednotlivé premenné, polia a ich hodnoty.

V tomto príklade sa používa: Static HTML 5.0 • CSS: Bootstrap 4.5.0 • JS: jQuery 3.5.1 • Validation: Browser native (Constraint validation)

<form>

FORM tag musí obsahovať atribúty 1. action="https://..." a 2. method="post". Cieľová adresa (viď "action") je stránka vašej kampane v systéme darujme.sk, napr. "https://cpftest.darujme.sk/zazite-filantropiu-na-vlastnej-kozi-2497f/". Táto stránka musí existovať a musí byť funkčná. Na túto stránku odchádzajú odoslané údaje z tohto formulára. Cieľová adresa slúži následne ako "resolver", t.j. spracovateľ odoslaných údajov. Ak sú odoslané údaje v poriadku a sprocesované systémom, zobrazí sa podľa zadanej platobnej metódy buď ďakovná stránka, alebo stránka platobnej brány. Naopak, ak nie sú údaje v poriadku, zobrazí sa stránka kampane, kde sú označené polia, ktoré chýbajú, majú zlú (nepovolenú) hodnotu apod.
Formulár musí obsahovať položku id_widget, čo je identifikátor vašej vlastnej darovacej stránky, ktorý je možné nájsť v URL pri editovaní darovacej stránky. V tejto ukážke je to "hidden input type". Ukážka takisto pracuje s ďalšími skrytými poliami, ktorých hodnoty sa menia javascriptom podľa toho, či je vybraná fixná alebo vlastná suma, a to rovnako pre jednorázový, ako aj pre pravidelný dar. Rovnako sa menia premenné podľa spôsobu platby Pracujeme teda s:

  1. Widget ID → id_widget, value / example: 0a493a1e-e9a4-42d0-9eb5-04b6534bd64b, required: yes
  2. Výška jednorázového daru → donation_amount_onetime, values: amount_onetime_10 ... amount_onetime_50 or amount_onetime_custom, required: yes
  3. Výška pravidelného daru → donation_amount_periodical, values: amount_periodical_10 ... amount_periodical_50 or amount_periodical_custom, required: yes
  4. Spôsob platby → payment_method_onetime, values: [payment code] or ib, required: yes
  5. Banková metóda → bank_method_onetime, values: [empty] or [payment code], required: yes
Pozor, obe hodnoty polí - "donation_amount_onetime" a "donation_amount_periodical" - musia byť vyplnené (t.j. nie prázdne), a to bez ohľadu na to, aká je zvolená periodicita, inak systém zastaví spracovanie formulára.

Periodicita → periodicity, values: onetime | periodical

Položky pre výber sumy sa menia dynamicky javascriptom (toggle - show/hide) podľa zvolenej periodicity, pretože jednorázový a pravidelný dar môže mať iný set predvolených hodnôt.

Výška daru / Predvolená suma → daof, values: amount_onetime_10 ... amount_onetime_50
"daof" je vlastná, pomocná premenná. Ak sa vyberie predvolená suma, javascript zabezpečí, aby sa sa pole donation_amount_onetime vyplnilo vybranou hodnotou, napr. "amount_onetime_10"

Výška daru / Vlastná suma → custom_sum_onetime, value: number
Vlastná suma môže byť ľubovoľné číslo od 1 do 99999. Je povolené aj desatinné číslo, pričom oddeľovač musí byť "." (bodka), napríklad: "12.50". Ak sa zadá vlastná suma, javascript zabezpečí, aby sa sa pole donation_amount_onetime vyplnilo hodnotou "amount_onetime_custom".

Položky pre výber platobnej metódy sa menia dynamicky javascriptom (toggle - show/hide) podľa zvolenej periodicity, pretože jednorázový a pravidelný dar majú rozdielne dostupné (povolené) platobné metódy a zároveň aj ich identifikátory. Identifikátory platobných metód sú rovnaké pre všetky organizácie.

Spôsob platby → pmo, values: see the list bellow
"pmo" je vlastná, pomocná premenná. Ak sa vyberie predvolený spôsob platby, javascript zabezpečí, aby sa sa polia payment_method_onetime a bank_method_onetime vyplnili správnou hodnotou. Varianty:

Spôsob platby payment_method_onetime bank_method_onetime
CardPay 1342d2af-a343-4e73-9f5a-7593b9978697 [empty]
PayPal c58f76e1-cade-4300-9531-71e275476edd [empty]
Bankový prevod 3dcf55d1-6383-45b4-b098-dc588187b854 [empty]
TatraPay ib 38409407-c4ec-4060-b4a1-4792f29335ad
SporoPay ib c07e714c-74ed-4ac6-ab63-3898a73f1fa0
ePlatby VÚB ib f2e7956e-a3f6-4bff-9e18-2ab3096a5bed

Položky pre výber sumy sa menia dynamicky javascriptom (toggle - show/hide) podľa zvolenej periodicity, pretože jednorázový a pravidelný dar môže mať iný set predvolených hodnôt.

Výška daru / Predvolená suma → dapf, values: amount_periodical_10 ... amount_periodical_50
"dapf" je vlastná, pomocná premenná. Ak sa vyberie predvolená suma, javascript zabezpečí, aby sa sa pole donation_amount_onetime vyplnilo vybranou hodnotou, napr. "amount_periodical_10"

Výška daru / Vlastná suma → custom_sum_periodical, value: number
Vlastná suma môže byť ľubovoľné číslo od 1 do 99999. Je povolené aj desatinné číslo, pričom oddeľovač musí byť "." (bodka), napríklad: "12.50". Ak sa zadá vlastná suma, javascript zabezpečí, aby sa sa pole donation_amount_periodical vyplnilo hodnotou "amount_periodical_custom".

Položky pre výber platobnej metódy sa menia dynamicky javascriptom (toggle - show/hide) podľa zvolenej periodicity, pretože jednorázový a pravidelný dar majú rozdielne dostupné (povolené) platobné metódy a zároveň aj ich identifikátory. Identifikátory platobných metód sú rovnaké pre všetky organizácie.

Spôsob platby → payment_method_periodical, values: see the list bellow, required: yes

  1. ComfortPay: b71ff7cf-39f7-40db-8a34-e1f30292c215
  2. Bankový prevod: f425f4af-74ce-4a9b-82d6-783c93b80f17

Meno → name, values: any, required: yes

Priezvisko → surname, values: any, required: yes

Email → email, values: any, required: yes, validation: yes

Telefón → fdcee4ce-23c6-4154-ab04-bdc54adc1016 (example), custom field: yes, value: any, required: no

Anonymný dar/darca → is_anonymous, value: "on", required: no, validation: no

Súhlas 01 → terms_consent, value: "on", required: yes, validation: yes

Súhlas 02 → gdpr_consent, value: "on", optional, required: yes, validation: yes

</form>