Aggiungi i pagamenti Stripe alla tua app Coderblock

Cosa realizzerai

Con Coderblock puoi aggiungere i pagamenti Stripe a un'app esistente senza dover scrivere manualmente endpoint di checkout, webhook o codice per la gestione dei pagamenti. Ti basta descrivere in chat ciò che vuoi ottenere: l'agente collega frontend, backend, database e configurazione Stripe necessari per completare l'integrazione.

In questo tutorial vedrai come aggiungere:

• un abbonamento ricorrente;
• un pagamento una tantum.

Partirai dalla modalità di test di Stripe, verificherai l'intero percorso del cliente e, quando tutto funziona correttamente, passerai ai pagamenti reali e pubblicherai l'app. Prima di iniziare, definisci:

• che cosa acquisteranno i clienti;
• se il pagamento sarà una tantum o ricorrente;
• prezzo e valuta;
• quali funzionalità o contenuti saranno disponibili dopo il pagamento;
• se vuoi utilizzare un account Stripe gestito da Coderblock oppure il tuo account Stripe.

---

Passaggio 1: apri o crea la tua app

Apri il progetto Coderblock a cui vuoi aggiungere i pagamenti. Se parti da zero, puoi descrivere l'app in linguaggio naturale oppure scegliere uno dei template di prodotto disponibili. Per esempio:

Crea un sito in abbonamento per corsi di cucina online. I visitatori possono esplorare i corsi, ma solo gli iscritti paganti possono guardare i video completi.

Coderblock genera il frontend con React, Vite, TypeScript e Tailwind, insieme a un backend reale e a un database Postgres dedicato al progetto. Durante lo sviluppo puoi vedere l'app in anteprima all'indirizzo <app>.coderblock.dev. Le modifiche vengono applicate mentre continui a lavorare con l'agente in chat. Se l'app richiede account cliente, è consigliabile aggiungerli prima di configurare i pagamenti:

Aggiungi registrazione e accesso per i clienti. Proteggi l'area riservata in modo che sia accessibile solo agli utenti autenticati.

L'agente utilizza Supabase Auth invece di creare una tabella personalizzata per le password. Configura inoltre la gestione delle sessioni, le route protette e la Row Level Security di Postgres associata a ciascun utente autenticato.

---

Passaggio 2: descrivi il modello di pagamento

Ora descrivi all'agente che cosa vuoi vendere. Indica il nome del prodotto, il prezzo, la valuta, la frequenza di fatturazione e cosa deve succedere dopo il checkout.

Per un abbonamento

Puoi scrivere:

Aggiungi un abbonamento Cooking Club a 9,99 € al mese. I clienti autenticati devono potersi abbonare dalla pagina dei prezzi. Dopo il pagamento, consenti loro di accedere all'area riservata protetta.

Per un pagamento una tantum

Oppure:

Aggiungi un checkout una tantum da 49 € per il Corso avanzato di pasticceria. Dopo il pagamento, indica che il cliente ha accesso al corso.

L'agente creerà il prodotto e il prezzo reali in Stripe, configurerà l'esperienza di checkout, la collegherà al cliente autenticato e aggiungerà la logica backend necessaria per registrare lo stato del pagamento. Gestirà inoltre l'integrazione con il webhook Stripe. A questo punto controlla l'anteprima live. Verifica che:

• nome del prodotto;
• prezzo;
• frequenza di fatturazione;
• call to action;
• esperienza successiva al checkout

siano quelli che desideri. Se vuoi modificare qualcosa, puoi semplicemente chiederlo in chat:

Cambia il testo del pulsante in “Inizia il tuo abbonamento” e mostra sopra un breve elenco dei vantaggi.

---

Passaggio 3: scegli come collegare Stripe

Coderblock supporta due modalità di connessione a Stripe. L'opzione gestita è quella predefinita e non richiede chiavi API.

Opzione A: usa un account Stripe gestito

Chiedi all'agente di proseguire con la configurazione gestita predefinita. Ti farà alcune semplici domande, come il Paese e il nome dell'attività, e creerà l'account Stripe per il progetto. Non devi copiare chiavi API né configurare manualmente i webhook: Coderblock gestisce il webhook dei pagamenti e collega automaticamente il progetto. Potrai completare in un secondo momento la verifica dell'identità e la configurazione dei bonifici tramite il link di onboarding Stripe fornito dall'agente. Quando sarai pronto a ricevere pagamenti reali, apri il link e completa le informazioni aziendali richieste da Stripe.

Opzione B: usa il tuo account Stripe

Se hai già un account Stripe e vuoi collegarlo al progetto, scrivi:

Collega questo progetto al mio account Stripe esistente.

L'agente richiederà STRIPE_SECRET_KEY tramite un apposito campo sicuro per le variabili d'ambiente. Inserisci la chiave esclusivamente in quel campo. Coderblock conserva i segreti nell'archivio server-side del progetto, evitando che la chiave venga inserita nel codice generato o mostrata nella chat. Dopo aver ricevuto la chiave, l'agente registra automaticamente il webhook necessario e completa l'integrazione. Non inserire manualmente i segreti nei file frontend e non chiedere all'app di esporli nel codice eseguito dal browser.

---

Passaggio 4: testa l'intero flusso di checkout

Mantieni l'integrazione in modalità di test finché non hai verificato che l'intero percorso funzioni correttamente. Apri l'anteprima live e prova l'esperienza come farebbe un cliente:

1. Crea un account utente di test oppure accedi con uno esistente.
2. Apri la pagina dei prezzi o del prodotto.
3. Seleziona il prodotto a pagamento.
4. Completa il checkout di test di Stripe.
5. Torna all'app dopo il pagamento di test.
6. Verifica che vengano sbloccati il contenuto, la funzionalità o lo stato dell'account corretti.
7. Aggiorna la pagina o accedi nuovamente per verificare che l'accesso rimanga attivo.

Non testare soltanto il percorso positivo. Prova anche con un account che non ha effettuato il pagamento e verifica che non possa accedere alle funzionalità a pagamento protette.

Controlla anche il backend

Dalla scheda Backend dell'editor di Coderblock puoi esaminare:

• tabelle;
• utenti autenticati;
• storage;
• funzioni dell'app.

Verifica che le informazioni relative al pagamento o all'abbonamento siano associate all'utente autenticato corretto. La Row Level Security deve inoltre impedire a un cliente di leggere o modificare i dati privati di un altro cliente. Se qualcosa non funziona come previsto, descrivi all'agente il comportamento osservato invece di provare a modificare manualmente il codice dei pagamenti. Per esempio:

Il checkout va a buon fine, ma la dashboard dell'area riservata rimane bloccata. Aggiorna l'accesso dopo la conferma del pagamento Stripe e assicurati che continui a funzionare dopo un nuovo accesso.

L'agente può quindi intervenire sul frontend, sullo schema del database, sulle regole di sicurezza e sul comportamento del backend.

Passaggio 5: aggiungi le viste per clienti e amministratori

Un buon flusso di pagamento dovrebbe rendere chiaro al cliente lo stato del proprio account dopo il checkout. Puoi chiedere all'agente di aggiungere, per esempio:

Aggiungi alla pagina dell'account cliente una sezione di fatturazione che mostri il piano attuale e lo stato del pagamento.

Puoi anche creare una vista dedicata agli amministratori:

Aggiungi una pagina amministrativa protetta che elenchi i clienti, il prodotto scelto e lo stato attuale del pagamento. Solo gli utenti con il ruolo di amministratore possono aprirla.

Le app Coderblock includono già una tabella dei profili e una struttura di base per i ruoli. L'agente può quindi collegare l'accesso amministrativo ai ruoli autenticati e applicare le policy appropriate nel database.

Passaggio 6: passa ai pagamenti reali e pubblica

Quando hai verificato che checkout, account e route protette funzionano correttamente, comunica all'agente che sei pronto a passare ai pagamenti reali. Prima di procedere:

• conferma i prezzi definitivi;
• verifica la valuta;
• controlla gli intervalli di fatturazione;
• completa le eventuali procedure Stripe per i bonifici;
• completa la verifica dell'identità, se richiesta.

Fai quindi un ultimo controllo della configurazione in modalità live. Assicurati che il prodotto in produzione, il prezzo, la valuta, l'intervallo di fatturazione, il comportamento dopo il pagamento e le funzionalità riservate siano tutti corretti. Quando è tutto pronto, fai clic su Pubblica. L'app verrà distribuita su <app>.coderblock.app, con SSL incluso.

Se preferisci utilizzare un dominio personalizzato, apri Impostazioni → Domini. Puoi collegare un dominio che possiedi già seguendo la procedura DNS guidata oppure acquistarne uno direttamente in Coderblock, con configurazione automatica di DNS e SSL.

Un ultimo test in produzione

Dopo la pubblicazione, verifica nuovamente il checkout in ambiente di produzione. Il passaggio da test a live merita un controllo dedicato: assicurati che il prodotto corretto sia acquistabile, che il pagamento aggiorni correttamente l'account e che i contenuti riservati siano accessibili soltanto agli utenti autorizzati. Se devi apportare modifiche, puoi continuare a lavorare in chat, verificarle nell'anteprima live e pubblicarle con un nuovo aggiornamento.

---

Checklist finale

Prima di accettare clienti reali, verifica che:

• Nomi dei prodotti, prezzi, valute e intervalli di fatturazione siano corretti.
• L'accesso sia obbligatorio quando i pagamenti devono essere associati a un utente.
• I pagamenti riusciti sblocchino esclusivamente le funzionalità previste.
• Gli utenti non paganti non possano accedere ai contenuti protetti.
• I dati dei pagamenti siano associati all'account corretto.
• La Row Level Security protegga i dati dei clienti.
• I segreti siano stati forniti esclusivamente tramite i campi sicuri.
• L'onboarding Stripe sia completo per ricevere pagamenti reali.
• Il dominio di produzione e il flusso di ritorno dal checkout funzionino correttamente.

Fatto. La tua app Coderblock ora dispone di un flusso di pagamento Stripe reale, collegato a frontend, backend, autenticazione e database Postgres. E la parte più importante è che puoi continuare a modificarlo semplicemente descrivendo ciò che vuoi cambiare in chat.