Natuurlijk! Hier is een stapsgewijze uitleg om je te helpen bij het instellen van aangepaste API-integraties in Bubble voor het verbinden met de Stripe API: 1. API-connector plugin installeren - Ga naar het Plugins-tabblad in Bubble. - Zoek naar de "API Connector" plugin en installeer deze. 2. Nieuwe API-configuratie aanmaken - Open de API Connector en klik op “Add another API”. - Geef je API een naam, bijvoorbeeld “Stripe API”. 3. Authenticatie instellen Stripe gebruikt meestal Bearer Token authenticatie: - Ga naar de tab “Authentication”. - Kies voor “Bearer Token” en voer je Stripe Secret Key in. (Deze vind je in je Stripe Dashboard onder API-keys) - Zorg dat je deze key veilig bewaart en niet publiekelijk deelt. 4. API-aanroepen configureren Voor elke bewerking (bijvoorbeeld betalingen of abonnementen beheren): a. Nieuwe API Call toevoegen - Klik op “Add a call”. - Geef de call een naam, bijvoorbeeld “Create Payment Intent”. b. Instellingen voor de API-aanroep - Method: POST - URL: https://api.stripe.com/v1/payment_intents c. Headers en parameters - Parameters: Voeg benodigde parameters toe, zoals: - amount (in centen, bijvoorbeeld 1099 voor €10,99) - currency (bijv. eur) - payment_method_types (bijv. card) - Body: Kies voor “form-data” en vul de parameters in. d. Authenticatie - Bubble gebruikt de Bearer Token uit de API-connector instellingen. 5. Data responsetypen instellen - Bij de API call kun je het verwachte dataformaat instellen (meestal JSON). - Bubble zal automatisch de response parseren, zodat je de data kunt gebruiken in je app. 6. API-aanroepen gebruiken in je app - In workflows kun je nu de gemaakte API-calls aanroepen. - Bijvoorbeeld, bij een knop “Betalen” roep je de API aan en verwerk je de response. - Je kunt data uit de response gebruiken om bijvoorbeeld bevestigingen te tonen of verdere acties te ondernemen. 7. Fouten en debugging - Test je API-aanroepen via de API Connector. - Bekijk de response om zeker te zijn dat alles correct werkt. - Gebruik de debug tools in Bubble om workflows en data te controleren. 8. Beveiliging en privacy - Bewaar je API-sleutels veilig en niet in client-side code. - Overweeg server-side workflows voor gevoelige operaties. Door deze stappen te volgen, kun je effectief Stripe API-integraties opzetten in Bubble, betalingen en abonnementen beheren, en data effectief verwerken binnen je app.

Absoluut! Hierbij een uitgebreide, stapsgewijze handleiding in het Nederlands voor het integreren van de Stripe API in je Bubble-app. --- ### **Stap 1: Voorbereiding - API Keys en Stripe Account** 1. **Maak een Stripe-account aan** of log in op je bestaande account op [stripe.com](https://stripe.com). 2. **Ga naar het Developers Dashboard:** Klik op "Developers" in de bovenste navigatiebalk. 3. **Vind je API-sleutels:** Ga naar "API keys" in het zijmenu. Hier vind je twee cruciale sleutels: * **Publishable key (pk_...):** Deze gebruik je aan de front-end (in je Bubble-app) voor elementen zoals de Stripe Payment Element. Deze key is niet geheim. * **Secret key (sk_...):** **DEZE KEY IS GEHEIM.** Gebruik deze **alleen** in back-end workflows (API Connector) of in je server-side code. Deel deze nooit publiekelijk. **Belangrijk:** Gebruik de **Testmodus** (test keys) tijdens het ontwikkelen. Schakel over naar **Livemodus** (live keys) wanneer je app klaar is voor productie. --- ### **Stap 2: De API Connector Plugin Installeren en Configureren** Bubble's kracht voor API-integraties zit in de officiële **API Connector** plugin. 1. Ga in je Bubble editor naar het tabblad **Plugins**. 2. Zoek naar **"API Connector"** en installeer deze (hij is gratis). 3. Na installatie verschijnt er een nieuwe sectie "API Connector" in je plugins-lijst. Klik erop om te configureren. --- ### **Stap 3: Een API-aanroep Instellen voor Back-end Acties** We registreren Stripe als een externe API. Laten we beginnen met het ophalen van klantgegevens als voorbeeld. 1. Klik in de API Connector configuratie op **"Add another API"** en noem het bijvoorbeeld "Stripe". 2. **Stel de basis-URL in:** `https://api.stripe.com/v1/` 3. **Stel standaard headers in:** Klik op "Add another header" en voeg de volgende sleutel-waarde paren toe: * **Header:** `Authorization` * **Waarde:** `Bearer sk_test_...` (vervang dit door je **SECRET test key**) * **Header:** `Content-Type` * **Waarde:** `application/x-www-form-urlencoded` Dit zorgt ervoor dat elke aanroep naar Stripe automatisch de juiste authenticatie en content type heeft. 4. **Klik op "Initialize Call"** om je eerste aanroep te definiëren. Noem deze bijvoorbeeld "Get_customer". 5. **Kies het type aanvraag:** `GET` 6. **Volledig endpoint:** `/customers/cus_ABC123` (vervang `cus_ABC123` door een daadwerkelijke klant-ID). Voor een dynamische aanroep kun je later `[customer_id]` in het pad gebruiken. 7. Klik op **"Initialize call"** om de aanroep te testen en te registeren. Als je key correct is, zie je een succesvolle JSON-response met klantgegevens. **Herhaal dit proces** voor andere Stripe-endpoints die je nodig hebt (bijv. `POST /payment_intents`, `POST /subscriptions`). --- ### **Stap 4: Authenticatie Beheren (Belangrijk!)** * **Standaard Headers:** De methode hierboven (met de Secret Key in de standaard headers) is de eenvoudigste en veiligste manier voor back-end calls, omdat je key nooit naar de browser van de gebruiker wordt gestuurd. * **Nooit in de front-end:** Plaats je **Secret Key** nooit in een gewone workflow-actie (zoals "Do an API call in your page") die in de browser draait. Dit is een groot security risico. * **Stripe.js voor front-end:** Voor gevoelige front-end acties (zoals het tokeniseren van een creditcard) moet je de officiële **Stripe.js**-library gebruiken via een plugin zoals **"Stripe.js"** of **"Stripe Elements"**. Deze plugins communiceren direct en veilig met Stripe's servers zonder dat jouw secret key eraan te pas komt. --- ### **Stap 5: API-aanroepen Gebruiken in Workflows** Nu je aanroepen zijn gedefinieerd, kun je ze in je app-logica gebruiken. 1. Maak een nieuwe workflow aan (bijv. wanneer op een knop wordt geklikt). 2. Voeg een actie toe: **Plugins -> API Connector -> Call an API Action**. 3. Kies je "Stripe" API en de aanroep "Get_customer". 4. **Parameters dynamisch maken:** Als je een endpoint zoals `/customers/:id` hebt, kun je nu de `id` parameter invullen met dynamische data uit je app (bijv. de `Stripe Customer ID` van een gebruiker in je database). 5. **Body data (voor POST/PUT):** Voor aanroepen die data moeten sturen (bijv. een nieuwe klant aanmaken), vul je de "Additional request data" in. Gebruik het formaat `application/x-www-form-urlencoded` (bijv. `email=test@example.com&name=Jan%20Jansen`). --- ### **Stap 6: Dataresponsen Effectief Verwerken** Dit is de kern van de integratie. De response van Stripe is in JSON-formaat. 1. **Bekijk de Response:** Na het testen van je API-aanroep in de connector, toont Bubble de JSON-structuur. Bestudeer deze goed om te zien welke data beschikbaar is (bijv. `id`, `email`, `invoice_settings`). 2. **Gebruik "Get data from an API Response":** * In je workflow, na de "Call an API" actie, voeg je een nieuwe actie toe: **Data (JSON) - Get data from an API Response**. * Kies de vorige API-aanroep als bron. * Gebruik het **JSON-pad** om de specifieke data eruit te trekken. Bijvoorbeeld: * Om de klant-ID te pakken: `id` * Om de e-mail te pakken: `email` * Om de standaard betaalmethode te pakken: `invoice_settings.default_payment_method` * Je kunt deze data nu opslaan in je database, tonen in een tekstveld, of gebruiken in een volgende workflow-stap. 3. **Foutafhandeling:** * Stripe geeft fouten terug met HTTP-statuscodes (bijv. `404` Not Found, `402` Payment Failed, `400` Invalid Request). * Zorg dat je een **"When error"** pad aanmaakt in je workflow. * Gebruik opnieuw de "Get data from an API Response" actie in het error-pad om de foutmelding van Stripe op te halen (bijv. `error/message`). Je kunt deze dan tonen aan de gebruiker. ### **Aanbevolen Plugins voor Stripe** Voor een complete integratie overweeg deze plugins: * **Stripe.js / Stripe Elements:** Voor het veilig verzamelen van betalingsgegevens in de front-end. * **Stripe API (by Bubble):** Een meer geavanceerde connector met vooraf gedefinieerde acties. Begin altijd in de **testmodus** en test alle scenario's grondig, zowel succesvolle betalingen als gefaalde pogingen. Veel succes met bouwen