Betaalfunctionaliteit toevoegen aan je Lovable-app met Stripe
Het koppelen van Stripe aan je Lovable-project vereist een strakke scheiding tussen frontend-acties en veilige backend-afhandeling. In deze gids leer je hoe je betalingen correct opzet zonder dat je code een onoverzichtelijke chaos wordt.
Joost Meijer
Bijdrager · lvbl.nl
Het basisprincipe van veilige betalingen
Om te begrijpen hoe je Stripe correct koppelt, moet je het verschil begrijpen tussen wat er in de browser van de gebruiker gebeurt en wat er op de achtergrond plaatsvindt. In een traditionele client-side omgeving kan een gebruiker namelijk alle code en netwerkverzoeken inzien en aanpassen. Als jouw Lovable-app vertrouwt op een berichtje vanuit de browser dat een betaling is geslaagd, kan een kwaadwillende gebruiker dat bericht eenvoudig faken. De gouden regel voor elke integratie met Stripe is daarom simpel: de browser initieert het verzoek, een beveiligde backend maakt de checkout-sessie aan, en Stripe communiceert de uiteindelijke status rechtstreeks naar jouw database.
Voorbereiden van de gegevens in Stripe
Voordat je ook maar één prompt in Lovable typt, moet je de basis op orde hebben in het Stripe Dashboard. Maak daar een account aan en zet de schakelaar direct op de testmodus. Binnen het dashboard maak je de gewenste producten en bijbehorende prijzen aan. Elk product krijgt een unieke identificatiecode, de zogenaamde Price ID. Deze ID heb je later nodig in je code. Daarnaast genereert Stripe twee soorten API-sleutels: een openbare sleutel (publishable key) en een geheime sleutel (secret key). De openbare sleutel mag in de frontend van je Lovable-app gebruikt worden, maar de geheime sleutel mag absoluut nooit in de broncode van je client terechtkomen.
De juiste prompt voor de frontend
Als de voorbereiding in Stripe klaar is, kun je Lovable de frontend laten bouwen. Vraag het platform om een helder prijsoverzicht te maken met een duidelijke actieknop voor de gebruiker. Geef in je prompt expliciet aan dat Lovable alleen de gebruikersinterface en de aanroep naar de backend moet genereren. Een goede prompt luidt bijvoorbeeld: 'Bouw een prijzentabel met twee abonnementen. Wanneer de gebruiker op Selecteer klikt, stuur dan een POST-verzoek naar onze backend-functie met het bijbehorende prijs-ID. Toon een laadindicator totdat de backend een Stripe Checkout URL teruggeeft en stuur de gebruiker dan door naar die URL.' Door het proces op deze manier op te knippen, voorkom je dat Lovable zelf creatieve maar onveilige oplossingen bedenkt.
Het aanmaken van de checkout-sessie
De werkelijke magie van de integratie vindt plaats op de achtergrond. Hiervoor gebruik je een beveiligde omgeving, zoals een Supabase Edge Function of een losse serverloze functie. Deze functie ontvangt het verzoek van je frontend, leest de geheime Stripe-sleutel uit de omgevingsvariabelen en roept de Stripe API aan om een checkout-sessie te starten. Stripe stuurt vervolgens een unieke URL terug naar jouw backend, die deze doorgeeft aan de frontend. Lovable hoeft in deze stap alleen maar te weten hoe het de serverloze functie moet aanroepen en hoe het moet reageren op het antwoord. Dit houdt de gegenereerde code in Lovable overzichtelijk, onderhoudbaar en bovenal veilig.
Status verifiëren via webhooks
Een veelgemaakte fout bij het bouwen van betaalflows is aannemen dat de gebruiker na de betaling altijd netjes terugkeert naar de succes-pagina van je app. Gebruikers sluiten hun tabblad, de internetverbinding valt weg of de browser crasht. Vertrouw er dus nooit op dat het bereiken van de succes-URL betekent dat er betaald is. Om de status van een account of bestelling bij te werken, gebruik je Stripe Webhooks. Een webhook is een geautomatiseerd bericht dat Stripe rechtstreeks naar jouw backend stuurt zodra een betaling succesvol is afgerond. Je backend verifieert de handtekening van de webhook en werkt vervolgens de status in je database bij. Pas daarna heeft de gebruiker daadwerkelijk toegang tot de betaalde functies.
Fouten afhandelen en testen
Een robuuste integratie valt of staat met een goede foutafhandeling. Zorg ervoor dat je Lovable instrueert om duidelijke feedback te geven als er iets misgaat. Als een netwerkverzoek mislukt of als een betaling wordt geannuleerd, moet de gebruiker een rustige en duidelijke melding krijgen. Test de volledige stroom grondig in de testmodus van Stripe met de speciale test-creditcards die Stripe beschikbaar stelt. Probeer verschillende scenario's uit: een geslaagde betaling, een geweigerde kaart, een geannuleerde transactie en een trage netwerkverbinding. Pas wanneer al deze paden vlekkeloos werken, vervang je de testsleutels door de live API-sleutels.
Een schaalbaar fundament neerzetten
Het succesvol integreren van Stripe in Lovable bewijst dat je met AI-tools volwaardige en veilige applicaties kunt bouwen, mits je de juiste architectonische keuzes maakt. Blijf altijd scherp op de scheiding tussen wat de browser doet en wat er op de achtergrond gebeurt. Als onafhankelijke communitysite benadrukken we bij lvbl.nl graag dat je zelf verantwoordelijk blijft voor de veiligheid van je gebruikersgegevens en financiële stromen. Vertrouw niet blindelings op wat een AI-prompt oplevert, maar controleer de gegenereerde code en zorg voor een waterdichte backend. Met deze aanpak staat niets je in de weg om van jouw Lovable-project een commercieel succes te maken.
Vond je dit fijn?
Geef een hartje en deel het met een andere Lovable-fan.
