{"id":21594,"date":"2026-06-04T07:54:53","date_gmt":"2026-06-04T05:54:53","guid":{"rendered":"https:\/\/www.drugshortage.ch\/?page_id=21594"},"modified":"2026-06-04T07:54:56","modified_gmt":"2026-06-04T05:54:56","slug":"spende","status":"publish","type":"page","link":"https:\/\/www.drugshortage.ch\/index.php\/spende\/","title":{"rendered":"Spende"},"content":{"rendered":"\n<!-- ============================================================\n     Spendenformular mit Stripe\n     Einkopieren als \"Benutzerdefiniertes HTML\"-Block\n     ============================================================ -->\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script>\n<style>\n  #don-outer { width:100%; max-width:480px; box-sizing:border-box; font-family:'Segoe UI',Arial,sans-serif; font-size:13px; color:#2d3748; margin:0 auto; }\n  .don-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:28px 28px 24px; box-shadow:0 2px 8px rgba(0,0,0,.07); }\n  .don-title { font-size:18px; font-weight:700; color:#2d3748; margin-bottom:6px; }\n  .don-subtitle { font-size:13px; color:#718096; margin-bottom:20px; line-height:1.5; }\n\n  \/* Betrag-Buttons *\/\n  .don-amounts { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }\n  .don-amount-btn {\n    flex:1; min-width:70px; padding:10px 6px; border:2px solid #e2e8f0;\n    border-radius:8px; background:#fff; font-size:14px; font-weight:600;\n    color:#4a5568; cursor:pointer; transition:all .15s; text-align:center;\n  }\n  .don-amount-btn:hover { border-color:#e53e3e; color:#e53e3e; }\n  .don-amount-btn.active { border-color:#e53e3e; background:#fff5f5; color:#e53e3e; }\n\n  \/* Eigener Betrag *\/\n  .don-custom-wrap { position:relative; margin-bottom:18px; }\n  .don-currency { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#718096; font-weight:600; font-size:14px; }\n  #don-custom { width:100%; padding:10px 12px 10px 32px; border:2px solid #e2e8f0; border-radius:8px; font-size:15px; font-weight:600; outline:none; }\n  #don-custom:focus { border-color:#e53e3e; }\n\n  \/* Stripe Element *\/\n  #don-card-element { padding:12px; border:2px solid #e2e8f0; border-radius:8px; margin-bottom:6px; background:#fff; transition:border-color .2s; }\n  #don-card-element.StripeElement--focus { border-color:#e53e3e; }\n  #don-card-error { color:#c53030; font-size:12px; margin-bottom:12px; min-height:18px; }\n\n  \/* Button *\/\n  .don-btn {\n    width:100%; padding:13px; border:none; border-radius:8px;\n    background:#e53e3e; color:#fff; font-size:15px; font-weight:700;\n    cursor:pointer; transition:background .2s; margin-top:4px;\n  }\n  .don-btn:hover { background:#c53030; }\n  .don-btn:disabled { opacity:.6; cursor:not-allowed; }\n\n  \/* Spinner *\/\n  .don-spinner { display:inline-block; width:16px; height:16px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:donspin .7s linear infinite; vertical-align:middle; margin-right:6px; }\n  @keyframes donspin { to { transform:rotate(360deg); } }\n\n  \/* Erfolg *\/\n  .don-success { text-align:center; padding:20px 0; }\n  .don-success-icon { font-size:48px; margin-bottom:12px; }\n  .don-success h3 { font-size:18px; font-weight:700; color:#276749; margin-bottom:8px; }\n  .don-success p { font-size:13px; color:#718096; }\n\n  .don-secure { font-size:11px; color:#a0aec0; text-align:center; margin-top:12px; }\n<\/style>\n\n<div id=\"don-outer\">\n  <div class=\"don-card\">\n    <div class=\"don-title\">&#x2764;&#xfe0f; drugshortage.ch unterst\u00fctzen<\/div>\n    <div class=\"don-subtitle\">\n      drugshortage.ch ist ein unabh\u00e4ngiges Projekt, dessen Hauptzweck die Information ist.\n      Ihre Spende hilft uns, die Plattform weiterzubetreiben und zu verbessern.\n    <\/div>\n\n    <div id=\"don-form\">\n      <!-- Betrag-Schnellwahl -->\n      <div class=\"don-amounts\">\n        <button class=\"don-amount-btn\" onclick=\"waehle(5)\">CHF 5<\/button>\n        <button class=\"don-amount-btn active\" onclick=\"waehle(10)\">CHF 10<\/button>\n        <button class=\"don-amount-btn\" onclick=\"waehle(20)\">CHF 20<\/button>\n        <button class=\"don-amount-btn\" onclick=\"waehle(50)\">CHF 50<\/button>\n      <\/div>\n\n      <!-- Eigener Betrag -->\n      <div class=\"don-custom-wrap\">\n        <span class=\"don-currency\">CHF<\/span>\n        <input type=\"number\" id=\"don-custom\" placeholder=\"Eigener Betrag\" min=\"1\" max=\"1000\" step=\"1\" value=\"10\" oninput=\"customBetrag()\">\n      <\/div>\n\n      <!-- Stripe Card Element -->\n      <div id=\"don-card-element\"><\/div>\n      <div id=\"don-card-error\"><\/div>\n\n      <button class=\"don-btn\" id=\"don-submit\" onclick=\"spenden()\">\n        Jetzt CHF <span id=\"don-betrag-anzeige\">10<\/span> spenden\n      <\/button>\n    <\/div>\n\n    <div id=\"don-success\" style=\"display:none;\" class=\"don-success\">\n      <div class=\"don-success-icon\">&#x1f64f;<\/div>\n      <h3>Herzlichen Dank!<\/h3>\n      <p>Ihre Spende wurde erfolgreich verarbeitet.<br>Sie unterst\u00fctzen damit den Betrieb von drugshortage.ch.<\/p>\n    <\/div>\n\n    <div class=\"don-secure\">&#x1f512; Sichere Zahlung via Stripe \u00b7 Keine Kartendaten auf unseren Servern<\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst DON_PK  = \"pk_live_51TbKrfKZkvHmj4lAHnd2h8IIy2E23vOzxFkXqJOiR2X1beTbjgtomEzD4kheM0oneyVHJnJlhABoQPfT8NEQRLxI00vpP0E7mA\";\nconst DON_API = \"https:\/\/www.drugshortage.ch\/api\/api_donation.php\";\n\nconst stripe  = Stripe(DON_PK);\nconst elements = stripe.elements();\nconst cardEl  = elements.create('card', {\n  style: {\n    base: { fontSize: '15px', color: '#2d3748', fontFamily: \"'Segoe UI', Arial, sans-serif\", '::placeholder': { color: '#a0aec0' } },\n    invalid: { color: '#c53030' },\n  }\n});\ncardEl.mount('#don-card-element');\ncardEl.on('change', e => {\n  document.getElementById('don-card-error').textContent = e.error ? e.error.message : '';\n});\n\nlet betrag = 10;\n\nfunction waehle(b) {\n  betrag = b;\n  document.getElementById('don-custom').value = b;\n  document.getElementById('don-betrag-anzeige').textContent = b;\n  document.querySelectorAll('.don-amount-btn').forEach(btn => {\n    btn.classList.toggle('active', parseInt(btn.textContent.replace('CHF ', '')) === b);\n  });\n}\n\nfunction customBetrag() {\n  betrag = parseFloat(document.getElementById('don-custom').value) || 0;\n  document.getElementById('don-betrag-anzeige').textContent = betrag % 1 === 0 ? betrag : betrag.toFixed(2);\n  document.querySelectorAll('.don-amount-btn').forEach(btn => btn.classList.remove('active'));\n}\n\nasync function spenden() {\n  const btn = document.getElementById('don-submit');\n  const errEl = document.getElementById('don-card-error');\n\n  if (!betrag || betrag < 1) { errEl.textContent = 'Bitte geben Sie einen Betrag von mindestens CHF 1 ein.'; return; }\n\n  btn.disabled = true;\n  btn.innerHTML = \"<span class='don-spinner'><\/span> Wird verarbeitet\u2026\";\n  errEl.textContent = '';\n\n  try {\n    \/\/ 1. PaymentIntent erstellen\n    const res  = await fetch(DON_API + \"?action=create_intent\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application\/json\", \"X-Requested-With\": \"XMLHttpRequest\" },\n      body: JSON.stringify({ amount: betrag })\n    });\n    const data = await res.json();\n\n    if (data.error) { errEl.textContent = data.error; btn.disabled = false; btn.innerHTML = \"Jetzt CHF <span id='don-betrag-anzeige'>\" + betrag + \"<\/span> spenden\"; return; }\n\n    \/\/ 2. Zahlung best\u00e4tigen\n    const { error } = await stripe.confirmCardPayment(data.clientSecret, {\n      payment_method: { card: cardEl }\n    });\n\n    if (error) {\n      errEl.textContent = error.message;\n      btn.disabled = false;\n      btn.innerHTML = \"Jetzt CHF <span id='don-betrag-anzeige'>\" + betrag + \"<\/span> spenden\";\n    } else {\n      document.getElementById('don-form').style.display    = 'none';\n      document.getElementById('don-success').style.display = 'block';\n    }\n  } catch(err) {\n    errEl.textContent = 'Fehler: ' + err.message;\n    btn.disabled = false;\n    btn.innerHTML = \"Jetzt CHF <span id='don-betrag-anzeige'>\" + betrag + \"<\/span> spenden\";\n  }\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>&#x2764;&#xfe0f; drugshortage.ch unterst\u00fctzen drugshortage.ch ist ein unabh\u00e4ngiges Projekt, dessen Hauptzweck die Information ist. Ihre Spende hilft uns, die Plattform weiterzubetreiben und zu verbessern. CHF 5 CHF 10 CHF 20 CHF 50 CHF Jetzt CHF 10 spenden &#x1f64f; Herzlichen Dank! Ihre Spende wurde erfolgreich verarbeitet.Sie unterst\u00fctzen damit den Betrieb von drugshortage.ch. &#x1f512; Sichere Zahlung via Stripe&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-21594","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/pages\/21594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/comments?post=21594"}],"version-history":[{"count":1,"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/pages\/21594\/revisions"}],"predecessor-version":[{"id":21595,"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/pages\/21594\/revisions\/21595"}],"wp:attachment":[{"href":"https:\/\/www.drugshortage.ch\/index.php\/wp-json\/wp\/v2\/media?parent=21594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}