So erstellen Sie eine Abonnementbox mit Stamplay

Was Sie erstellen werden

Abo-Boxen sind heutzutage ein immer beliebteres Geschäft. Sie finden sie für alles, von Pflegeprodukten über gesunde Snacks, Kinderspiele bis hin zu Eis. In diesem Tutorial zeige ich Ihnen, wie Sie schnell eine Web-App erstellen, um zu testen, ob Sie die ersten 1.000 Kunden für Ihre Abonnementbox-Idee finden!

Unsere App ist vom Cocktail-Abonnement-Service Shaken inspiriert und bietet folgende Funktionen:

Melden Sie sich über Facebook an.
Aktivieren Sie wiederkehrende Zahlungen über Stripe.
Abonnements anhalten und erneut aktivieren.
Senden Sie Transaktions-E-Mails.
Hinzufügen von Benutzern zu einer MailChimp-Liste.

In diesem Lernprogramm erfahren Sie, wie Sie ein Backend mit vollem Funktionsumfang konfigurieren und ein AngularJS-Frontend erstellen, das mit diesem verbunden ist.

Die vollständige Codebase des Frontends finden Sie auf GitHub.

Coupon: Stamplay hat Tuts + -Lesern einen exklusiven Gutschein zur Verfügung gestellt 6 Monate des Plusplans kostenlos (Wert 600 $). Der Gutscheincode lautet CODETUTSPLUS und es läuft am 10. Oktober aus. Melden Sie sich jetzt kostenlos an, um es einzulösen.

1. Stamplay: API Lego für Entwickler

Stamplay ist eine webbasierte Entwicklungsplattform, die Entwicklern eine unglaublich schnelle Möglichkeit bietet, vollständig integrierte Anwendungen zu erstellen. Mit Stamplay können Sie problemlos mit vielen verschiedenen APIs kommunizieren, so dass Sie dies nicht müssen.

Stamplay basiert auf dem Konzept der Komponenten. Komponenten sind die Bausteine unserer Anwendung. Wir können die verschiedenen verfügbaren Werkzeuge unter sehen Aufgaben> Komponenten.

Sobald Sie angemeldet sind, werden Sie mit diesem einfachen und eleganten Dashboard begrüßt. Wir erstellen hier eine Anwendung. Nennen Sie es, wie Sie möchten, aber denken Sie daran, dass wir diesen Namen zur Identifizierung unserer Anwendung verwenden. Diese wird auch als URL für unsere Anwendung verwendet, wenn sie gehostet wird.

In unserem Fall verwenden wir "tutsplus" und unsere Anwendung wird auf https://tutsplus.stamplayapp.com gehostet.

Beginnen wir nun mit der Konfiguration des Backends.

1.1 Backend konfigurieren: Facebook-Registrierung integrieren

Diese App enthält ein Facebook-Login. Wir können mit der Facebook-API interagieren und Anmeldungen und Anmeldungen ohne eine einzige Codezeile ausführen. Da wir möchten, dass sich unsere Benutzer bei Facebook anmelden, müssen wir zur Facebook-Entwicklerseite gehen und eine neue Entwickler-App erstellen.

Wählen Webseite, Sobald Sie Ihre App erstellt haben, können wir zwei Dinge von Facebook für die Integration in Stamplay nutzen:

App-ID
App-Geheimnis

Diese beiden Dinge finden Sie unter Einstellungen> Grundeinstellungen.

Jetzt, da wir unsere App-ID und das App-Geheimnis haben, können wir diese in Stamplay einbinden.

Gehen Sie zurück zu Stamplay und wählen Sie Benutzer aus dem Hauptmenü und dann Authentifizierung. Hinzufügen Facebook Kopieren Sie als Anmeldedienst die App-ID und das App-Geheimnis, und klicken Sie auf sparen.

Sie können jetzt Benutzer über Facebook registrieren!

Nachdem wir unsere Facebook-Anmeldeinformationen eingerichtet haben, bietet Stamplay eine praktische API-URL für die Anmeldung bei Facebook. Lass uns jetzt dorthin gehen und unseren Facebook-Login in Aktion sehen.

Gehen Sie zu https://tutsplus.stamplayapp.com/auth/v1/facebook/connect.

Und boom! Sie haben Ihr Facebook-Login und sind in Betrieb.

1.2 Backend konfigurieren: Daten mit Objekten verwalten

Mit Komponenten kann nicht alles bedient werden, daher bietet uns Stamplay eine einfache Möglichkeit, mit benutzerdefinierten Daten umzugehen. Stellen Sie sich dies als Back-End-Datenbankschnittstelle für Ihre Anwendung vor.

Bestellungen werden mit einem Objekt namens verfolgt Aufträge. Es hat die folgenden fünf Eigenschaften:

active (boolean) // um zu verfolgen, ob das Abonnement aktiv ist oder nicht
address (plain_object) // Adresse des Benutzers
plan (string) // der Plan, den der Benutzer abonniert hat
stripesubscription (string) // die von Stripe generierte Abonnement-ID
user (user_id) // die eindeutige _id unseres Benutzers

Stamplay zeigt sofort RESTful-APIs an, sobald Sie das Objekt erstellen. Der Endpunkt sieht folgendermaßen aus: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Streifen konfigurieren

Wir werden unsere Kunden regelmäßig in Rechnung stellen müssen, und dank Stripe ist das ganz einfach! Ihre wiederkehrende Zahlungsabwicklung wird im Plan-Konzept implementiert. Streifenpläne sind Objekte, die die Kosten und den Abrechnungszyklus Ihrer Abonnements darstellen.

Um dies einzurichten, müssen Sie Ihren Plan im erstellen Streifenkonsole> Pläne:

Wenn Sie fertig sind, gehen Sie zurück zu Stamplay und verbinden Sie die Stripe-Komponente Aufgabe> Komponenten. Wähle aus Streifen Modul und klicken Sie auf die Verbinden Taste.

Jetzt wird das Stripe-Konto mit der Stamplay-App verknüpft, die in unserem Auftrag API-Anforderungen ausführen kann.

Nach einer erfolgreichen Stripe-Verbindung erhalten Sie eine Ansicht wie diese.

1.4 MailChimp konfigurieren

Um MailChimp zu konfigurieren, ist der Prozess ziemlich ähnlich. Verbinden Sie einfach Ihr MailChimp-Konto wie zuvor mit Stripe, und Sie sehen eine Seite wie diese:

2. Automatisierung mit Aufgaben hinzufügen

Dies ist der serverseitige Teil unserer Anwendung, bei dem der Großteil der Magie geschieht! Nehmen wir an, wir wollen ein paar Dinge tun:

Senden Sie eine Begrüßungsnachricht per E-Mail, wenn sich ein Nutzer bei Facebook anmeldet.
Fügen Sie Benutzer zu einer MailChimp-Liste hinzu, wenn Sie sich anmelden.

Diese beiden Dinge würden normalerweise ein gutes Stück Code erfordern, aber nicht mit Stamplay…

2.1 Willkommens-E-Mail

Ein Assistent führt Sie durch die Konfiguration der Aufgabe. Unter Aufgaben> Verwalten, Erstellen Sie eine neue Aufgabe und richten Sie sie nach Ihren Wünschen ein. So haben wir die Willkommens-E-Mail-Aufgabe eingerichtet:

Dann können Sie die Aktion konfigurieren, indem Sie die vom Trigger kommenden Variablen (in diesem Fall der Benutzer) nutzen. So haben wir unsere konfiguriert:

2.2 Benutzer in eine MailChimp-Liste verschieben

Das Senden von E-Mails der Benutzer an Ihre Mailingliste in MailChimp ist unkompliziert.

Unter Aufgaben> Verwalten, Erstellen Sie eine neue Aufgabe und richten Sie sie nach Ihren Wünschen ein. So haben wir die MailChimp-Abonnementaufgabe eingerichtet.

3. Das Frontend

Um an unserem Frontend zu arbeiten, müssen wir das Stamplay-CLI-Tool verwenden.

3.1 Installieren Sie die Stamplay-CLI

Mit diesem Tool können wir mit unseren Stamplay-Anwendungen arbeiten. Es erlaubt uns:

Anwendungen bereitstellen
Starten Sie einen lokalen Server für die Entwicklung
ein Stamplay-Projekt initialisieren
Versionen zurücksetzen
Laden Sie die neueste Version herunter

$ npm install -g stamplay-cli

Erstellen wir einen neuen Ordner und initialisieren Sie unsere Stamplay-Anwendung mit diesem Ordner.

$ mkdir tutsplus && cd tutsplus $ stamplay init

Sie werden aufgefordert, Ihr einzugeben appId (Name Ihrer App) und Ihre API-Schlüssel. In diesem Fall sind sie tutsplus und 4 **** 0 beziehungsweise.

Dadurch wird eine stamplay.json-Datei im Stammverzeichnis Ihrer App erstellt, damit Stamplay bei der Bereitstellung Ihre Anmeldeinformationen kennt.

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

3.2 Aufbau des Frontends

Um mit einem guten Design zu starten, haben wir mit einer der vielen kostenlosen HTML5-Vorlagen von Templated.co begonnen. Die, die wir verwendet haben, heißt Retrospect.

Laden wir es herunter und entpacken Sie es in unseren Projektordner. Dann lassen Sie uns hier einige zusätzliche Bibliotheken mit Bower installieren. Führen Sie den folgenden Befehl aus und wir sind bereit zu gehen:

$ bower install Winkel-Ui-Router Winkel-Stamplay Stamplay-SDK Winkel-Route --save

Um Stamplay mit Angular verwenden zu können, müssen wir:

Laden Sie das Stamplay-SDK
Konfigurieren Sie die Stamplay-Anwendung
Last Angular
Laden Sie den Angular UI Router
Laden Sie die Angular-Stamplay-Bibliothek (nur ein Service-Wrapper für das SDK).

Hier sind die Zeilen, die dazu benötigt werden. Wir fügen sie unter dem hinzu Tag unserer index.html-Datei:

 …  …  … .

Stellen Sie sicher, dass Sie Ihre eigene eingegeben haben AppId in die Stamplay.init-Funktion. Wir können jetzt unseren lokalen Server starten, um sicherzustellen, dass alles korrekt geladen wird. Führen Sie folgendes aus:

stamplay start

Sie werden sehen, dass Ihre Anwendung unter http: // localhost: 8080 einsatzbereit ist.

3.3 Die Winkelanwendung

Wir werden einige Dateien für unsere Angular-Anwendung erstellen:

Die beiden Servicedateien verwenden das Stamplay-SDK und die Winkel-Stamplay-Bibliotheken, um unsere Anwendung bei der Interaktion mit unseren Stamplay-Daten zu unterstützen.

Das wichtigste ist userService.js. Es hat einige Funktionen und hilft uns, Daten zu erfassen oder Daten zu erstellen. Weitere Informationen zu den Möglichkeiten des Stamplay-SDK finden Sie in der Dokumentation.

UserService.js nutzt das Stamplay JS SDK, um unserer Angular-App die folgenden Funktionen bereitzustellen:

Anmeldung
Ausloggen
isLogged
saveAddress
getUserModel
createCard
abonnieren
Abmelden

/assets/js/services/userService.js

/ * global angle, Stripe, Konsole * / 'use strict'; angle .module ('tutsplus.service') .factory ('userService', ['$ q', '$ stamplay'), Funktion ($ q, $ stamplay) var user = $ stamplay.User (). model; return login: function () return user.login ('facebook');, logout: function () return user.logout ();, isLogged: function () return user.isLogged ();, saveAddress : function (Adresse, Ort, Postleitzahl) // Adressdaten des Benutzers speichern, getUserModel: function () // Benutzerinformationen abrufen, createCard: function (cardObj) // Kreditkartendaten sammeln und über Stripe speichern , subscribe: function (planId) // Subscribe user, Abbestellen: function (planId) // Benutzerabonnement kündigen;)]);

Unsere Anwendung wird drei Seiten haben:

home.html, die Haupt-Landing-Page, auf der sich der Benutzer anmelden kann
subscriptions.html, wo Benutzer die für ein Abonnement verfügbaren Boxen anzeigen können
profile.html, wo Benutzer ihre Informationen bearbeiten und ein Abonnement kündigen können

Diese Seiten werden von drei Controllern verwaltet (wie von Best Practices vorgeschlagen), nämlich homeCtrl.js, subscriptionCtrl.js und profileCtrl.js.

Seitenvorlagen und Controller sind durch die Haupt-App Angular miteinander verbunden.

Hier ist die Grundlage unserer app.js:

/ * global angle * / 'use strict'; angle.module ('tutsplus', ['tutsplus.service', 'ngRoute', 'ui.router', 'ngStamplay']); angle .module ('tutsplus') .config (Funktion ($ 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 '); ) / * * Speichern Sie den protokollierten Benutzer, falls vorhanden, im rootScope * / .run (['$ rootScope', 'userService', Funktion ($ rootScope, userService) userService.getUserModel () .then (functionResresp)  $ rootScope.user = userResp;);]);

Jetzt müssen wir nur noch unsere neuen Dateien in index.html unterhalb der zuvor hinzugefügten Bibliotheken laden.

/index.html

… Kopf der Datei index.html…

3.4 Front-End-Authentifizierung

Wir haben unsere Facebook-Anwendung schon früher verkabelt, und jetzt müssen wir unseren Nutzern eine Möglichkeit bieten, sie zu nutzen! Die gesamte Authentifizierung wird von Stamplay durchgeführt. Wir brauchen nichts zu programmieren; Wir müssen nur unsere Benutzer mit dem Authentifizierungspfad verknüpfen, den Stamplay für uns bereitgestellt hat.

Der Authentifizierungsprozess sieht folgendermaßen aus:

Verknüpfen Sie Benutzer mit unserer Authentifizierungs-URL.
Die Authentifizierung erfolgt auf Facebook.
Facebook sendet einen Benutzer mit einem Token an unsere Anwendung zurück.
Stamplay speichert das Token und der Benutzer wird authentifiziert.

Wir müssen nur den ersten dieser Schritte manuell konfigurieren. Wenden wir unsere Angular App mit an ng-app und ng-Controller zu index.html und fügen Sie einige Angular-Direktiven hinzu, um die Startseite mit unserer homeCtrl.js zu verbinden. Wir werden auch alles zwischen dem entfernen

und das

der ursprünglichen Vorlage und ersetzen Sie es mit einem Tag-Element.

Dieses Element zeigt den Inhalt der aktuellen Seite dynamisch an.

/index.html

… Kopf der Datei index.html…    Stamplay erschüttert
 Speisekarte     Zuhause
 Mein Profil
 Neues Abonnement
 Ausloggen
 
 
 
 … Ende der Datei index.html…

Beim Start der Anwendung überprüft der Router die URL und lädt die entsprechende Ansicht. Im ersten

von home.html können wir leicht alle Angular-Anweisungen erkennen, die mit den Funktionen von homeCtrl.js gekoppelt sind.

/pages/home.html

  Willkommen home.user.instance.displayName
 Die besten Cocktails, die du je gemacht hast
 Premium-Zutaten und Rezepte werden jeden Monat an Ihre Tür geliefert.
   Mitglied werden 
  Neues Abo 

  Zeigen Sie Ihre Abonnements an

/assets/js/controllers/homeCtrl.js

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

Wenn ein Benutzer nun auf die Schaltfläche "Mitglied werden" klickt, wird er aufgefordert, sich mit seinem Facebook-Konto anzumelden. Wir mussten die Bereitstellung durchführen, da die Authentifizierung von localhost: 8080 nicht funktioniert. Facebook möchte einen Benutzer wieder vollständig qualifiziert machen Domain.

Stellen Sie an dieser Stelle Ihre Anwendung erneut bereit mit:

$ stamplay bereitstellen

Nachdem sich ein Benutzer erfolgreich angemeldet hat, möchten wir, dass er einen unserer Pläne abonnieren kann.

3.5 Erstellen von Streifenkunden

Kunden sind der andere Hauptbestandteil von Abonnements. Im weitesten Sinne ist ein Kunde nur eine generische Methode, um Ihre eigenen Benutzer Ihrem Stripe-Konto zuzuordnen. In der Regel möchten Sie einige Metadaten (z. B. eine E-Mail-Adresse) einem Kunden zuordnen. Kundenobjekte können auch eine Kreditkarte speichern, so werden sie später in Rechnung gestellt.

Das Erstellen eines neuen Kunden über die API ist einfach, da das Stamplay JS SDK bereits die erforderliche Unterstützung bietet. Unsere App ordnet einen eigenen Stripe-Kunden direkt nach der Anmeldung oder dem Login zu. Dies wird über userService.js im verwaltet getUserModel Funktion.

/assets/js/services/userService.js

… Head von userService.js… getUserModel: function () var def = $ q.defer (); user.currentUser () .then (function () // einen Stripe-Kunden erstellen, wenn nicht vorhanden ist 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 (user););) else def.resolve (user); else def.resolve (user)) .catch (function (err) def.reject (err);); return def.promise;,… end von userService.js…

Der obige Code überprüft, ob der Benutzer angemeldet ist oder nicht und ob er bereits über ein Kennwort verfügt stripeCustomerId Eigentum. Wenn nicht, wird ein Stripe-Kunde mit erstellt $ stamplay.Stripe (). createCustomer (user.get ('id')) und speichert die stripeCustomerId als zusätzliche Eigenschaft des protokollierten Benutzers.

Dieses Steuerelement wird jedes Mal ausgelöst, wenn die App vom Modul app.js Angular gestartet wird.

/assets/js/modules/app.js

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

3.6 Einen Plan abonnieren

Jetzt müssen wir unseren Benutzern endlich eine Gebühr berechnen, wenn sie einen Plan kaufen. Die Vorlage subscriptions.html, die an die Controller-SubscriptionCtrl.js gebunden ist, zeigt unseren Benutzern die Abonnementpläne an, aus denen sie auswählen können.

Wenn der Benutzer eines der Abonnements auswählt, wird das Zahlungsformular angezeigt, in dem der Benutzer seinen Kauf abschließen kann. Die Abonnementseite listet die Artikel ganz oben auf und enthält zwei weitere Abschnitte (die Bereiche "Zahlung" und "Danke"), die beide ausgeblendet sind.

/pages/subscription.html

    Schließen Sie sich Ihrem Geist an
     Gott schütze die Königin
 Entdecken Sie jeden Monat einen neuen Gin-Cocktail.
  Abonnieren 
 
 
 
   
… 
    Zahlungsinformationen
      persönliche Daten
 
   
   
   
  Karteninfo
 
   
   
   
   
  Abonnement
 
   
  Lieferdetails
 
   
   
   
   Als Standardadresse speichern 
 
 
  
 
 
 
 
…

Um die Informationen zu dem ausgewählten Abonnement zu übergeben, verwenden wir eine aufgerufene Funktion openSubscribe ('planName') von abonnementCtrl.js.

/assets/js/controllers/subscriptionCtrl.js

subModel.openSubscribe = function (planId) subModel.showPayment = true; subModel.showThankyou = false; subModel.selectedPlanName = SubModel.selectedPlanMap [planId]; subModel.selectedPlanId = planId; // Zu Zahlung blättern $ timeout (function () $ location.hash ('payment-form'); $ anchorScroll ();); ;

Diese Funktion macht das Zahlungsformular sichtbar, das zusammen mit den Benutzerdaten und dem ausgewählten Plan angezeigt wird.

Dieses Formular erfasst die Informationen des Benutzers, das ausgewählte Abonnement und die Kreditkartenwerte.

Um Kreditkartenwerte zu erfassen, müssen wir den JavaScript-Client von Stripe hinzufügen, um ein Token für die Karte zu erhalten. Anschließend verwenden wir die Stripe-Funktion von Stamplay, um den Plan abzuschließen. Lassen Sie uns in unserer index.html die Bibliothek Stripe.js importieren und mit unserem Testschlüssel initialisieren.

/index.html

…         …

Schließlich kann das Abonnement bearbeitet werden. Wann Bestätige Abonnement Wenn Sie auf klicken, startet unsere abonnementCtrl.js den Subskriptionsprozess und nutzt 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 ) userService.subscribe (subModel.selectedPlanId);) .then (function () subModel.showPayment = false; subModel.showThankyou = true; $ ($ event.currentTarget) .removeProp ('disabled');) ) $ ($ event.currentTarget) .removeProp ('disabled');); ;…

Lassen Sie uns vor dem Speichern der Kreditkarte den Benutzer mit seinen Adressinformationen aktualisieren. Wir werden später sehen, warum dies in dieser Phase nützlich ist.

Ein Benutzer kann nur an eine Kreditkarte gebunden sein. Deshalb ist das createCard Funktion prüft, ob der Benutzer bereits eine hat $ stripe.getCreditCard (user.get ('id')). Wenn keine Karte vorhanden ist, fügen wir die Karte hinzu.

Bevor Sie die Karte an den Benutzer binden, müssen Sie die clientseitige JavaScript-Bibliothek von Stripe hinzufügen, um die Kreditkartenwerte sicher in ein Token zu konvertieren. Sobald wir das Token haben, können wir es an das Stamplay JS SDK übergeben und die Karte an den Benutzer binden $ 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 (Funktion (Antwort) var nDef = $ q.defer (); if (response.card_id) nDef.resolve (); else Stripe.) card.createToken (cardObj, Funktion (err, response) var token = response.id; $ stamplay.Stripe (). createCreditCard (user.get ('id'), token) .then (function (response) nDef. lösen (Antwort);) .catch (Funktion (err) nDef.reject (new Error (err)););); return nDef.promise;) .then (function () def.resolve.) ();) .catch (function (err) console.log (err);); Rückkehr def.promise; …

Um die Stripe-Implementierung zu testen, haben wir die Kreditkarteninformationen mit den folgenden Testwerten gefüllt. Informationen zum Testen in Stripe finden Sie in der Dokumentation.

Nr.4242 4242 4242 4242
Datum: 07/2020
CVC: 424

Der Abonnementablauf wird dann durch Aufrufen der Abonnentenfunktion userService.js fortgesetzt. Damit ist der Vorgang abgeschlossen, indem die Abonnementanforderung an Stripe gesendet wird.

/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'));). dann (Funktion (Antwort) user.set ('subscriptions', response.data); var saveUser = $ stamplay.User (). Modell; 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);); Rückkehr def.promise;

Die Abonnementfunktion ist einfach. Sobald wir sichergestellt haben, dass der Benutzer existiert und eine Kreditkarte hat, müssen wir nur noch anrufen $ stamplay.Stripe (). createSubscription.

Der letzte Schritt besteht darin, die Abonnements zu verfolgen, indem Sie für jedes neue Abonnement, das wir über die Website verkaufen, Bestellungen erstellen und Benachrichtigungen erhalten. Gehen wir zurück zu Stamplay und stellen Sie einige Aufgaben auf.

4. Final Automation hinzufügen

Wir möchten Abonnementdaten an eine Bestellung binden und umgekehrt. Auf diese Weise können unsere Benutzer ihr Abonnement deaktivieren, wenn sie dies wünschen.

4.1 Wenn ein neues Abonnement übermittelt wird, erstellen Sie eine Bestellung

Wenn ein Abonnement übermittelt wurde, möchten wir eine neue Instanz eines Auftragsobjekts erstellen. Die Bestellung wird den Überblick behalten Abo-ID das wurde gerade von Stripe erstellt, der Benutzeridentifikation, der Plan und die Adresse.

Wenn eine Aufgabe von einem angemeldeten Benutzer ausgelöst wird, können wir ihre Eigenschaften verwenden, um die folgende Aktion auszuführen. Aus diesem Grund haben wir die Adresse an unsere Benutzer in subscriptionCtrl.js gebunden. Dadurch können wir sie im Auftragsobjekt speichern, auch wenn die Daten des Abonnement-Auslösers diese Informationen nicht bereitstellen. So können Sie sehen, dass die Adresseneigenschaft der Bestellung mit vom Benutzer abgerufenen Daten gefüllt wird, z. user.address.city.

4.2 Wenn eine neue Bestellung aufgegeben wird, binden Sie sie mit dem zugehörigen Abonnement

Um einen Bezug der Bestellung auch im Abonnement auf Stripe zu haben, können wir das Abonnement aktualisieren Metadaten Feld wie folgt. Zuerst wählen wir den passenden Auslöser und die Aktion aus Objekte und Streifen Komponente.

Da wir unsere Bestellung unter der Abonnement-ID gespeichert haben, können wir die Abonnements von Stripe jetzt nach ID bearbeiten.

4.3 Benachrichtigen Sie bei einer neuen Bestellung den Benutzer und den App-Administrator mit einer E-Mail

Fazit

In diesem Lernprogramm wurde beschrieben, wie Sie mit Stamplay eine Webanwendung erstellen können. Wir haben die Social-Sign-In-Funktionalität implementiert und den Benutzer erfolgreich gegen die Stamplay-Datenbank authentifiziert. Wir haben RESTful-APIs zur Verwaltung von Bestellungen erstellt. Wir konnten unsere App mit den MailChimp- und Stripe-APIs verbinden und sie mit einigen Back-End-Automatisierungen zusammenfügen.

Coupon<

Code