Come costruire una scatola di abbonamento con Stamplay

Cosa starai creando

Le scatole di abbonamento sono un business sempre più popolare in questi giorni. Li puoi trovare per tutto, dai prodotti per la toelettatura agli snack salutari, ai giochi per bambini e persino al gelato. In questo tutorial, ti mostrerò come creare rapidamente un'app Web per testare se riesci a trovare i primi 1.000 clienti per l'idea della tua sottoscrizione!

La nostra app è ispirata al servizio di abbonamento a cocktail Shaken e include le seguenti funzionalità:

Iscriviti agli utenti tramite Facebook.
Attiva pagamenti ricorrenti tramite Stripe.
Metti in pausa e riattivare le iscrizioni.
Invia email transazionali.
Aggiungi utenti a un elenco MailChimp.

Questo tutorial ti mostrerà come configurare un back-end completo e come costruire il front-end AngularJS che si collega ad esso.

Il codice completo del front-end può essere trovato su GitHub.

buono: Stamplay ha fornito ai lettori di Tuts + un coupon esclusivo da fornire 6 mesi del piano plus gratis ($ 600 valore). Il codice coupon è CODETUTSPLUS e scade il 10 ottobre. Iscriviti ora gratuitamente per riscattarlo.

1. Stamplay: API Lego per sviluppatori

Stamplay è una piattaforma di sviluppo basata sul Web che offre agli sviluppatori un modo incredibilmente veloce per creare applicazioni completamente integrate. Stamplay si prende il disturbo di parlare con molte API diverse, quindi non è necessario.

Stamplay è costruito attorno al concetto di componenti; i componenti sono gli elementi costitutivi della nostra applicazione. Possiamo vedere i diversi strumenti disponibili per noi sotto Attività> Componenti.

Una volta effettuato il login, sei salutato con questa dashboard semplice ed elegante. Creeremo un'applicazione qui. Chiamalo come vuoi, ma ricorda che questo nome è quello che utilizzeremo per identificare la nostra applicazione. Questo sarà anche usato come URL per la nostra applicazione quando è ospitata.

Nel nostro caso, stiamo utilizzando "tutsplus" e la nostra applicazione sarà ospitata su https://tutsplus.stamplayapp.com.

Ora iniziamo a configurare il back-end.

1.1 Configurazione del back-end: integrazione della registrazione di Facebook

Questa app sarà dotata di un accesso Facebook. Saremo in grado di interagire con l'API di Facebook e gestire l'accesso e l'iscrizione, il tutto senza una sola riga di codice. Dal momento che desideriamo che i nostri utenti si registrino con Facebook, dovremo andare alla pagina degli sviluppatori di Facebook e creare una nuova app per sviluppatori.

Selezionare Sito web, e una volta creata la tua app, saremo in grado di prendere due cose di cui abbiamo bisogno da Facebook per integrarsi con Stamplay:

ID app
App Secret

Queste due cose possono essere trovate sotto Impostazioni> Di base.

Ora che abbiamo il nostro ID App e App Secret, possiamo collegarli a Stamplay.

Torna a Stamplay e seleziona utenti dal menu principale, quindi Autenticazione. Inserisci Facebook come servizio di registrazione, copia e incolla l'ID App e il Segreto App e fai clic su Salvare.

Ora puoi registrare gli utenti tramite Facebook!

Ora che abbiamo collegato le credenziali di Facebook, Stamplay fornisce un comodo URL API per gestire l'accesso con Facebook. Andiamo ora e vediamo il nostro login Facebook in azione.

Vai a https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

E boom! Hai il tuo login di Facebook attivo e funzionante.

1.2 Configurazione del back-end: gestione dei dati con gli oggetti

Non tutto può essere gestito con componenti, quindi Stamplay ci offre un modo semplice per gestire i dati personalizzati. Pensa a questa come all'interfaccia del database di back-end per la tua applicazione.

Gli ordini verranno tracciati con un oggetto chiamato ordini. Ha le seguenti cinque proprietà:

attivo (booleano) // per tracciare se la sottoscrizione è attiva o meno
indirizzo (plain_object) // informazioni sull'indirizzo dell'utente
plan (string) // il piano a cui l'utente si è iscritto
stripesubscription (string) // l'ID dell'abbonamento generato da Stripe
utente (user_id) // unico _id del nostro utente

Stamplay esporrà immediatamente le API RESTful non appena creerai l'oggetto. L'endpoint sarà simile a questo: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Configurazione di Stripe

Avremo bisogno di fatturare periodicamente i nostri clienti, e per fortuna questo è facile da fare con Stripe! L'elaborazione dei pagamenti ricorrenti è implementata all'interno del concetto di Piano. I Piani a strisce sono oggetti che rappresentano il costo e il ciclo di fatturazione delle tue iscrizioni.

Per configurarlo devi creare il tuo piano in Console a strisce> Piani:

Una volta terminato, torna a Stamplay e collega il componente Stripe in Attività> Componenti. Seleziona il Banda modulo e fare clic su Collegare pulsante.

Ora l'account Stripe sarà collegato all'app Stamplay, che può eseguire richieste API per nostro conto.

Dopo una connessione Stripe andata a buon fine, finirai con una vista come questa.

1.4 Configurazione di MailChimp

Per configurare MailChimp, il processo è abbastanza simile; collega semplicemente il tuo account MailChimp come hai fatto in precedenza con Stripe e vedrai una pagina come questa:

2. Aggiunta di automazione con attività

Questa è la parte lato server della nostra applicazione, dove avviene la maggior parte della magia! Diciamo che vogliamo fare un paio di cose:

Invia un messaggio di benvenuto quando un utente si iscrive a Facebook.
Aggiungi utenti a un elenco MailChimp quando si registrano.

Queste due cose normalmente richiedono una buona porzione di codice, ma non con Stamplay ...

2.1 Email di benvenuto

Una procedura guidata ti guiderà attraverso la configurazione dell'attività. Sotto Attività> Gestione, crea una nuova attività e configurala come preferisci. Ecco come abbiamo configurato l'attività di email di benvenuto:

Quindi è possibile configurare l'azione sfruttando le variabili che escono dal trigger (in questo caso, l'utente). Ecco come abbiamo configurato il nostro:

2.2 Invia gli utenti a una lista MailChimp

Spingere le e-mail degli utenti alla tua mailing list su MailChimp è semplice.

Sotto Attività> Gestione, crea una nuova attività e configurala come preferisci. Ecco come abbiamo configurato l'attività di iscrizione a MailChimp.

3. Il front-end

Per iniziare a lavorare sul nostro front-end, avremo bisogno di utilizzare lo strumento CLI Stamplay.

3.1 Installa la CLI di Stamplay

Questo strumento ci darà la possibilità di lavorare con le nostre applicazioni Stamplay. Ci consente di:

distribuire applicazioni
avviare un server locale per lo sviluppo
inizializza un progetto Stamplay
ripristinare le versioni
scarica l'ultima versione

$ npm install -g stamplay-cli

Creiamo una nuova cartella e inizializza la nostra applicazione Stamplay in quella cartella.

$ mkdir tutsplus && cd tutsplus $ stamplay init

Ti verrà richiesto di inserire il tuo appId (nome della tua app) e il tuo apikey. In questo caso, lo sono tutsplus e 4 **** 0 rispettivamente.

Questo creerà un file stamplay.json nella radice della tua app in modo che Stamplay conoscerà le tue credenziali durante la distribuzione.

"appId": "tutsplus", "apiKey": "4e **** 0", "public": "./", "ignore": ["stamplay.json", "** /. *", "** / node_modules / **"]

3.2 Costruire il front-end

Per colpire il terreno con un buon design, siamo partiti da uno dei tanti template HTML5 gratuiti e gratuiti realizzati da Templated.co. Quello che abbiamo usato si chiama Retrospect.

Scaricalo e decomprimilo nella cartella del nostro progetto. Quindi installiamo alcune librerie aggiuntive qui usando Bower. Esegui il seguente comando e saremo a posto:

$ bower installa angolare-ui-router angolare-timbrolay stamplay-sdk angular-route --save

Per utilizzare Stamplay con Angular, sarà necessario:

caricare l'SDK di Stamplay
configurare l'applicazione Stamplay
carico angolare
caricare il router UI angolare
carica la libreria Angular-Stamplay (solo un service wrapper per l'SDK)

Ecco le linee richieste per fare tutto ciò. Li aggiungeremo sotto il tag del nostro file index.html:

 ...  ...  ... .

Assicurati di aver digitato il tuo AppId nella funzione Stamplay.init. Ora possiamo avviare il nostro server locale per assicurarci che tutto funzioni correttamente. Esegui il seguente:

inizio

Vedrai che la tua applicazione è pronta per andare all'indirizzo http: // localhost: 8080.

3.3 L'applicazione angolare

Creeremo alcuni file per la nostra applicazione Angolare:

I due file di servizi utilizzeranno l'SDK di Stamplay e le librerie di angolari e di timbri per aiutare la nostra applicazione ad interagire con i nostri dati Stamplay.

Il più importante è userService.js. Ha alcune funzioni e ci aiuta a prendere i dati o creare dati. Per uno sguardo più approfondito su ciò che l'SDK di Stamplay è in grado di fare, assicurati di consultare la documentazione.

UserService.js sfrutta lo Stamplay JS SDK per fornire alla nostra app Angolare le seguenti funzionalità:

accesso
disconnettersi
isLogged
saveAddress
getUserModel
createCard
sottoscrivi
Annulla l'iscrizione

/assets/js/services/userService.js

/ * Globale angolare, Stripe, console * / 'use strict'; angular .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay', funzione ($ q, $ stamplay) var user = $ stamplay.User (). Modello; login: function () return user.login ('facebook');, logout: function () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : funzione (indirizzo, città, codice postale) // Salva le informazioni sull'indirizzo dell'utente, getUserModel: function () // Trova informazioni utente, createCard: function (cardObj) // Raccogli le informazioni sulla carta di credito e memorizzale tramite Stripe , iscriviti: function (planId) // Iscriviti utente, annulla l'iscrizione: function (planId) // Annulla l'abbonamento utente;]);

La nostra applicazione avrà tre pagine:

home.html, la pagina di destinazione principale in cui l'utente sarà in grado di registrarsi
subscriptions.html, dove gli utenti possono visualizzare le caselle disponibili per un abbonamento
profile.html, in cui gli utenti possono modificare le proprie informazioni e annullare una sottoscrizione

Queste pagine sono gestite da tre controller (come suggerito dalle best practice), che sono homeCtrl.js, subscriptionCtrl.js e profileCtrl.js.

I modelli di pagina e i controller sono collegati tra loro dall'app principale Angular.

Ecco le basi della nostra app.js:

/ * global angular * / 'use strict'; angular.module ('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); angular .module ('tutsplus') .config (function ($ stateProvider, $ urlRouterProvider) $ urlRouterProvider.otherwise ('/'); $ stateProvider .state ('home', url: '/', templateUrl: '/ pages / home.html ', controller:' homeCtrl ', controllerAs:' home ') .state (' subscriptions ', url:' / subscriptions ', templateUrl:' /pages/subscriptions.html ', controller:' subscriptionCtrl ', controllerAs:' sub ') .state (' profile ', url:' / profile ', templateUrl:' /pages/profile.html ', controller:' profileCtrl ', controllerAs:' profile '); ) / * * Salva utente registrato, se presente, nella funzione rootScope * / .run (['$ rootScope', 'userService', funzione ($ rootScope, userService) userService.getUserModel () .then (function (userResp)  $ rootScope.user = userResp;);]);

Ora abbiamo solo bisogno di caricare i nostri nuovi file in index.html sotto le librerie che abbiamo aggiunto in precedenza.

/index.html

... capo del file index.html ...

3.4 Autenticazione front-end

Abbiamo collegato la nostra applicazione Facebook in precedenza, e ora abbiamo bisogno di fornire ai nostri utenti un modo per usarlo! Tutta l'autenticazione è gestita da Stamplay. Non abbiamo bisogno di codificare nulla; abbiamo solo bisogno di collegare i nostri utenti al percorso di autenticazione che Stamplay ci ha fornito.

Il processo di autenticazione ha questo aspetto:

Collega gli utenti al nostro URL di autenticazione.
L'autenticazione avviene su Facebook.
Facebook rimanda un utente alla nostra applicazione con un token.
Stamplay gestisce l'archiviazione di quel token e il nostro utente è autenticato.

Abbiamo solo bisogno di configurare manualmente il primo di questi passaggi. Applichiamo la nostra app Angolare con ng-app e ng-controllore per index.html e aggiungere alcune direttive Angular per connettere la home page con il nostro homeCtrl.js. Stiamo anche andando a rimuovere tutto tra il

e il

del modello originale e sostituirlo con a elemento tag.

Questo elemento mostrerà dinamicamente il contenuto della pagina corrente.

/index.html

... capo del file index.html ...    Stamplay Shaken
 Menu     Casa
 Il mio profilo
 Nuova iscrizione
 Disconnettersi
 
 
 
 ... fine del file index.html ...

All'avvio dell'applicazione, il router controlla l'URL e carica la vista appropriata. Dentro il primo

di home.html, possiamo facilmente individuare tutte le direttive Angular associate alle funzioni homeCtrl.js.

/pages/home.html

  Benvenuto home.user.instance.displayName
 I migliori cocktail che tu abbia mai fatto
 Ingredienti e ricette premium, consegnati a casa ogni mese.
   Diventare socio 
  Nuovo abbonamento 

  Visualizza le tue iscrizioni

/assets/js/controllers/homeCtrl.js

/ * global angular * / 'use strict'; angular .module ('tutsplus') .controller ('homeCtrl', ['$ rootScope', 'userService', funzione ($ rootScope, userService) var homeModel = this; homeModel.isLogged = userService.isLogged (); $ rootScope . $ watch ('user', function (newVal) homeModel.user = newVal; homeModel.isLogged = userService.isLogged ();, true); homeModel.signUp = function () userService.login ();; homeModel.logout = function () userService.logout ();;]);

Ora, se un utente fa clic sul pulsante "Diventa un membro", gli verrà chiesto di accedere con il proprio account Facebook. Abbiamo dovuto eseguire il deploy perché l'autenticazione non funzionerà da localhost: 8080. Facebook vuole restituire un utente a un qualificato completo dominio.

A questo punto, distribuisci di nuovo l'applicazione utilizzando:

$ distribuzione di francobolli

Dopo che un utente ha effettuato l'accesso con successo, vogliamo che siano in grado di iscriversi a uno dei nostri piani.

3.5 Creazione di clienti Stripe

I clienti sono l'altro componente principale degli abbonamenti. In senso lato, un cliente è solo un modo generico per associare i tuoi utenti al tuo account Stripe. In genere ti consigliamo di associare alcuni metadati, come un indirizzo email, con un cliente. Gli oggetti cliente possono anche memorizzare una carta di credito, che è come verranno fatturati in seguito.

Creare un nuovo cliente tramite l'API è facile, poiché lo Stamplay JS SDK fornisce già tutto il supporto richiesto. La nostra app associa un cliente Stripe ai nostri utenti subito dopo la registrazione o l'accesso, gestito da userService.js nel getUserModel funzione.

/assets/js/services/userService.js

... head of userService.js ... getUserModel: function () var def = $ q.defer (); user.currentUser () .then (function () // crea un utente stripe se non esiste if (user.isLogged ()) if (! user.get ('stripeCustomerId')) $ stamplay.Stripe ( ) .createCustomer (user.get ('id')) .then (function (sResponse) var saveUser = $ stamplay.User (). Model; user.set ('stripeCustomerId', sResponse.customer_id); user.set ( 'subscriptions', sResponse.subscriptions); saveUser.set ('stripeCustomerId', user.get ('stripeCustomerId')); saveUser.set ('subscriptions', user.get ('subscriptions')); saveUser.set (' _id ', user.get (' _ id ')); saveUser.save () .then (function () def.resolve (utente););) else def.resolve (utente); altro def.resolve (user)) .catch (function (err) def.reject (err);); return def.promise;, ... tail of userService.js ...

Il codice sopra verifica se l'utente ha effettuato l'accesso o meno e se ne ha già uno stripeCustomerId proprietà. In caso contrario, crea un cliente Stripe con $ Stamplay.Stripe (). CreateCustomer (user.get ( 'id')) e memorizza il stripeCustomerId come una proprietà aggiuntiva dell'utente registrato.

Questo controllo viene attivato ogni volta che l'app inizia dal modulo angolare app.js.

/assets/js/modules/app.js

.run (['$ rootScope', 'userService', funzione ($ rootScope, userService) userService.getUserModel () .then (funzione (userResp) $ rootScope.user = userResp;);])

3.6 Sottoscrizione a un piano

Ora dobbiamo caricare definitivamente il nostro utente quando acquistano un piano. Il template subscriptions.html, legato al controller subscriptionCtrl.js, mostra ai nostri utenti i piani di abbonamento tra cui possono scegliere.

Quando l'utente seleziona uno degli abbonamenti, verrà visualizzato il modulo di pagamento, consentendo all'utente di finalizzare il proprio acquisto. La pagina di iscrizione elenca gli articoli nella parte superiore e contiene altre due sezioni (le sezioni di pagamento e di ringraziamento), entrambe nascoste.

/pages/subscription.html

    Unisciti al tuo modo spirituale
     Dio salvi la regina
 Scopri un nuovo cocktail gin ogni mese.
  sottoscrivi 
 
 
 
   
... 
    Informazioni sul pagamento
      Dati personali
 
   
   
   
  Informazioni sulla carta
 
   
   
   
   
  Sottoscrizione
 
   
  Dettagli di spedizione
 
   
   
   
   Salva come indirizzo predefinito 
 
 
  
 
 
 
 
...

Per passare le informazioni relative all'abbonamento selezionato useremo una funzione chiamata openSubscribe ( 'planName') da subscriptionCtrl.js.

/assets/js/controllers/subscriptionCtrl.js

subModel.openSubscribe = function (planId) subModel.showPayment = true; subModel.showThankyou = falso; subModel.selectedPlanName = subModel.selectedPlanMap [planId]; subModel.selectedPlanId = planId; // Scorrere fino al pagamento $ timeout (function () $ location.hash ('payment-form'); $ anchorScroll ();); ;

Questa funzione rende visibile il modulo di pagamento che verrà visualizzato insieme ai dati dell'utente e al piano selezionato.

Questo modulo raccoglie le informazioni dell'utente, l'abbonamento selezionato e i valori della carta di credito.

Per raccogliere i valori delle carte di credito, dobbiamo aggiungere il client JavaScript di Stripe per ottenere un token per la carta, e quindi usiamo la funzione Stripe di Stamplay per finalizzare il piano. Nel nostro index.html, importiamo la libreria Stripe.js e inizializzala con la nostra chiave di prova.

/index.html

...         ...

Infine, l'abbonamento può essere elaborato. quando Conferma iscrizione viene cliccato, il nostro subscriptionCtrl.js avvia il processo di iscrizione, sfruttando userService.js.

/assets/js/controllers/subscriptionCtrl.js

... subModel.subscribe = function ($ event) $ ($ event.currentTarget) .prop ('disabled', 'disabled'); if (subModel.saveAddress) userService.saveAddress (subModel.address.address, subModel.address.city, subModel.address.zipcode);  userService.createCard (number: subModel.card.number, exp_month: subModel.card.expM, exp_year: subModel.card.expY, cvc: subModel.card.cvc) .then (function () return userService.subscribe (subModel.selectedPlanId);) .then (function () subModel.showPayment = false; subModel.showThankyou = true; $ ($ event.currentTarget) .removeProp ('disabled');). catch (function (err ) $ ($ event.currentTarget) .removeProp ('disabled');); ; ...

Prima di salvare la carta di credito, aggiorna l'utente con le informazioni relative all'indirizzo. Vedremo in seguito perché questo è utile in questa fase.

Un utente può essere associato a una sola carta di credito. Questo è il motivo per cui il createCard la funzione controlla se l'utente ne ha già uno con $ Stripe.getCreditCard (user.get ( 'id')). Se non è presente alcuna carta, procederemo ad aggiungere la carta.

Prima di legare la carta all'utente, è necessario aggiungere la libreria JavaScript lato client Stripe per convertire in modo sicuro i valori della carta di credito in un token. Una volta ottenuto il token, possiamo passarlo a Stamplay JS SDK e associare la carta all'utente $ Stamplay.Stripe (). CreateCreditCard.

/assets/js/service/userService.js

... createCard: function (cardObj) var def = $ q.defer (); var $ stripe = $ stamplay.Stripe (); $ stripe.getCreditCard (user.get ('id')) .then (function (response) var nDef = $ q.defer (); if (response.card_id) nDef.resolve (); else Stripe. card.createToken (cardObj, function (err, response) var token = response.id; $ stamplay.Stripe (). createCreditCard (user.get ('id'), token) .then (function (response) nDef. resolve (response);) .catch (function (err) nDef.reject (new Error (err)););); return nDef.promise;) .then (function () def.resolve ();) .catch (function (err) console.log (err);); return def.promise;  ...

Per testare l'implementazione Stripe, abbiamo precompilato le informazioni della carta di credito con i valori di test riportati di seguito. Per informazioni sui test in Stripe, consultare la documentazione.

n.4242 4242 4242 4242
data: 07/2020
cvc: 424

Il flusso di sottoscrizioni continua quindi chiamando la funzione di sottoscrizione userService.js. Questo completa la procedura inviando la richiesta di iscrizione a Stripe.

/assets/js/services/userService.js

... subscribe: function (planId) var def = $ q.defer (); $ stamplay.Stripe (). createSubscription (user.get ('id'), planId) .then (function () return $ stamplay.Stripe (). getSubscriptions (user.get ('id'));). then (function (response) user.set ('subscriptions', response.data); var saveUser = $ stamplay.User (). Model; saveUser.set ('subscriptions', user.get ('subscriptions')); saveUser.set ('id', user.get ('id')); saveUser.save () .then (function () def.resolve (););) .catch (function (err) console .log (err); def.reject (err);); return def.promise;

La funzione di abbonamento è semplice. Una volta che ci assicuriamo che l'utente esista e abbia una carta di credito, dobbiamo solo chiamare $ Stamplay.Stripe (). CreateSubscription.

L'ultimo passaggio consiste nel tenere traccia degli abbonamenti creando ordini e ricevendo notifiche per ogni nuovo abbonamento che vendiamo tramite il sito web. Torniamo a Stamplay e impostiamo alcune attività.

4. Aggiunta di automazione finale

Vogliamo associare i dati di abbonamento a un ordine e viceversa. Ciò consentirà ai nostri utenti di disattivare l'abbonamento se lo desiderano.

4.1 Quando viene inviata una nuova sottoscrizione, creare un ordine

Quando è stata inviata una sottoscrizione, vogliamo creare una nuova istanza di un oggetto ordine. L'ordine terrà traccia di subscriptionId che è appena stato creato da Stripe, il ID utente, il piano e l'indirizzo.

Quando un'attività viene attivata da un utente che ha effettuato l'accesso, è possibile utilizzare qualsiasi proprietà per alimentare l'azione successiva. Questo è il motivo per cui abbiamo abbinato l'indirizzo ai nostri utenti in subscriptionCtrl.js. Questo ci consente di memorizzarli nell'oggetto ordine anche se i dati del trigger di sottoscrizione non forniscono queste informazioni. Quindi puoi vedere la proprietà dell'indirizzo dell'ordine che viene riempita con i dati recuperati dall'utente, ad es. User.address.city.

4.2 Quando si effettua un nuovo ordine, associarlo alla sottoscrizione correlata

Per avere un riferimento dell'ordine anche nell'abbonamento su Stripe, possiamo aggiornare l'abbonamento Metadati campo come segue. Per prima cosa selezioniamo il trigger appropriato e l'azione da Oggetti e Banda componente.

Da quando abbiamo salvato il nostro ordine nell'ID di sottoscrizione, ora possiamo modificare gli abbonamenti di Stripe con Id.

4.3 Quando viene eseguito un nuovo ordine, avvisare sia l'utente che l'amministratore dell'app con un'e-mail

Conclusione

In questo tutorial, abbiamo esaminato come iniziare a creare un'applicazione Web utilizzando Stamplay. Abbiamo implementato la funzionalità di accesso social e abbiamo autenticato l'utente con successo contro il database Stamplay. Abbiamo creato API RESTful per gestire gli ordini. Siamo stati in grado di connettere la nostra app alle API MailChimp e Stripe e incollarle insieme con alcune automazioni di back-end.

buono: Stamplay ha fornito ai lettori di Tuts + un coupon esclusivo da fornire 6 mesi del piano plus gratis ($ 600 valore). Il codice coupon è CODETUTSPLUS e scade il 10 ottobre. Iscriviti ora gratuitamente per riscattarlo.

Codice