Una validazione fondamentale per qualsiasi prodotto digitale è che gli utenti siano disposti a pagare.

Proprio per questo vediamo ora come fare ad incassare dei pagamenti.

Per farlo utilizzeremo Stripe, che è una piattaforma attraverso cui si possono appunto effettuare questi incassi e in generale transazioni digitali.

Ci spostiamo sulla nostra sezione dei plugin, dove è disponibile il plug-in di Stripe.

Vedi che lo cerco qua.

Controllo sempre che sia un plugin ufficiale e che quindi, abbia un'installazione in un grande numero di app e che sia bu bubble.

In questo caso qui abbiamo a disposizione anche questo Stripe JS 2, che ha comunque tante installazioni, non è ufficiale, non è bu bubble, um.

però comunque tante installazioni è un plugin che puoi prendere in considerazione se ti servono delle funzionalità aggiuntive rispetto a quelle che il plugin base ti mette a disposizione.

Nel nostro caso il plugin ufficiale va benissimo, quindi clicchiamo su installa e ce l'abbiamo subito a disposizione.

Come prima cosa vado sul mio account Stripe, se non ne hai uno puoi crearlo in modo abbastanza rapido in una decina di minuti dovresti cavartela, in modo da poter poi recuperare le mie chiavi EPI.

Queste le trovi nella sezione sviluppatore, con una rapida ricerca su Google, trovi la le istruzioni.

di Stripes su come fare, a prenderla, poi dover solamente copiartela e incollartela su Apple.

Ora ti faccio vedere esattamente dove.

E che qua ho incollato le mie chiavi di test, sia la Secret key che la publishable key, um che qua sono sfocate momentaneamente per motivi di privacy.

Vado a settare le altre impostazioni base che mi servono per rendere il mio check-out effettivamente attivo.

Dopodiché possiamo provarlo.

Come prima cosa qui anziché check-out legacy metto il check-out V3, quindi metto l'ultima versione, e gli chiedo di raccogliere um l'indirizzo degli utenti in fase di check-out.

Al momento può bastare anche così.

Mi sposto quindi sulla parte di design.

Ti ricordo avevamo un gruppo, di elementi grafici, um che veniva sbloccato cliccando su richieste, che esattamente è questo gruppo.

Possiamo aggiungere qua sotto una piccola sezione in cui diciamo o se vuoi, ricordandoci che stiamo parlando, um di un finto sito per coworking, um lasciamo la possibilità di di prenotare um un ingresso giornaliero.

Aggiungiamo quindi un testo qua sotto, sempre prendendolo dalla barra laterale sinistra dove ci sono a disposizione tutti gli elementi, e um gli diamo il testo che vogliamo e poi lo spostiamo centrato.

Quindi per dargli il testo che vogliamo, siamo già con la tab appearance aperto e scriviamo una frase come o prenota.

Ora il tuo ingresso giornaliero, facciamo finta.

30 €.

Lo mettiamo a testo centrato.

Lo centriamo nella nostra pagina.

E qua sotto aggiungiamo un nuovo bottone a cui faremo attivare il check-out di Stripe.

Quindi prendiamo un bottone sempre dalla barra di sinistra e lo posizioniamo qua sotto.

Qua ci scriviamo ad esempio acquista ora.

E lo mettiamo accettato.

Cosa ci manca ora? Ci manca di attivare il vero e proprio flusso che fa partire il check-out di Stripe che fra pochissimo andremo a vedere in produzione dal vivo.

Come facciamo sempre con il doppio click apriamo la nostra tabellotta grigia dove ci propone subito ad workflow.

Sotto ad workflow gli mettiamo un'azione di tipo qua scriviamo Stripe così vengono disponibili.

Tutte quelle che sono um le azioni Stripe, in realtà qua non trovo quella che che volevo che è um charged current user, okay, quindi, um addebita um all'utente corrente, quindi cosa faccio? Mi sposto sulla sezione plugin, e vado a vedere qua su Stripe quali sono le azioni disponibili.

E subito la prima azione vedo che è quella che volevo qua, peraltro c'è la documentazione per ciascuna um azione per capire esattamente che cosa faccio.

Quindi quello che farò è charge the guarant user.

Quindi torniamo sul nostro workflow, vado di nuovo per aggiungere le azioni e digito qua dentro charge the current user.

In questo caso gli specificherò che l'addebito sarà in euro.

L'amount in questo caso lo metto fisso a 30 €, potrei avere un amount dinamico, ad esempio se ho un e-commerce dove ho tanti prodotti e dentro la scheda prodotto è salvato il prezzo di quell'articolo, posso dinamicamente far prendere al bottone, um a cui è collegato il flusso Strippe il prezzo di quel prodotto.

Nome lo chiamerò, non lo so, desk giornaliero test, per far capire che siamo in ambiente di test.

Ti aggiungo un'informazione di contesto molto importante.

Ci sono due ambienti su Bubble e in generale nell'ambito software, semplificando, che sono l'ambiente di test e l'ambiente di produzione, quello live diciamo.

Sia Bubble ce l'ha questa cosa, infatti quando vai in preview vedi che viene scritto dopo il dominio del tuo sito slash version trattino test, sia ce l'ha anche Stripe, quindi nello specifico queste, chiavi EPI di Stripe che ho messo nel nostro plug-in sono le chiavi dell'ambiente di test.

Quindi questa transazione che faremo, adesso ti farò vedere, la faremo, con una carta finta messa a disposizione da Stripe per effettuare test.

E um verrà effettivamente visualizzata e contabilizzata nel mio ambiente di test stripe, quindi non ci sarà un effettivo movimento di soldi, sarà una simulazione a tutti gli effetti.

Descrizione ingresso.

in giornata quando poi.

Static image, poi mi dà la possibilità di caricare un'immagine.

Qua ho caricato un'immagine simbolica di dei desk, in realtà probabilmente potrebbe aver senso più qua l'immagine e il logo della mia azienda, um anche se in realtà in questo caso siamo in una situazione di esempio, quindi può andare bene tutto.

Qua hai diverse opzioni che in questo momento ci interessano relativamente, questo ti permette di abilitare la fatturazione per eventuali partite IVA, quindi glielo lasciamo abilitato in questo caso, e questo tendenzialmente è tutto.

Posso aggiungere successivamente delle notifiche successive al check-out che mi, notificano il mio potenziale cliente, se l'operazione è andata a buon fine oppure no.

Quindi aggiungiamole subito già che ci siamo.

Utilizziamo sempre gli alert che abbiamo visto precedentemente, quindi un Air alert standard di successo che dice um acquisto effettuato.

Allora scriviamo grazie, giusto per scriverci qualcosa e ci mettiamo una causale, cioè, solo quando lo step precedente, quindi l'addebito al cliente è andato a buon fine.

Come si fa questo, quindi resalto of step uno, posso fargli riferimento direttamente, lo step uno vedi che è il addebita il current user.

E qua c'è una voce apposta che si chiama captured, quindi è stato effettivamente catturato.

EasyS.

Quindi questa cosa significa se l'addebito è andato a buon fine mostra l'alert di successo.

Aggiungiamo adesso l'azione di fallimento invece.

Quindi sempre un nero alert standard.

In questo caso utilizziamo un error, ad esempio.

E qua scriviamo bruttissimo pagamento, fallito, magari possiamo dare delle opzioni al nostro cliente, diciamo riprova, Fra un po'.

o con un'altra carta o contattaci.

ad esempio.

In questo caso la condizione sarà solo quando il result of step uno captured, is not, quindi quando non è effettivamente stato catturato il pagamento perché c'è stato qualche problema.

Possiamo già andare a vedere se tutto quello che abbiamo fatto funziona.

Ci spostiamo quindi in preview del nostro sito.

Eccoci qua.

Andiamo a vedere sotto richieste, vediamo che c'è il nostro o prenota il tuo ingresso giornaliero a 30 €.

Qua ti diciamo acquista ora.

E qua mi dice che serve un'e-mail per completare la transazione.

Giustamente non gli ho passato al check-out quella che è um l'e-mail del cliente.

L'aggiungiamo subito.

Vedi qua che come payer mail che è fondamentale e necessaria per Stripe per poter processare il pagamento, lui prende la current users email, ma se l'utente non è loggato, non esiste nessun current user, o meglio esiste un current user, temporaneo vuoto che non ha nessuna email e quindi questo campo effettivamente risulta vuoto, e non permette al check-out di andare avanti, che restituirà un messaggio di errore.

Andiamo a questo punto a mettere un piccolo input, anzi ce l'abbiamo già, quello relativo alla mail e specifichiamo che se la mail non è compilata questo bottone non è cliccabile e magari, um ci fa uscire una una notifica.

Come facciamo? Quindi in questo caso diciamo button acquisto ora clicked.

Fai partire il flusso check-out stripes solo quando ti input relativo all'e-mail.

Is valid, quindi di fatto c'è dentro una mail valida.

E Specifichiamo anche che vogliamo che il valore non sia vuoto.

Così siamo proprio sicuri che becca tutte le condizioni.

Aggiungiamo invece una nuova condizione che diciamo, cosa deve succedere quando invece il campo e-mail è vuoto? Ti facciamo uscire una notifichina che dice, um di riempire il campo e- email.

Quindi facciamo copia e incolla di questo flusso.

Togliamo Gli step successivi che non ci servono.

In questo caso.

Come condizione di attivazione ci sarà.

Quando il nostro input email.

Ad esempio è vuoto, oppure quando, L'input email non è valido.

In queste condizioni gli facciamo partire questa notifichina di errore.

Che quando il flusso viene attivato vogliamo sempre che vada avanti, gli dice, compila prima.

in campo il Tutto bene, questo glielo facciamo uscire magari come warning, quindi in giallo.

E andiamo a questo punto, in preview, a testare finalmente il nostro sistema di pagamento.

Qua sotto richieste, ora se io clicco su acquista ora, vedi che mi chiede prima di compilare il campo email, ora mi inserisco, metto un'email.

Apparentemente esistente.

Questa.

Di modo che me la possa validare in quanto c'ha la chiocciola e c'ha um un dominio finale e gli dico a questo punto acquista ora.

Ancora non è contento, perché? Perché devo andare ad abbinare questo campo email, nel flusso di check-out.

Andiamo subito a farlo.

Ci andiamo a posizionare sul flusso quello dove è presente il charge current user, l'azione di Skype, e andiamo a sostituire questo current user email con input mail, value.

Così andiamo a pescare anziché questo, fittizio utente vuoto e la sua mail che non esiste, la mail che è stata scritta nel campo email e per cui abbiamo anche aggiunto una validazione del fatto che il campo sia effettivamente compilato.

Possiamo a questo punto spostarci sulla nostra preview e andare a testare finalmente, il nostro checkout funzionante.

Come vedi, ti sto mostrando quello che è il normale iter di programmazione, cioè si fa qualcosa, non funziona completamente, si cerca di capire dalle informazioni cosa è stato bloccante, vado a risolvere e quindi si itera un po' in questo modo.

Ora proviamo a compilare con un campo e-mail.

chiocciola qualcosa.

it.

E cliccando su acquista ora.

Vedi che mi appare un check-out stripe.

Dove posso inserire il mio pagamento.

Ora proviamo effettivamente a fare un pagamento.

Ti mostro che andando su Stripe esiste una carta di test, um che è la 42.

42.

Questa è valida sempre, quindi è una 11 numero di carta finto messo a disposizione da Stripe per effettuare dei pagamenti di testa.

La data di scadenza basta che metti un anno nel futuro, quindi mettiamo dicembre 2039, CVC metti un numero qualsiasi.

Qua mettiamo un nome finto che in questo momento non ci interessa, um qua mettiamo una via a caso.

e, uh, procediamo al pagamento.

Vedi che mi dice che il pagamento è andato a buon fine e ritorna quindi sulla pagina dove mi appare una notifica che mi dice acquisto effettuato, grazie.

In questo momento, quindi se questo fosse stata la versione di produzione, con le chiavi dell'ambiente di produzione di Stripe, um su non la versione test di Bubble, ma sulla versione live, avresti effettivamente, um addebitato dei soldi sulla carta e incassato, um i tuoi primi soldi per questo nuovo prodotto l' MVP su cui stai lavorando.