Comment construire une boîte d'abonnement avec Stamplay

Ce que vous allez créer

Les boîtes d'abonnement sont une activité de plus en plus populaire de nos jours. Vous pouvez les trouver pour tout, des produits de toilettage aux collations santé, aux jeux pour enfants et même aux glaces. Dans ce tutoriel, je vais vous montrer comment créer rapidement une application Web afin de vérifier si vous pouvez trouver les 1 000 premiers clients pour votre idée de boîte d'abonnement.!

Notre application est inspirée par le service d'abonnement de cocktail Shaken et comprend les fonctionnalités suivantes:

Inscrire des utilisateurs via Facebook.
Activer les paiements récurrents via Stripe.
Suspendre et réactiver les abonnements.
Envoyer des emails transactionnels.
Ajouter des utilisateurs à une liste MailChimp.

Ce tutoriel vous montrera comment configurer un back-end complet et comment construire le front-end AngularJS qui s'y connecte.

La base de code complète du front-end est disponible sur GitHub.

Coupon: Stamplay a fourni aux lecteurs de Tuts + un coupon exclusif pour offrir 6 mois du plan plus gratuitement (Valeur de 600 $). Le code promo est CODETUTSPLUS et il expire le 10 octobre. Inscrivez-vous gratuitement pour l'échanger.

1. Stamplay: API Lego pour les développeurs

Stamplay est une plate-forme de développement Web qui offre aux développeurs un moyen extrêmement rapide de créer des applications entièrement intégrées. Stamplay gère le problème de la communication avec de nombreuses API différentes pour que vous n'ayez pas à.

Stamplay est construit autour du concept de composants; les composants sont les blocs de construction de notre application. Nous pouvons voir les différents outils à notre disposition sous Tâches> Composants.

Une fois connecté, vous êtes accueilli avec ce tableau de bord simple et élégant. Nous allons créer une application ici. Nommez-le comme bon vous semble, mais souvenez-vous que ce nom est celui que nous utiliserons pour identifier notre application. Cela servira également d'URL pour notre application lorsqu'elle est hébergée..

Dans notre cas, nous utilisons "tutsplus", et notre application sera hébergée à l'adresse https://tutsplus.stamplayapp.com.

Commençons maintenant à configurer le back-end.

1.1 Configuration du back-end: Intégration de Facebook Signup

Cette application comportera un identifiant Facebook. Nous pourrons interagir avec l'API Facebook et gérer la connexion et l'inscription, le tout sans une seule ligne de code. Puisque nous voulons que nos utilisateurs s'inscrivent avec Facebook, nous devons nous rendre sur la page Développeurs de Facebook et créer une nouvelle application pour développeurs..

Sélectionner Site Internet, et une fois que votre application sera créée, nous serons en mesure de récupérer deux éléments indispensables à l'intégration de Facebook à Stamplay:

ID de l'application
App Secret

Ces deux choses peuvent être trouvées sous Paramètres> Basique.

Maintenant que nous avons notre identifiant et notre secret d’application, nous pouvons les intégrer à Stamplay..

Retournez à Stamplay et sélectionnez Utilisateurs dans le menu principal, puis Authentification. Ajouter Facebook en tant que service d’inscription, copiez et collez l’ID et le secret de l’application, puis cliquez sur sauvegarder.

Vous pouvez maintenant enregistrer des utilisateurs via Facebook!

Maintenant que nous avons connecté nos identifiants Facebook, Stamplay fournit une URL d’API pratique pour gérer la connexion à Facebook. Allons-y maintenant et voyons notre login Facebook en action.

Allez à https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

Et boum! Vous avez votre connexion Facebook et opérationnel.

1.2 Configuration du back-end: Gestion des données avec des objets

Tout ne peut pas être géré avec des composants, Stamplay nous fournit donc un moyen simple de gérer des données personnalisées. Pensez à cela comme l'interface de base de données principale pour votre application.

Les commandes seront suivies avec un objet appelé ordres. Il a les cinq propriétés suivantes:

active (boolean) // pour savoir si l'abonnement est actif ou non
address (plain_object) // adresse de l'utilisateur
plan (chaîne) // le plan auquel l'utilisateur s'est abonné
stripesubscription (string) // l'identifiant d'abonnement généré par Stripe
user (user_id) // l'identifiant unique _id de notre utilisateur

Stamplay exposera instantanément les API RESTful dès que vous créez l'objet. Le terminal ressemblera à ceci: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Configurer Stripe

Nous devrons facturer nos clients périodiquement, et heureusement, cela est facile à faire avec Stripe! Son traitement des paiements récurrents est mis en œuvre dans le concept de plan. Les Stripes Plans sont des objets représentant le coût et le cycle de facturation de vos abonnements..

Pour le configurer, vous devez créer votre plan dans le Console à rayures> Plans:

Une fois cela fait, retournez dans Stamplay et connectez le composant Stripe à Tâche> Composants. Sélectionnez le Bande module et cliquez sur le Relier bouton.

Maintenant, le compte Stripe sera lié à l'application Stamplay, qui peut effectuer des requêtes d'API en notre nom..

Après une connexion Stripe réussie, vous obtiendrez une vue comme celle-ci..

1.4 Configuration de MailChimp

Pour configurer MailChimp, le processus est assez similaire. Connectez simplement votre compte MailChimp comme vous l'avez fait précédemment avec Stripe et vous verrez une page comme celle-ci:

2. Ajout de l'automatisation avec des tâches

C’est la partie serveur de notre application, où l’essentiel de la magie opère! Disons que nous voulons faire quelques choses:

Envoyer un message de bienvenue lorsqu'un utilisateur s'inscrit avec Facebook.
Ajouter des utilisateurs à une liste MailChimp lors de leur inscription.

Ces deux choses nécessiteraient normalement un bon morceau de code, mais pas avec Stamplay…

2.1 Email de bienvenue

Un assistant vous guidera à travers la configuration de la tâche. Sous Tâches> Gérer, créez une nouvelle tâche et configurez-la comme vous le souhaitez. Voici comment nous avons configuré la tâche de courrier électronique de bienvenue:

Vous pouvez ensuite configurer l'action en exploitant les variables issues du déclencheur (dans ce cas, l'utilisateur). Voici comment nous avons configuré la nôtre:

2.2 Pousser les utilisateurs vers une liste MailChimp

Pousser les emails des utilisateurs vers votre liste de diffusion sur MailChimp est simple.

Sous Tâches> Gérer, créez une nouvelle tâche et configurez-la comme vous le souhaitez. Voici comment nous avons configuré la tâche d'abonnement MailChimp.

3. Le front end

Pour commencer à travailler sur notre front-end, nous devrons utiliser l'outil Stamplay CLI.

3.1 Installer la CLI Stamplay

Cet outil nous donnera la possibilité de travailler avec nos applications Stamplay. Cela nous permet de:

déployer des applications
démarrer un serveur local pour le développement
initialiser un projet Stamplay
versions antérieures
télécharger la dernière version

$ npm installer -g stamplay-cli

Créons un nouveau dossier et initialisons notre application Stamplay dans ce dossier.

$ mkdir tutsplus && cd tutsplus $ stamplay init

Vous serez invité à entrer votre appId (nom de votre application) et votre clé API. Dans ce cas, ils sont tutsplus et 4 **** 0 respectivement.

Cela créera un fichier stamplay.json à la racine de votre application afin que, lors du déploiement, Stamplay connaisse vos informations d'identification..

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

3.2 Construire le front-end

Pour lancer le jeu avec un bon design, nous avons commencé par l’un des nombreux modèles gratuits gratuits de HTML5, optimisé par Templated.co. Celui que nous avons utilisé s'appelle Retrospect.

Téléchargeons-le et décompressez-le dans notre dossier de projet. Ensuite, installons quelques bibliothèques supplémentaires ici en utilisant Bower. Exécutez la commande suivante et nous serons prêts à partir:

$ bower installer angular angular-ui-router angular-stamplay stamplay-sdk angular-route --save

Pour utiliser Stamplay avec Angular, nous devrons:

charger le SDK Stamplay
configurer l'application Stamplay
charge angulaire
charger le routeur d'interface utilisateur angulaire
charger la bibliothèque Angular-Stamplay (juste un wrapper de service pour le SDK)

Voici les lignes nécessaires pour faire tout cela. Nous les ajouterons en dessous de la balise de notre fichier index.html:

 …  …  … .

Assurez-vous que vous avez tapé votre propre AppId dans la fonction Stamplay.init. Nous pouvons maintenant démarrer notre serveur local pour nous assurer que tout se charge correctement. Exécutez ce qui suit:

début de l'étamage

Vous verrez que votre application est prête à fonctionner à l'adresse http: // localhost: 8080..

3.3 L'application angulaire

Nous allons créer des fichiers pour notre application Angular:

Les deux fichiers de services utiliseront le Stamplay SDK et les bibliothèques angular-stamplay pour aider notre application à interagir avec nos données Stamplay..

Le plus important est userService.js. Il a quelques fonctions et nous aide à récupérer des données ou à créer des données. Pour en savoir plus sur ce dont le SDK Stamplay est capable, n’oubliez pas de consulter la documentation..

UserService.js utilise le kit de développement logiciel Stamplay JS pour fournir à notre application Angular les fonctionnalités suivantes:

s'identifier
Connectez - Out
isLogged
saveAddress
getUserModel
createCard
souscrire
Se désabonner

/assets/js/services/userService.js

/ * global angular, Stripe, console * / 'use strict'; angular .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay', fonction ($ q, $ stamplay) var user = $ stamplay.User (). Model; return; login: function () return user.login ('facebook');, déconnexion: function () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : function (adresse, ville, code postal) // Enregistrer les informations d'adresse de l'utilisateur, getUserModel: function () // Obtenir des informations sur l'utilisateur, createCard: function (cardObj) // Collecter des informations de carte de crédit et les stocker via Stripe , subscribe: function (planId) // abonner un utilisateur, se désabonner: function (planId) // annuler un abonnement utilisateur;]);

Notre application aura trois pages:

home.html, la page d'arrivée principale sur laquelle l'utilisateur pourra s'inscrire
subscriptions.html, où les utilisateurs peuvent voir les cases disponibles pour un abonnement
profile.html, où les utilisateurs peuvent modifier leurs informations et annuler un abonnement

Ces pages sont gérées par trois contrôleurs (comme le suggèrent les meilleures pratiques), à savoir homeCtrl.js, subscriptionCtrl.js et profileCtrl.js..

Les modèles de page et les contrôleurs sont liés par l'application angulaire principale.

Voici le fondement de nos 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 ', contrôleur:' homeCtrl ', contrôleurAs:' home ') .state (' subscriptions ', url:' / subscriptions ', templateUrl:' /pages/subscriptions.html ', contrôleur:' subscriptionCtrl ', controllerAs:' sub '') .state ('profile', url: '/ profile', templateUrl: '/pages/profile.html', contrôleur: 'profileCtrl', controllerAs: 'profile'); ) / * * Enregistrer l’utilisateur connecté, le cas échéant, dans rootScope * / .run (['$ rootScope', 'userService', fonction ($ rootScope, userService) userService.getUserModel () .then (fonction (userResp) . $ rootScope.user = userResp;);]);

Maintenant, nous devons juste charger nos nouveaux fichiers dans index.html sous les bibliothèques que nous avons ajoutées précédemment.

/index.html

… Tête du fichier index.html…

3.4 Authentification frontale

Nous avons câblé notre application Facebook plus tôt et nous devons maintenant fournir à nos utilisateurs un moyen de l'utiliser! Toute l'authentification est gérée par Stamplay. Nous n'avons pas besoin de coder quoi que ce soit; nous avons juste besoin de relier nos utilisateurs au chemin d’authentification que Stamplay nous a fourni.

Le processus d'authentification ressemble à ceci:

Lier les utilisateurs à notre URL d'authentification.
L'authentification se fait sur Facebook.
Facebook renvoie un utilisateur à notre application avec un jeton.
Stamplay gère le stockage de ce jeton et notre utilisateur est authentifié.

Il suffit de configurer manuellement la première de ces étapes. Appliquons notre application angulaire avec ng-app et ng-contrôleur à index.html et ajoutez quelques directives angulaires pour connecter la page d’accueil avec notre homeCtrl.js. Nous allons aussi tout enlever entre le

et le

du modèle d'origine et remplacez-le par un élément tag.

Cet élément affichera dynamiquement le contenu de la page en cours.

/index.html

… Tête du fichier index.html…    Stamplay secoué
 Menu     Accueil
 Mon profil
 Nouvel abonnement
 Connectez - Out
 
 
 
 … Fin du fichier index.html…

Lorsque l'application démarre, le routeur vérifie l'URL et charge la vue appropriée. À l'intérieur du premier

de home.html, nous pouvons facilement repérer toutes les directives angulaires associées aux fonctions homeCtrl.js.

/pages/home.html

  Bienvenue home.user.instance.displayName
 Les meilleurs cocktails que vous avez faits
 Ingrédients et recettes haut de gamme, livrés à votre porte chaque mois.
   Devenir membre 
  Nouvel abonnement 

  Voir vos abonnements

/assets/js/controllers/homeCtrl.js

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

Désormais, si un utilisateur clique sur le bouton "Devenir membre", il lui sera demandé de se connecter avec son compte Facebook. Nous avons dû le déployer car l'authentification ne fonctionnera pas à partir de localhost: 8080. Facebook souhaite redonner à un utilisateur un nom complet domaine.

A ce stade, déployez à nouveau votre application en utilisant:

$ stamplay deploy

Une fois qu'un utilisateur s'est connecté avec succès, nous voulons qu'il puisse s'abonner à l'un de nos plans..

3.5 Création de clients Stripe

Les clients sont l'autre composant principal des abonnements. Au sens large, un client n’est qu’un moyen générique d’associer vos propres utilisateurs à votre compte Stripe. En règle générale, vous souhaiterez associer des métadonnées, comme une adresse électronique, à un client. Les objets client peuvent également stocker une carte de crédit. C'est ainsi qu'ils seront facturés ultérieurement..

La création d'un nouveau client via l'API est simple car le SDK Stamplay JS fournit déjà toute l'assistance requise. Notre application associe un client Stripe à nos propres utilisateurs juste après l'inscription ou la connexion. Celle-ci est gérée via userService.js dans le getUserModel une fonction.

/assets/js/services/userService.js

… Tête de userService.js… getUserModel: function () var def = $ q.defer (); user.currentUser () .then (function () // créer un client de stripe si n'existe pas 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 ('abonnements'));; saveUser.set (' _id ', user.get (' _ id ')); saveUser.save () .then (function () def.resolve (utilisateur););) default.resolve (utilisateur); autre def.resolve (utilisateur)) .catch (function (err) def.reject (err);); retourne def.promise;,… tail of userService.js…

Le code ci-dessus vérifie si l’utilisateur est connecté ou non, et s’il possède déjà un compte stripeCustomerId propriété. Sinon, cela crée un client Stripe avec $ stamplay.Stripe (). createCustomer (user.get ('id')) et stocke le stripeCustomerId en tant que propriété supplémentaire de l'utilisateur connecté.

Ce contrôle est déclenché à chaque démarrage de l'application par le module angulaire app.js..

/assets/js/modules/app.js

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

3.6 Souscription à un plan

Nous devons maintenant facturer nos utilisateurs lorsqu'ils achètent un forfait. Le modèle subscriptions.html, lié au contrôleur subscriptionCtrl.js, affiche à nos utilisateurs les plans d’abonnement qu’ils peuvent choisir..

Lorsque l'utilisateur sélectionne l'un des abonnements, le formulaire de paiement s'affiche pour lui permettre de finaliser son achat. La page d’abonnement répertorie les articles tout en haut et contient deux autres sections (les sections paiement et remerciement), toutes deux cachées..

/pages/subscription.html

    Rejoignez votre esprit
     Dieu sauve la reine
 Découvrez un nouveau cocktail de gin chaque mois.
  Souscrire 
 
 
 
   
… 
    Informations de paiement
      Données personnelles
 
   
   
   
  Info carte
 
   
   
   
   
  Abonnement
 
   
  Détails de livraison
 
   
   
   
   Enregistrer comme adresse par défaut 
 
 
  
 
 
 
 
…

Afin de transmettre les informations relatives à l'abonnement sélectionné, nous utiliserons une fonction appelée openSubscribe ('planName') de subscriptionCtrl.js.

/assets/js/controllers/subscriptionCtrl.js

subModel.openSubscribe = function (planId) subModel.showPayment = true; subModel.showThankyou = false; subModel.selectedPlanName = subModel.selectedPlanMap [planId]; subModel.selectedPlanId = planId; // Faites défiler jusqu'au paiement $ timeout (function () $ location.hash ('payment-form'); $ anchorScroll ();); ;

Cette fonction rend visible le formulaire de paiement qui sera affiché avec les données de l'utilisateur et le forfait sélectionné..

Ce formulaire recueille les informations de l'utilisateur, l'abonnement sélectionné et les valeurs de la carte de crédit..

Pour collecter les valeurs de carte de crédit, nous devons ajouter le client JavaScript de Stripe pour obtenir un jeton pour la carte, puis nous utilisons la fonction Stripe de Stamplay pour finaliser le plan. Dans notre index.html, importons la bibliothèque Stripe.js et initialisons-la avec notre clé de test.

/index.html

…         …

Enfin, l'abonnement peut être traité. Quand Confirmer l'abonnement est cliqué, notre subscriptionCtrl.js démarre le processus d'abonnement, en exploitant 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 (numéro: subModel.card.number, exp_month: subModel.card.expM, exp_year: subModel.card.expY, cvc: subModel.card.cvc) .then (fonction () retour userService.subscribe (subModel.selectedPlanId);) .then (function () subModel.showPayment = false; subModel.showThankyou = true; $ ($ event.currentTarget) .removeProp ('disabled');). catch (fonction (err ( ) $ ($ event.currentTarget) .removeProp ('disabled');); ;…

Avant de sauvegarder la carte de crédit, mettons à jour l’utilisateur avec ses informations d’adresse. Nous verrons plus tard pourquoi cela est utile à ce stade.

Un utilisateur ne peut être lié qu'à une seule carte de crédit. C'est pourquoi le createCard fonction vérifie si l'utilisateur en a déjà un avec $ stripe.getCreditCard (user.get ('id')). Si aucune carte n'est présente, nous procédons alors pour l'ajouter..

Avant de lier la carte à l'utilisateur, nous devons ajouter la bibliothèque JavaScript Stripe côté client pour convertir en toute sécurité les valeurs de carte de crédit en jeton. Une fois que nous avons le jeton, nous pouvons le transmettre à Stamplay JS SDK et lier la carte à l'utilisateur. $ 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 (réponse) var nDef = $ q.defer (); if (response.card_id) nDef.resolve (); else Stripe. card.createToken (cardObj, fonction (err, réponse) jeton var = réponse.id; $ stamplay.Stripe (). createCreditCard (user.get ('id'), jeton) .then (fonction (réponse) nDef. resolver (réponse);) .catch (function (err) nDef.reject (nouvelle erreur (; err)););); return nDef.promise;) .then (function () def.resolve ();) .catch (function (err) console.log (err);); retournez sans compromis; …

Pour tester la mise en œuvre de Stripe, nous avons pré-rempli les informations de carte de crédit avec les valeurs de test ci-dessous. Pour plus d'informations sur les tests dans Stripe, consultez la documentation..

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

Le flux d'abonnement continue ensuite en appelant la fonction d'abonnement userService.js. Ceci termine le processus en soumettant la demande d'abonnement à 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);); retournez sans compromis;

La fonction d'abonnement est simple. Lorsque nous nous assurons que l’utilisateur existe et qu’il dispose d’une carte de crédit, il ne reste plus qu’à appeler $ stamplay.Stripe (). createSubscription.

La dernière étape consiste à suivre les abonnements en créant des commandes et en recevant des notifications pour chaque nouvel abonnement que nous vendons via le site Web. Revenons à Stamplay et configurons certaines tâches..

4. Ajout de Final Automation

Nous voulons lier les données d'abonnement à une commande et vice versa. Cela permettra à nos utilisateurs de désactiver leur abonnement s'ils le souhaitent..

4.1 Quand un nouvel abonnement est soumis, créez une commande

Lorsqu'une souscription a été soumise, nous voulons créer une nouvelle instance d'un objet de commande. La commande gardera une trace de la abonnement qui vient d’être créé par Stripe, le identifiant d'utilisateur, le plan et l'adresse.

Lorsqu'une tâche est déclenchée par un utilisateur connecté, nous pouvons utiliser l'une de ses propriétés pour alimenter l'action qui suit. C'est pourquoi nous avons lié l'adresse à nos utilisateurs dans subscriptionCtrl.js. Cela nous permet de les stocker dans l'objet de commande même si les données du déclencheur d'abonnement ne fournissent pas ces informations. Ainsi, vous pouvez voir que la propriété d’adresse de la commande est remplie avec les données extraites de l’utilisateur, par exemple. user.address.city.

4.2 Quand une nouvelle commande est faite, la lier avec l'abonnement correspondant

Pour avoir une référence de la commande également dans l'abonnement sur Stripe, nous pouvons mettre à jour les abonnements de l'abonnement. Métadonnées champ comme suit. Commençons par sélectionner le déclencheur approprié et l'action à partir du Objets et Bande composant.

Comme nous avons enregistré notre commande sous l'identifiant d'abonnement, nous pouvons maintenant modifier les abonnements de Stripe par identifiant..

4.3 Quand une nouvelle commande est faite, notifiez l'utilisateur et l'administrateur de l'application avec un email

Conclusion

Dans ce tutoriel, nous avons

Code