Cómo construir un cuadro de suscripción con Stamplay

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Las cajas de suscripción son un negocio cada vez más popular en estos días. Puedes encontrarlos para todo, desde productos para el cuidado personal hasta refrigerios saludables, juegos para niños e incluso helados. En este tutorial, te mostraré cómo crear rápidamente una aplicación web para probar si puedes encontrar los primeros 1,000 clientes para tu idea de cuadro de suscripción.

Nuestra aplicación está inspirada en el servicio de suscripción de cóctel Shaken e incluye las siguientes características:

Los usuarios pueden registrarse a través de Facebook.
Activar pagos recurrentes a través de Stripe.
Pausar y reactivar las suscripciones.
Enviar correos electrónicos transaccionales
Agregar usuarios a una lista de MailChimp.

Este tutorial te mostrará cómo configurar un back-end con todas las características y cómo construir el front-end de AngularJS que se conecta a él.

La base de código completa del front-end se puede encontrar en GitHub.

Cupón: Stamplay ha proporcionado a los lectores de Tuts+ un cupón exclusivo para ofrecer 6 meses gratis del plan plus (valor de $600). El código de cupón es CODETUTSPLUS y vence el 10 de octubre. Regístrate ahora gratuitamente para canjearlo.

1. Stamplay: La API Lego para desarrolladores

Stamplay es una plataforma de desarrollo basada en la web que ofrece a los desarrolladores una manera increíblemente rápida de crear aplicaciones completamente integradas. Stamplay maneja el problema de hablar con muchas API diferentes por lo que no es necesario.

Stamplay se construye alrededor del concepto de componentes; componentes son los pilares de nuestra aplicación. Podemos ver las diferentes herramientas a nuestra disposición en tareas > componentes.

Una vez que hayas iniciado sesión, serás recibido con este tablero de instrumentos simple y elegante. Crearemos una aplicación aquí. Llámalo como quieras, pero recuerda que este nombre es el que usaremos para identificar nuestra aplicación. Esto también se usará como la URL de nuestra aplicación cuando está alojada.

En nuestro caso, estamos utilizando "tutsplus", y nuestra aplicación se alojará en https://tutsplus.stamplayapp.com.

Ahora comencemos a configurar el back-end.

1.1 Configurando el Back End: Integrando el Registro de Facebook

Esta aplicación contará con un inicio de sesión de Facebook. Podremos interactuar con la API de Facebook y gestionar el inicio de sesión y el registro, todo ello sin una sola línea de código. Como queremos que nuestros usuarios se registren en Facebook, tendremos que dirigirnos a la página de Desarrolladores de Facebook y crear una nueva aplicación para desarrolladores.

Selecciona el sitio web, y una vez que hayas creado tu aplicación, podremos obtener dos cosas que necesitamos de Facebook para integrar con Stamplay:

ID de aplicación
Secreto de la aplicación

Estas dos cosas se pueden encontrar en Configuración > Básico.

Ahora que tenemos nuestra ID de la aplicación y el secreto de la aplicación, podemos conectarlas a Stamplay.

Vuelve a Stamplay y selecciona Usuarios en el menú principal y luego Autenticación. Agrega Facebook como el servicio de suscripción, copia y pega el ID de la aplicación y el secreto de la aplicación, haz clic en Guardar.

¡Ahora puedes registrar usuarios a través de Facebook!

Ahora que hemos conectado nuestras credenciales de Facebook, Stamplay proporciona una URL de API conveniente para gestionar el inicio de sesión con Facebook. Vayamos allí ahora y veamos nuestro inicio de sesión de Facebook en acción.

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

¡Y listo! Tienes tu nombre de usuario de Facebook en funcionamiento.

1.2 Configurando el Back End: Administrando Datos con Objetos

No todo se puede manejar con componentes, por lo que Stamplay nos proporciona una manera fácil de manejar datos personalizados. Piensa en esto como la interfaz de base de datos de fondo para tu aplicación.

Los pedidos se rastrearán con un objeto llamado orders. Tiene las siguientes cinco propiedades:

active (boolean) // para rastrear si la suscripción está activa o no
address (plain_object) // información de la dirección del usuario
plan (string) // el plan al que el usuario se suscribió
stripesubscription (string) // el ID de suscripción generado por Stripe
usuario (user_id) // el _id único de nuestro usuario

Stamplay expone instantáneamente las API RESTful tan pronto como crea el objeto. El punto final se verá así: https://APPID.stamplayapp.com/api/cobject/v1/orders.

1.3 Configurar Stirpe

Tendremos que facturar a nuestros clientes periódicamente, ¡y afortunadamente esto es fácil de hacer con Stripe! Su procesamiento de pago recurrente se implementa dentro del concepto de Plan. Los planes de franja son objetos que representan el costo y el ciclo de facturación de sus suscripciones.

Para configurarlo, deberás crear tu plan en la consola Stripe > Planes:

Una vez hecho esto, regresa a Stamplay y conecta el componente Stripe en Tarea > Componentes. Selecciona el módulo Stripe y haz clic en el botón Conectar.

Ahora la cuenta de Stripe se vinculará a la aplicación Stamplay, que puede realizar solicitudes de API en nuestro nombre.

Después de una conexión exitosa con Stripe, terminarás en una vista como esta.

1.4 Configurando MailChimp

Para configurar MailChimp, el proceso es bastante similar; simplemente conecta tu cuenta de MailChimp como lo hacías anteriormente con Stripe, y verás una página como esta:

2. Agregar automatización con tareas

Esta es la parte del lado del servidor de nuestra aplicación, ¡donde ocurre la mayor parte de la magia! Envía un mensaje de "Bienvenida" por correo electrónico cuando un usuario se registra en Facebook.

Envía un mensaje de "Bienvenida" por correo electrónico cuando un usuario se registra en Facebook
Agrega usuarios a una lista de MailChimp cuando se registren.

Estas dos cosas normalmente requerirían una buena porción de código, pero no con Stamplay...

2.1 Correo electrónico de bienvenida

Un asistente te guiará a través de la configuración de la tarea. En Tareas > Administrar, crea una nueva tarea y configúrala de la manera que desees. Así es como hemos configurado la tarea de correo electrónico de bienvenida:

Luego puedes configurar la acción aprovechando las variables que salen del desencadenador (en este caso, el usuario). Así es como configuramos el nuestro:

2.2 Enviar los usuarios a una lista de MailChimp

Enviar los correos electrónicos de los usuarios a tu lista de correo en MailChimp es sencillo.

En Tareas > Administrar, crea una nueva tarea y configúrala de la manera que desees. Así es como hemos configurado la tarea de suscripción de MailChimp.

3. El Front End

Para comenzar a trabajar en nuestra interfaz, necesitaremos usar la herramienta Stamplay CLI.

3.1 Instalar la CLI de Stamplay

Esta herramienta nos dará la posibilidad de trabajar con nuestras aplicaciones Stamplay. Nos permite:

Implementar aplicaciones
Iniciar un servidor local para el desarrollo
Inicializar un proyecto Stamplay
Restaurar a versiones anteriores
Descargar la última versión

1	$ npm install -g stamplay-cli

Vamos a crear una nueva carpeta e inicializar nuestra aplicación Stamplay a esa carpeta.

1	$ mkdir tutsplus && cd tutsplus
2	$ stamplay init

Se te pedirá que ingreses tu ID de aplicación (nombre de tu aplicación) y tu clave de acceso. En este caso, son tutsplus y 4****0 respectivamente.

Esto creará un archivo stamplay.json en la raíz de tu aplicación para que al implementarlo, Stamplay sepa tus credenciales.

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

3.2 Construyendo el Front End

Para comenzar a ejecutar con un buen diseño, comenzamos con una de las muchas y geniales plantillas HTML5 gratuitas con tecnología de Templated.co. El que usamos se llama Retrospect.

Vamos a descargarlo y descomprimirlo en nuestra carpeta de proyectos. Luego instalemos algunas bibliotecas adicionales aquí usando Bower. Ejecuta el siguiente comando y estaremos listos para continuar:

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

Para usar Stamplay con Angular, necesitaremos:

Cargar el SDK de Stamplay
Configurar la aplicación Stamplay
Cargar Angular
Cargar el enrutador angular UI
Cargar la biblioteca Angular-Stamplay (solo un contenedor de servicios para el SDK)

Aquí están las líneas necesarias para hacer todo eso. Los agregaremos debajo de la etiqueta </footer> de tu archivo index.html:

<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>

Asegúrate de haber escrito tu propia AppId en la función Stamplay.init. Ahora podemos iniciar nuestro servidor local para asegurarnos de que todo se carga correctamente. Ejecuta lo siguiente:

1	stamplay start

Verás que tu aplicación está lista para ir a http://localhost:8080.

3.3 La aplicación angular

Crearemos algunos archivos para tu aplicación angular:

List of files and folders for Angular app

Los dos archivos de servicios utilizarán las bibliotecas Stamplay SDK y de etapas angulares para ayudar a nuestra aplicación a interactuar con nuestros datos Stamplay.

El más importante es userService.js. Tiene algunas funciones y nos ayuda a captar datos o crear datos. Para obtener una visión más detallada de lo que Stamplay SDK es capaz de hacer, asegúrate de revisar la documentación.

UserService.js aprovecha el Stamplay JS SDK para proporcionar a nuestra aplicación Angular las siguientes funcionalidades:

login
logout
isLogged
saveAddress
getUserModel
createCard
subscribe
unsubscribe

/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
	}
     };
   }]);

Nuestra aplicación tendrá tres páginas:

home.html, la página de inicio principal donde el usuario podrá suscribirse
subscriptions.html, donde los usuarios pueden ver los cuadros disponibles para una suscripción
profile.html, donde los usuarios pueden editar su información y cancelar una suscripción

Estas páginas están administradas por tres controladores (como lo sugieren las mejores prácticas), que son homeCtrl.js, subscriptionCtrl.js y profileCtrl.js.

Las plantillas de página y los controladores están unidos por la aplicación angular principal.

Aquí está la base de nuestra 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;
			});
	}
]);

Ahora solo tenemos que cargar nuestros nuevos archivos en index.html debajo de las bibliotecas que agregamos anteriormente.

/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 Autenticación de usuario

Conectamos nuestra aplicación de Facebook anteriormente, ¡y ahora tenemos que brindarles a nuestros usuarios una manera de usarla! Toda la autenticación es manejada por Stamplay. No necesitamos codificar nada; solo tenemos que vincular a nuestros usuarios con la ruta de autenticación que Stamplay nos ha proporcionado.

El proceso de autenticación se ve así:

Enlace a los usuarios a su URL de autenticación.
La autenticación ocurre en Facebook.
Facebook envía a un usuario a nuestra aplicación con un token.
Stamplay maneja el almacenamiento de ese token y nuestro usuario está autenticado.

Solo necesitamos configurar manualmente el primero de esos pasos. Vamos a aplicar nuestra app angular con ng-app y ng-controller a index.html y agregar algunas directivas angulares para conectar la página de inicio con nuestro homeCtrl.js. También vamos a eliminar todo entre el <nav> y el <footer> de la plantilla original y reemplazarlo con un elemento de etiqueta <div ui-view></div>.

Este elemento mostrará dinámicamente el contenido de la página actual.

/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..

Cuando se inicia la aplicación, el enrutador verificará la URL y cargará la vista adecuada. Dentro de la primera <sección> de home.html, podemos detectar fácilmente todas las directivas de angular que se emparejaron con las funciones de homeCtrl.js.

/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();
			};
		}
	]);

Ahora, si un usuario hace clic en el botón "Conviértase en miembro", se le pedirá que inicie sesión con su cuenta de Facebook. Tuvimos que hacer deploy porque la autenticación no funcionará desde localhost:8080. Facebook quiere devolver a un usuario a un dominio completo calificado.

En este punto, despliega tu aplicación nuevamente usando:

1	$ stamplay deploy

Después de que un usuario inicie sesión con éxito, queremos que puedan suscribirse a uno de nuestros planes.

3.5 Creando Clientes Stripe

Los clientes son el otro componente principal de las suscripciones. En un sentido amplio, un cliente es solo una forma genérica de asociar a tus propios usuarios con tu cuenta Stripe. Normalmente, querrás asociar algunos metadatos, como una dirección de correo electrónico, con un cliente. Los objetos del cliente también pueden almacenar una tarjeta de crédito, que es cómo se les facturará más adelante.

Crear un nuevo cliente a través de la API es fácil, ya que el Stamplay JS SDK ya proporciona todo el soporte requerido. Nuestra aplicación asocia un cliente de Stripe a nuestros propios usuarios justo después del registro o inicio de sesión; esto se gestiona a través de userService.js en la función getUserModel.

/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 ...

El código anterior verifica si el usuario está conectado o no, y si ya tienen una propiedad stripeCustomerId. Si no, crea un cliente Stripe con $stamplay.Stripe().createCustomer(user.get('id')) y almacenas el stripeCustomerId como una propiedad adicional del usuario registrado.

Este control se activa cada vez que la aplicación se inicia con el módulo Angular app.js.

/assets/js/modules/app.js

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

3.6 Suscripción a un plan

Ahora, finalmente, debemos cobrar a nuestro usuario cuando compran un plan. La plantilla subscriptions.html, vinculada al controlador subscriptionCtrl.js, muestra a nuestros usuarios los planes de suscripción que pueden elegir.

Cuando el usuario selecciona una de las suscripciones, se mostrará el formulario de pago, lo que permite al usuario finalizar su compra. La página de suscripción muestra los artículos en la parte superior y contiene dos secciones más (las secciones de pago y agradecimiento), ambas ocultas.

/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>
...

Para pasar la información relacionada con la suscripción seleccionada, usaremos una función llamada 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;
        //Scroll to payment
        $timeout(function () {
            $location.hash('payment-form');
            $anchorScroll();
        });
};

Esta función hace que el formulario de pago sea visible, y se mostrará junto con los datos del usuario y el plan seleccionado.

Este formulario recopila la información del usuario, la suscripción seleccionada y los valores de la tarjeta de crédito.

Para recopilar los valores de las tarjetas de crédito, necesitamos agregar el cliente de JavaScript de Stripe para obtener un token para la tarjeta, y luego usamos la función de Franja de Stamplay para finalizar el plan. En nuestro index.html, importemos la biblioteca Stripe.js e inicialicemos con nuestra clave de prueba.

/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>
...

Finalmente, la suscripción puede ser procesada. Cuando se hace clic en Confirmar suscripción, nuestro subscriptionCtrl.js inicia el proceso de suscripción, aprovechando 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');	
	});
};
…

Antes de guardar la tarjeta de crédito, actualicemos al usuario con su información de dirección. Veremos más adelante por qué esto es útil en esta etapa.

Un usuario puede estar limitado a una sola tarjeta de crédito. Esta es la razón por la cual la función createCard verifica si el usuario ya tiene una con $stripe.getCreditCard(user.get('id')). Si no hay una tarjeta presente, procedemos a agregar la tarjeta.

Antes de vincular la tarjeta al usuario, debemos agregar la biblioteca de JavaScript del lado de la banda Stripe para convertir de manera segura los valores de la tarjeta de crédito a un token. Una vez que tenemos el token, podemos pasarlo a Stamplay JS SDK y unir la tarjeta al usuario $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;
   }
…

Para probar la implementación de Stripe, llenamos previamente la información de la tarjeta de crédito con los valores de prueba a continuación. Para obtener información sobre las pruebas en Stripe, consulta la documentación.

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

El flujo de suscripción continúa llamando a la función de suscripción userService.js. Esto completa el proceso al enviar la solicitud de suscripción 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 función de suscripción es simple. Una vez que nos aseguramos de que el usuario exista y tenga una tarjeta de crédito, solo necesitamos llamar a $stamplay.Stripe().createSubscription.

El último paso es realizar un seguimiento de las suscripciones creando pedidos y recibiendo notificaciones para cada nueva suscripción que vendemos a través del sitio web. Regresemos a Stamplay y configuremos algunas tareas.

4. Agregar automatización final

Queremos vincular los datos de suscripción a un pedido y viceversa. Esto permitirá a nuestros usuarios desactivar su suscripción si así lo desean.

4.1 Cuando se presenta una nueva suscripción, crea una orden

On new subscription then create an instance of order

Cuando se ha enviado una suscripción, queremos crear una nueva instancia de un objeto de pedido. El pedido hará un seguimiento de la suscripciónId que acaba de crear Stripe, el ID de usuario, el plan y la dirección.

Cuando un usuario que inicia sesión desencadena una tarea, podemos usar cualquiera de sus propiedades para alimentar la acción que sigue. Es por eso que vinculamos la dirección a nuestros usuarios en subscriptionCtrl.js. Esto nos permite almacenarlos en el objeto de pedido incluso si los datos del desencadenante de suscripción no proporcionan esta información. Por lo tanto, puedes ver que la propiedad de dirección de la orden se completa con los datos obtenidos del usuario, ejemplo. {{user.address.city}}.

4.2 Cuando se realiza un nuevo pedido, vincúlalo con la suscripción relacionada

Para tener una referencia del pedido también en la suscripción en Stripe, podemos actualizar el campo Metadata de la suscripción de la siguiente manera. Primero, selecciona el disparador apropiado y la acción del componente Objetos y Stirpe.

Como guardamos nuestro pedido en el Id. de suscripción, ahora podemos editar las suscripciones de Stripe por Id.

4.3 Cuando se realiza un nuevo pedido, notifica al usuario y al administrador de la aplicación con un correo electrónico

Confirmation email for plan subscription

Conclusión

En este tutorial, revisamos cómo comenzar a crear una aplicación web utilizando Stamplay. Implementamos la funcionalidad de inicio de sesión con Facebook y autenticamos con éxito al usuario contra la base de datos en Stamplay. Creamos una API RESTful para administrar pedidos. Hemos podido conectar nuestra aplicación a las API's de MailChimp y Stripe y unirlas con algunas automatizaciones de back-end.

Cupón: Stamplay ha proporcionado a los lectores de Tuts + un cupón exclusivo para ofrecer 6 meses gratis del plan plus (valor de $ 600). El código de cupón es CODETUTSPLUS y vence el 10 de octubre. Regístrate ahora gratis para canjearlo.

El código del tutorial anterior está disponible en GitHub. Dinos lo que piensas a través de los comentarios a continuación.