Voeg een betaalknop toe aan je Bolt.new-app
Bolt.new spint full-stack-apps op vanuit een prompt — maar echte betalingen vragen nog steeds een account, een key en een webhook. Sla dat allemaal over: plak twee regels HTML en je Bolt-project ontvangt direct geld.
Waarom Bolt.new + Stripe zelden live gaat
Bolt.new genereert indrukwekkende apps in minuten — Vite + React + Tailwind, soms een Node-backend, soms Hono op de edge. Zodra je de AI vraagt om "voeg Stripe-betalingen toe," begint hij productie-code in een sandbox te gooien: client-SDK laadt, environment-variabelen die de editor niet veilig kan opslaan, webhook-handlers zonder echte domeinnaam, en een checkout-flow die 404't zodra je de StackBlitz-container verlaat. Tegen de tijd dat je de loop hebt gedebugd, is je one-shot Bolt-project een echte engineering-job geworden.
- Bolt's container kan een Stripe-secret-key niet veilig bewaren voor productiegebruik.
- Webhooks vereisen een publieke URL — de StackBlitz-preview-URL is geen stabiel productie-target.
- Stripe SDK forceert een client/server-split die Bolt's single-shot generatie compliceert.
- Elke regenerate-cyclus dreigt zorgvuldig bedrade payment-code te verliezen.
De oplossing: een knop die de backend niets aandoet
PayRequest's Betaalknop is een gewone HTML-anchor met één CSS-bestand. Geen SDK, geen key, geen callback — dus Bolt.new hoeft niet tegen zijn eigen architectuur te vechten om hem toe te voegen. Plak de snippet in de gegenereerde component, deploy vanuit Bolt, en de klik gaat naar je eigen PayRequest-checkout. De integratie overleeft elke regenerate.
Leeft in de gegenereerde JSX
Het is een <a> met een className. Bolt houdt hem als gewone HTML over regenerates, geen speciale component die je moet bewaren.
Geen secret keys in de container
De knop is een publieke link naar je PayRequest-URL. Niets gevoeligs hoeft ooit in de Bolt-omgeving te staan.
Webhooks gebeuren op PayRequest
Bonnen, fulfilment, herinneringen, refunds — allemaal op PayRequest. Bolt's project blijft puur front-end.
Overleeft 'regenerate'
Omdat het gewone HTML is, breekt een 'redesign deze pagina'-prompt de payment-integratie niet. Wikkel hem in een commentaar en Bolt bewaart hem.
De hele integratie, in twee regels HTML
Plak de <link> in de index.html van je Bolt-project (of root layout). Plaats de <a> in elke component die de AI genereert. Klaar.
<!-- 1. Stylesheet — paste once in <head> -->
<link rel="stylesheet"
href="https://payrequest.app/embed/button.css">
<!-- PayRequest button — keep as-is across regenerates -->
<a href="https://payrequest.me/yourhandle/early-access"
class="pr-btn pr-btn--default"
target="_blank"
rel="noopener">Pay €19</a>Drie stijlen in de stylesheet — kies er één die past bij Bolt's gegenereerde design.
Stap voor stap: van Bolt-prompt naar live betaling
Maak de Smart Link in PayRequest
Log in → Betaalpagina → Smart Links → Nieuw. Stel het bedrag in, kies methodes (kaart, Apple Pay, iDEAL, PayPal). Kopieer de URL.
Open Bolt.new en kies een project
Prompt een nieuw project ("een prijspagina voor mijn SaaS") of open een bestaand. Bolt's editor is de live source — daar ga je editen.
Voeg de stylesheet toe aan index.html
Plak in <head> een <link rel="stylesheet" href="https://payrequest.app/embed/button.css" />. Eén regel, één keer per project.
Plaats de anchor in elke component
Hero CTA, prijsplan, blogpost — waar de Pay-knop hoort. De knop verschijnt direct in Bolt's preview.
Deploy vanuit Bolt
Klik Deploy → Vercel/Netlify/Bolt's host. De knop is gewone HTML, dus hij werkt op elk deployment-target. Test de klik en ontvang je eerste betaling.
Bolt.new + Betaalknop vs. de alternatieven
| Methode | Setuptijd | Backend in Bolt? | Secret key? | Eigen checkout | Betaalmethodes |
|---|---|---|---|---|---|
Stripe Checkout (Bolt-gegenereerd) | 1–2 uur debuggen | Verplicht | Ja | Beperkt | Card + Apple/Google Pay |
Stripe Elements (Bolt-gegenereerd) | Halve dag | Verplicht | Ja | Handmatig stylen | Configureerbaar |
PayPal SDK | 1 uur | Soms | Ja | PayPal-merk | PayPal + cards |
PayRequest BetaalknopBest | 1 minuut | Geen | Geen | Jouw merk | 20+ inclusief iDEAL, SEPA, Klarna |
Wat Bolt.new-bouwers met de Betaalknop maken
AI-prompted SaaS-landingspagina's
Genereer prijsplan en Pay-knop in dezelfde prompt. Klik Deploy. De early-access wachtlijst wordt echte omzet zonder extra build-cyclus.
Templates en prompt-packs
Verkoop de prompt-pack die je gebruikte voor dit Bolt-project. De knop is een gewone anchor — Bolt strijkt hem niet weg op regenerate.
Hackathon- en demo-day-builds
Bolt is het snelst gepubliceerd; de Betaalknop het snelst betalend. Samen: van idee tot eerste verkoop binnen één hackathon-slot.
Interne tools die een paywall nodig hebben
Sluit een Bolt-tool af achter een eenmalige betaling met één anchor. Geen auth-code nodig voor de paywall.
Waarom dit beter werkt dan Bolt om Stripe vragen
Iedere developer die Bolt heeft geprompt met "voeg Stripe-betalingen toe" weet wat er gebeurt: hij genereert productie-code die een echt account, een echt domein, echte env-variabelen en echte webhook-security nodig heeft. Niets daarvan bestaat in een nieuwe Bolt-sessie, en tegen de tijd dat je het hebt aangesloten, is de magie van one-shot generatie weg. De Betaalknop is een zeldzame integratie die niets buiten Bolt nodig heeft.
- Rendert in elk framework dat Bolt kiest — React, Vue, Svelte, gewone HTML.
- Geen build-step-aanpassingen. Vite, Next, Remix — dezelfde anchor, dezelfde stylesheet.
- Overleeft 'redesign this page'-prompts omdat het gewone HTML is.
- Geen vendor lock-in. Wissel providers (Stripe, Mollie, PayPal, Ponto) in PayRequest zonder Bolt aan te raken.
Veelgestelde vragen
Werkt de Betaalknop in Bolt.new's preview-omgeving?+
Strijkt Bolt de snippet weg bij een regenerate?+
Heb ik een Stripe-account nodig om de Betaalknop in Bolt te gebruiken?+
Kan ik de Betaalknop op het gratis Bolt-tier gebruiken?+
Hoe zit het met abonnementen?+
Werkt het of Bolt nu naar Vercel, Netlify of zijn eigen host deployt?+
Lanceer je Bolt.new-app vandaag met echte betalingen
Maak een account, maak een Smart Link, plak de snippet in je Bolt-project. Vijf minuten, geen SDK, echt geld.