如何使用Stamplay构建订阅框

最新推荐文章于 2024-11-05 15:32:33 发布

cunjie3951

最新推荐文章于 2024-11-05 15:32:33 发布

阅读量479

点赞数

文章标签： python java vue 大数据 web ViewUI

如今，订阅盒已成为越来越受欢迎的业务。从美容产品到健康零食，儿童游戏甚至冰淇淋，您都能找到它们的所有产品。在本教程中，我将向您展示如何快速构建一个Web应用程序以测试是否可以为您的订阅框创意找到前1,000个客户！

我们的应用受鸡尾酒订阅服务Shaken的启发，并包含以下功能：

通过Facebook注册用户。
通过Stripe激活定期付款。
暂停并重新激活订阅。
发送交易电子邮件。
将用户添加到MailChimp列表。

本教程将向您展示如何配置功能齐全的后端以及如何构建与之连接的AngularJS前端。

前端的完整代码库可在GitHub上找到。

优惠券 ：Stamplay已为Tuts +读者提供了独家优惠券，可 免费提供 6个月的plus计划 （价值$ 600）。 优惠券代码为 CODETUTSPLUS ，有效期至10月10日。现在免费注册即可兑换。

1. Stamplay：面向开发人员的API Lego

Stamplay是一个基于Web的开发平台，为开发人员提供了一种构建完全集成的应用程序的快速方法。 Stamplay解决了与许多不同的API进行通信的麻烦，因此您不必这样做。

Stamplay围绕组件的概念构建；组件是我们应用程序的基础。我们可以在“ 任务”>“组件”下看到可用的各种工具。

登录后，您将获得一个简单而优雅的仪表板。我们将在这里创建一个应用程序。随便命名，但请记住该名称是我们用来识别应用程序的名称。托管时，这也将用作我们应用程序的URL。

在本例中，我们使用的是“ tutsplus”，我们的应用程序将托管在https://tutsplus.stamplayapp.com上。

现在让我们开始配置后端。

1.1配置后端：集成Facebook注册

此应用程序将具有Facebook登录名。我们将能够与Facebook API进行交互并处理登录和注册，而无需任何代码。因为我们希望我们的用户注册Facebook，所以我们需要转到Facebook开发者页面并创建一个新的开发者应用。

选择网站，一旦您创建了应用程序，我们就可以从Facebook上获取与Stamplay集成所需的两件事：

应用程式编号
应用秘密

可以在“设置”>“基本”下找到这两件事。

现在我们有了我们的App ID和App Secret，我们可以将它们插入Stamplay中。

回到Stamplay并从主菜单中选择用户，然后选择身份验证 。添加Facebook作为注册服务，复制并粘贴App ID和App Secret，然后单击Save 。

您现在可以通过Facebook注册用户！

现在我们已经连接了Facebook凭据，Stamplay提供了一个方便的API URL来处理使用Facebook登录的情况。让我们现在去那里，看看我们的Facebook登录正在起作用。

转到https://tutsplus.stamplayapp.com/auth/v1/facebook/connect 。

和繁荣！您的Facebook登录已启动并正在运行。

1.2配置后端：使用对象管理数据

并非所有组件都可以处理所有内容，因此Stamplay为我们提供了一种处理自定义数据的简便方法。将此视为您的应用程序的后端数据库接口。

订单将使用名为orders的对象进行跟踪。它具有以下五个属性：

active（boolean）//跟踪订阅是否处于活动状态
地址（plain_object）//用户的地址信息
plan（string）//用户订阅的计划
stripbubscription（string）// Stripe生成的订阅ID
用户（user_id）//我们用户的唯一_id

创建对象后，Stamplay将立即公开RESTful API。端点将如下所示： https : //APPID.stamplayapp.com/api/cobject/v1/orders 。

1.3配置条带

我们需要定期向我们的客户收费，值得庆幸的是，使用Stripe可以轻松做到这一点！其定期付款处理在计划概念内实现。条带计划是代表您的订阅费用和计费周期的对象。

要进行设置，您需要在Stripe控制台>计划中创建计划：

完成后，回到Stamplay并在Task> Components中连接Stripe 组件。选择“ 条带化” 模块，然后单击“ 连接”按钮。

现在，Stripe帐户将链接到Stamplay应用，该应用可以代表我们执行API请求。

在成功连接Stripe之后，您将看到一个类似这样的视图。

1.4配置MailChimp

要配置MailChimp，过程非常相似。像以前使用Stripe一样简单地连接您的MailChimp帐户，您将看到如下页面：

2.通过任务添加自动化

这是我们应用程序的服务器端部分，其中发生了很多神奇的事情！假设我们要做几件事：

当用户注册Facebook时，通过电子邮件发送“欢迎”消息。
注册时将用户添加到MailChimp列表中。

这两件事通常需要大量代码，但对于Stamplay而言则不需要。

2.1欢迎电子邮件

向导将引导您完成任务的配置。在“ 任务”>“管理”下 ，创建一个新任务并按照所需方式进行设置。这是我们设置欢迎电子邮件任务的方式：

然后，您可以利用触发器（在此情况下为用户）中的变量来配置操作。我们是这样配置的：

2.2将用户推送到MailChimp列表

将用户的电子邮件发送到MailChimp上的邮件列表很简单。

在“ 任务”>“管理”下 ，创建一个新任务并按照所需方式进行设置。这是我们设置MailChimp订阅任务的方式。

3.前端

要开始在前端工作，我们需要使用Stamplay CLI工具。

3.1安装Stamplay CLI

此工具将使我们能够使用Stamplay应用程序。它使我们能够：

部署应用
启动本地服务器进行开发
初始化Stamplay项目
回滚版本
下载最新版本

$ npm install -g stamplay-cli

让我们创建一个新文件夹，然后将Stamplay应用程序初始化到该文件夹。

$ mkdir tutsplus && cd tutsplus

$ stamplay init

系统将提示您输入appId （应用程序名称）和apiKey 。在这种情况下，它们分别是tutsplus和4****0 。

这将在应用程序的根目录中创建一个stamplay.json文件，以便在部署时，Stamplay将知道您的凭据。

{

  "appId": "tutsplus",

  "apiKey": "4e****0",

  "public": "./",

  "ignore": [

    "stamplay.json",

    "**/.*",

    "**/node_modules/**"

  ]

}

3.2构建前端

为了以良好的设计运行，我们从Templated.co提供支持的许多酷炫的免费HTML5模板之一开始。我们使用的一种称为Retrospect 。

让我们下载它并将其解压缩到我们的项目文件夹中。然后，让我们使用Bower在此处安装一些其他库。运行以下命令，我们将很高兴：

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

为了在Angular中使用Stamplay，我们需要：

加载Stamplay SDK
配置Stamplay应用程序
加载角度
加载Angular UI Router
加载Angular-Stamplay库（仅是SDK的服务包装器）

这是完成所有操作所需的行。我们将它们添加到index.html文件的</footer>标签下面：

<html>

    <head>  ...	</head>

	<body class="landing">

	...



	<footer id="footer">

		<div class="inner">

			….

		</div>

	</footer>

	<!-- Scripts -->

	<script src="assets/js/jquery.min.js"></script>

<script src="assets/js/skel.min.js"></script>

	<script src="assets/js/util.js"></script>			

	<script src="assets/js/main.js"></script>



      <script src="/bower_components/stamplay-sdk/dist/stamplay.min.js"></script>

<script type="text/javascript">

      		Stamplay.init('subscribeboxdemo');

      </script>

      <script src="/bower_components/angular/angular.min.js"></script>

      <script src="/bower_components/angular-route/angular-route.min.js"></script>

      <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>      

      <script src="/bower_components/angular-stamplay/angular-stamplay.js"></script>

      

	</body>

</html>

确保已在Stamplay.init函数中键入自己的AppId 。现在，我们可以启动本地服务器，以确保所有内容均正确加载。运行以下命令：

stamplay start

您将看到您的应用程序已准备就绪，可以访问http：// localhost：8080 。

3.3角度应用

我们将为Angular应用程序创建一些文件：

这两个服务文件将使用Stamplay SDK和angular-stamplay库来帮助我们的应用程序与Stamplay数据进行交互。

最重要的是userService.js。它具有一些功能，可以帮助我们获取数据或创建数据。要更深入地了解Stamplay SDK的功能，请务必查看文档。

UserService.js利用Stamplay JS SDK向我们的Angular应用程序提供以下功能：

登录
登出
isLogged
saveAddress
getUserModel
createCard
订阅
退订

/assets/js/services/userService.js

/*global angular, Stripe, console*/

'use strict';



angular

  .module('tutsplus.service')

  .factory('userService', ['$q', '$stamplay',

    function ($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 (address, city, zipcode) {

		// Save user’s address information 

	},

	getUserModel: function () {

	// Get User informations

},

	createCard: function (cardObj) {

		// Collect Credit card information and store it via Stripe

	},

	subscribe: function (planId) {

		// Subscribe user

	},

	unsubscribe: function (planId) {

		// Cancel user subscription

	}

     };

   }]);

我们的应用程序将包含三个页面：

home.html，用户可以在其上登录的主要登录页面
subscriptions.html，用户可以在其中查看可用于订阅的框
profile.html，用户可以在其中编辑其信息并取消订阅

这些页面由三个控制器（如最佳实践建议）管理，分别是homeCtrl.js，subscriptionCtrl.js和profileCtrl.js。

页面模板和控制器通过主要的Angular应用绑定在一起。

这是我们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'

		});

})

/* 

 * Save logged user, if present, in the rootScope

 */

.run(['$rootScope', 'userService',

	function ($rootScope, userService) {

		userService.getUserModel()

			.then(function (userResp) {

				$rootScope.user = userResp;

			});

	}

]);

现在，我们只需要在前面添加的库下面的index.html中加载新文件。

/index.html

...head of the index.html file..

  <script src="/bower_components/angular/angular.min.js"></script>

  <script src="/bower_components/angular-route/angular-route.min.js"></script>

  <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>

  <script src="/bower_components/angular-stamplay/angular-stamplay.js"></script>



  <script src="/assets/js/services/main.js"></script>

  <script src="/assets/js/services/userService.js"></script>

  <script src="/assets/js/modules/app.js"></script>



  <script src="/assets/js/controllers/homeCtrl.js"></script>

  <script src="/assets/js/controllers/subscriptionCtrl.js"></script>

  <script src="/assets/js/controllers/profileCtrl.js"></script>

</body>

</html>

3.4前端身份验证

我们较早地连接了Facebook应用程序，现在我们需要为我们的用户提供使用它的方式！所有身份验证均由Stamplay处理。我们不需要编写任何代码；我们只需要将用户链接到Stamplay为我们提供的身份验证路径即可。

身份验证过程如下所示：

将用户链接到我们的身份验证URL。
身份验证在Facebook上进行。
Facebook使用令牌将用户发送回我们的应用程序。
Stamplay处理该令牌的存储，并且我们的用户已通过身份验证。

我们只需要手动配置这些步骤中的第一步。让我们将带有ng-app和ng-controller Angular应用ng-app应用于index.html，并添加一些Angular指令以将主页与我们的homeCtrl.js连接起来。我们还将删除原始模板的<nav>和<footer>之间的所有内容，并将其替换为<div ui-view></div>标记元素。

该元素将动态显示当前页面的内容。

/index.html

...head of the index.html file..

<body class="landing" ng-app="tutsplus">

<!-- Header -->

<header id="header" class="alt">

    <h1><a href="index.html">Stamplay Shaken</a></h1>

	 <a href="#nav">Menu</a> 

</header>

<!-- Nav -->

<nav id="nav" ng-controller="homeCtrl as home">

	<ul class="links">

		<li><a ui-sref="home">Home</a></li>

		<li><a ng-show="home.isLogged" ui-sref="profile">My Profile</a></li>

		<li><a ui-sref="subscriptions">New Subscription</a></li>

		<li><a ng-show="home.isLogged" href ng-click="home.logout()">Logout</a></li>

</ul>

</nav>



<div ui-view></div>



<footer>

   ...end of the index.html file..

当应用程序启动时，路由器将检查URL并加载适当的视图。在home.html的第一个<section>内部，我们可以轻松地发现与homeCtrl.js函数配对的所有Angular指令。

/pages/home.html

<section id="banner">

    <i class="icon fa-glass"></i>

	<h3 ng-show="home.isLogged">Welcome {{ home.user.instance.displayName }}</h3>

	<h2>The best cocktails you've ever made</h2>

	<p>Premium ingredients and recipes, delivered to your door each month.</p>

	<ul class="actions">

		<li><a class="button big special" 

		ng-show="!home.isLogged"

		ng-click="home.signUp()">

		Become a member

		</a></li>

		<li><a class="button big special"

		ng-show="home.isLogged"

		ui-sref="subscriptions">

		New subscription

		</a></li><br>

		<li><a class="button big special" 

		ng-show="home.isLogged"

		ui-sref="profile">

		View your subscriptions

		</a></li>			

	</ul>

</section>

/assets/js/controllers/homeCtrl.js

/*global angular*/

'use strict';



angular

    .module('tutsplus')

	.controller('homeCtrl', ['$rootScope', 'userService',

		function ($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();

			};

		}

	]);

现在，如果用户单击“成为会员”按钮，将要求他们使用其Facebook帐户登录。我们必须进行部署，因为无法从localhost：8080进行身份验证。Facebook希望将用户恢复为完全合格域。

此时，使用以下命令再次部署您的应用程序：

$ stamplay deploy

用户成功登录后，我们希望他们能够订阅我们的计划之一。

3.5创建条纹客户

客户是订阅的另一个主要组成部分。从广义上讲，客户只是将您自己的用户与您的Stripe帐户关联的一种通用方法。通常，您需要将一些元数据（例如电子邮件地址）与客户相关联。客户对象还可以存储信用卡，这将在以后收取费用。

通过StampAPI轻松创建新客户，因为Stamplay JS SDK已经提供了所有必需的支持。我们的应用程序在注册或登录后立即将Stripe客户与我们自己的用户相关联-这是通过getUserModel函数中的userService.js进行管理的。

/assets/js/services/userService.js

.. head of userService.js ...

getUserModel: function () {

  var def = $q.defer();

  user.currentUser()

  .then(function () {

    //create a stripe customer if doesn't exist

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;},

.. tail of userService.js ...

上面的代码验证用户是否已登录以及他们是否已经具有stripeCustomerId属性。如果不是，它会创建一个带区客户提供$stamplay.Stripe().createCustomer(user.get('id'))和存储stripeCustomerId以登录用户的附加属性。

每当app.js Angular模块启动应用程序时，都会触发此控件。

/assets/js/modules/app.js

.run(['$rootScope', 'userService',

function ($rootScope, userService) {

    	userService.getUserModel()

		.then(function (userResp) {

			$rootScope.user = userResp;

		});

	}

])

3.6订阅计划

现在，我们需要在用户购买计划时最终向他们收费。与控制器subscriptionCtrl.js绑定的模板subscriptions.html，向我们的用户显示他们可以选择的订阅计划。

当用户选择订阅之一时，将显示付款表格，使用户可以完成购买。订阅页面在最顶部列出了文章，还包含另外两个部分（付款和感谢部分），两个部分都被隐藏。

/pages/subscription.html

<!-- articles section starts -->

<section id="three" class="wrapper style3 special">

  <div class="inner">

    <header class="major narrow    ">

	<h2>Join your spirit way</h2>

	</header>

	  <article class="feature left">

	  <span class="image"><img src="images/gin.jpg" alt=""/></span>

	    <div class="content">

		<h3>God save the queen</h3>

		<p>Discover a new gin cocktail each month.</p>

		<ul class="actions">

		  <li ng-show="sub.isLogged"><a href class="button special" ng-click="sub.openSubscribe('tplanOne')">Subscribe</a>

		  </li>

		</ul>					

           </div>

         </article>

<article class="feature right">

		<!-- second article here -->

	</article>

	…

</section>



<section id="payment-form" class="wrapper style2 special" ng-show="sub.showPayment">

  <div class="inner">

  <header class="major narrow">

    <h2>Payment information</h2>

  </header>

  <form>

    <div class="container 50%">

	<div class="row uniform 50%">

	<div class="12u$">

		<h3>Personal data</h3>

</div>

	<div class="6u 12u$(xsmall)">

	  <input name="firstname" placeholder="First name" type="text" value="{{sub.user.get('name').givenName}}"/>

	</div>

	<div class="6u$ 12u$(xsmall)">

	  <input name="familyname" placeholder="Family Name" type="text" value="{{sub.user.get('name').familyName}}"/>

	</div>

	<div class="12u$">

	 <input name="email" placeholder="Email" type="text" value="{{sub.user.get('email')}}"/>

	</div>		

	<div class="12u$">

	<h3>Card info</h3>

	</div>

	<div class="12u">

	  <input name="cardnumber" placeholder="Card number" type="text"

value="{{sub.card.number}}"/>

	</div>

	<div class="4u">

	  <input name="expiremonth" placeholder="Expire month" type="text" value="{{sub.card.expM}}"/>

	</div>						

<div class="4u">

	  <input name="expireyear" placeholder="Expire year" type="text"

value="{{sub.card.expY}}"/>

	</div>						

	<div class="4u">

  	  <input name="cvc" placeholder="CVC" type="text" value="{{sub.card.cvc}}"/>

	</div>

	<div class="12u$">

	  <h3>Subscription</h3>

	</div>

	<div class="12u">

 	  <select ng-model="sub.selectedPlanId">

	    <option value="tplanOne">God save the queen</option>

	    <option value="tplanTwo">From kentucky with love</option>

	    <option value="tplanThree">The rum diary</option>

	  </select>

	</div>

	<div class="12u$">

 	  <h3>Delivery details</h3>

	</div>

	<div class="12u">

	  <input name="address" placeholder="Address" type="text" ng-model="sub.address.address" />

	</div>

	<div class="6u">

  <input name="city" placeholder="City" type="text" ng-model="sub.address.city"/>

	</div>						

	<div class="6u">

	  <input name="zipcode" placeholder="Post Code" type="text" ng-model="sub.address.zipcode"/>

	</div>

	<div class="12u$" style="text-align:left">

	  <input name="defaultadress" type="checkbox" ng-model="sub.saveAddress">

	  <label ng-click="sub.saveAddress = !sub.saveAddress">Save as default address</label>

	</div>											    </div>

</div>



<ul class="actions">

 <li><input type="submit" class="special" value="Confirm subscription" ng-click="sub.subscribe($event)"/></li>

</ul>

</form>

</div>

</section>

...

为了传递与所选订阅有关的信息，我们将使用subscriptionCtrl.js中的称为openSubscribe('planName')的函数。

/assets/js/controllers/subscriptionCtrl.js

subModel.openSubscribe = function (planId) {

            subModel.showPayment = true;

            subModel.showThankyou = false;

            subModel.selectedPlanName = subModel.selectedPlanMap[planId];

            subModel.selectedPlanId = planId;

        //Scroll to payment

        $timeout(function () {

            $location.hash('payment-form');

            $anchorScroll();

        });

};

此功能使付款表单可见，并将与用户数据和所选计划一起显示。

该表格收集用户的信息，选定的订阅和信用卡值。

要收集信用卡值，我们需要添加StripeJavaScript客户端以获取卡的令牌，然后使用Stamplay的Stripe函数完成计划。在我们的index.html中，让我们导入Stripe.js库，并使用我们的测试密钥对其进行初始化。

/index.html

...

      <script src="/bower_components/angular/angular.min.js"></script>

      <script src="/bower_components/angular-route/angular-route.min.js"></script>

      <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>

      <script src="/bower_components/angular-stamplay/angular-stamplay.js"></script>



      <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

      <script type="text/javascript">

          Stripe.setPublishableKey('pk_test_**********************0');

      </script>



      <script src="/assets/js/services/main.js"></script>

      <script src="/assets/js/services/userService.js"></script>

      <script src="/assets/js/modules/app.js"></script>

...

最后，可以处理订阅。单击“ 确认订阅”后 ，我们的subscriptionCtrl.js将利用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');	

	});

};

…

在保存信用卡之前，让我们用其地址信息更新用户。稍后我们将看到为什么这在现阶段有用。

一个用户只能绑定一张信用卡。这就是createCard函数检查用户是否已经拥有$stripe.getCreditCard(user.get('id')) 。如果没有卡，我们将继续添加卡。

在将卡绑定到用户之前，我们需要添加Stripe客户端JavaScript库，以将信用卡值安全地转换为令牌。获得令牌后，我们可以将其传递给Stamplay JS SDK并将该卡绑定到用户$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;

   }

…

为了测试Stripe的实现，我们在信用卡信息中预填了以下测试值。有关在Stripe中进行测试的信息，请查阅文档。

n.4242 4242 4242 4242
日期：07/2020
cvc：424

然后，通过调用userService.js订阅函数继续订阅流程。通过将订阅请求提交给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;

        }

订阅功能很简单。一旦确保用户存在并拥有信用卡，我们只需要调用$stamplay.Stripe().createSubscription 。

最后一步是通过创建订单并接收我们通过网站出售的每个新订阅的通知来跟踪订阅。让我们回到Stamplay并设置一些任务。

4.添加最终自动化

我们希望将订阅数据绑定到订单，反之亦然。这将使我们的用户可以选择停用其订阅。

4.1提交新订阅时，创建订单

提交订阅后，我们要创建订单对象的新实例。该订单将跟踪由Stripe刚创建的subscriptionId ， userId ，计划和地址。

当登录用户触发任务时，我们可以使用其任何属性来提供后续操作。这就是为什么我们在subscriptionCtrl.js中将地址绑定到我们的用户。这样，即使订阅触发器的数据不提供此信息，我们也可以将它们存储在订单对象中。因此，您可以看到订单的address属性填充了从用户获取的数据，例如{{user.address.city}} 。

4.2下达新订单时，将其与相关订阅绑定

要在Stripe上的订阅中也有订单的引用，我们可以如下更新订阅的Metadata字段。首先，让我们从“ 对象和条纹”组件中选择适当的触发器和操作。

由于我们将订单保存到订购ID，因此现在可以按ID编辑Stripe的订购。

4.3下达新订单时，请同时通过电子邮件通知用户和应用程序管理员

结论

在本教程中，我们回顾了如何开始使用Stamplay创建Web应用程序。我们实现了社交登录功能，并根据Stamplay数据库成功验证了用户身份。我们创建了RESTful API来管理订单。我们已经能够将我们的应用程序连接到MailChimp和Stripe API，并通过一些后端自动化将它们粘合在一起。

优惠券 ：Stamplay已为Tuts +读者提供了独家优惠券，可免费提供6个月的plus计划 （价值$ 600）。 优惠券代码为CODETUTSPLUS ，有效期至10月10日。 现在免费注册即可兑换。

上面的教程中的代码可在GitHub上获得。请在下面的评论中告诉我们您的想法。