{"id":17769,"date":"2026-08-05T11:42:38","date_gmt":"2026-08-05T05:57:38","guid":{"rendered":"https:\/\/www.bay20.com\/de\/?p=17769"},"modified":"2026-08-05T11:49:31","modified_gmt":"2026-08-05T06:04:31","slug":"wie-fuegt-man-in-bigcommerce-beim-bezahlvorgang-round-up-spenden-hinzu","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/wie-fuegt-man-in-bigcommerce-beim-bezahlvorgang-round-up-spenden-hinzu\/","title":{"rendered":"Wie f\u00fcgt man in BigCommerce beim Bezahlvorgang \u201eRound-Up\u201c-Spenden hinzu?"},"content":{"rendered":"\n

Das haben Sie wahrscheinlich schon einmal an der Kasse eines Supermarkts gesehen. Ihr Gesamtbetrag betr\u00e4gt 47,35 $, und das System fragt Sie, ob Sie auf 48,00 $ aufrunden m\u00f6chten, wobei die zus\u00e4tzlichen 65 Cent an eine Wohlt\u00e4tigkeitsorganisation gehen. Es ist eine kleine Bitte, der man leicht zustimmen kann, und im Laufe der Zeit kommt dabei eine ordentliche Summe zusammen. Das Gleiche k\u00f6nnen Sie auch in einem BigCommerce<\/a><\/strong>-Shop umsetzen. Diese Funktion ist zwar nicht standardm\u00e4\u00dfig integriert, l\u00e4sst sich aber problemlos hinzuf\u00fcgen. Sie ben\u00f6tigen lediglich eine kleine Backend-Funktion und die Server-to-Server (S2S) Cart-API von BigCommerce, damit es funktioniert. So habe ich es umgesetzt.<\/p>\n\n\n\n

So funktioniert es, Schritt f\u00fcr Schritt<\/strong><\/h2>\n\n\n\n
    \n
  1. Der Kunde gelangt zur Kasse, und der Warenkorb-Gesamtbetrag wird wie gewohnt berechnet.<\/li>\n\n\n\n
  2. Er sieht ein Kontrollk\u00e4stchen mit einem Text wie \u201eMeine Bestellung aufrunden, um die Differenz zu spenden\u201c.<\/li>\n\n\n\n
  3. Wenn er es anklickt, f\u00fcgt eine kleine Backend-Funktion dem Warenkorb eine neue Position namens \u201eSpende\u201c hinzu, deren Preis der Aufrundungsdifferenz entspricht.<\/li>\n\n\n\n
  4. Der Warenkorb-Gesamtbetrag wird sofort aktualisiert, und die Spende erscheint als eigene Position auf der Bestellung.<\/li>\n<\/ol>\n\n\n\n

    Wichtig ist, dass dies nicht nur auf dem Bildschirm geschehen darf. Man kann nicht einfach eine h\u00f6here Zahl anzeigen und es dabei belassen. BigCommerce muss diese Spende tats\u00e4chlich als echten Artikel im Warenkorb erkennen, sonst wird sie sp\u00e4ter weder auf der Bestellung noch in Berichten korrekt angezeigt.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Warum ich eine Backend-Funktion verwendet habe, anstatt dies im Browser zu erledigen<\/strong><\/h2>\n\n\n\n

    Mit BigCommerce lassen sich Warenkorbdaten recht einfach \u00fcber den Browser auslesen, doch \u00c4nderungen am Warenkorb, die vertrauensw\u00fcrdig sein sollen, m\u00fcssen an einem sichereren Ort erfolgen. W\u00fcrde man dies direkt im Browser versuchen, m\u00fcsste man die API-Schl\u00fcssel des Shops jedem offenlegen, der die Entwicklertools \u00f6ffnet \u2013 und das m\u00f6chte man nat\u00fcrlich nicht.<\/p>\n\n\n\n

    Stattdessen habe ich daher eine kleine serverlose Funktion (ich habe Vercel<\/strong> verwendet, aber jeder \u00e4hnliche Dienst funktioniert einwandfrei) als Zwischenschicht eingesetzt. Sie verwaltet die API-Schl\u00fcssel und ist die einzige Instanz, die tats\u00e4chlich mit BigCommerce kommuniziert. Dadurch hast du au\u00dferdem eine zentrale Stelle, an der du die Regeln steuern kannst, beispielsweise wie viel jemand spenden darf oder ob du auf den n\u00e4chsten Dollar oder die n\u00e4chsten f\u00fcnf Dollar aufrundest.<\/p>\n\n\n\n

    Was die Funktion konkret macht<\/strong><\/p>\n\n\n\n

    Nichts Besonderes. Sie ruft den Warenkorb-Gesamtbetrag ab, berechnet, wie viel zus\u00e4tzlich ben\u00f6tigt wird, um ihn aufzurunden, und f\u00fcgt diesen Betrag \u00fcber die S2S-Cart-API als Einzelposten hinzu.<\/p>\n\n\n\n

    \/\/ \/api\/round-up.js (Vercel serverless function)\nexport default async function handler(req, res) {\n  const { cartId, currentTotal } = req.body;\n\n  const roundedTotal = Math.ceil(currentTotal);\n  const donationAmount = +(roundedTotal - currentTotal).toFixed(2);\n\n  if (donationAmount <= 0) {\n    return res.status(200).json({ message: \"Already a round number\" });\n  }\n\n  \/\/ Add the donation as a line item using the S2S Cart API\n  const response = await fetch(\n    `https:\/\/api.bigcommerce.com\/stores\/{store_hash}\/v3\/carts\/${cartId}\/items`,\n    {\n      method: \"POST\",\n      headers: {\n        \"X-Auth-Token\": process.env.BC_API_TOKEN,\n        \"Content-Type\": \"application\/json\",\n      },\n      body: JSON.stringify({\n        line_items: [\n          {\n            name: \"Round-Up Donation\",\n            quantity: 1,\n            list_price: donationAmount,\n          },\n        ],\n      }),\n    }\n  );\n\n  const data = await response.json();\n  res.status(200).json(data);\n}<\/code><\/pre>\n\n\n\n
    Ein paar Dinge, die ich dabei gelernt habe:<\/p>\n\n\n\n