Stripe Ionic | Cómo realiza cobros desde tu aplicación

¿Buscando la manera de aceptar pagos en tu aplicación mediante Stripe? O, quizás ya sabes cómo usar el componente Stripe Ionic, pero te falta algún detallito para hacer funcionar a la librería cómo tu quieres ¿verdad?

Si has respondido que sí a alguna de las dos preguntas anteriores, déjame decirte que no eres el primero, ni serás el último, que pasa por este artículo a intentar dar respuesta a estas cuestiones.

Te digo más, incluso los que somos más expertos en esto, necesitamos estos artículos cuando vamos a implementar algo que no hemos usado nunca, o que llevamos mucho tiempo sin utilizar.

Por si no me conoces, mi nombre es Aitor Sánchez González, soy desarrollador de apps desde el año 2014 y en este artículo aprenderás cómo aceptar pagos en tus aplicaciones hechas en Ionic mediante la plataforma Stripe.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

Instalación de Stripe en Ionic

Cómo con todos los módulos externos de Ionic, por externo me refiero a que no están en el core, necesitamos instalarlo. Para ello vamos a utilizar las 2 siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-stripe
$ npm install @awesome-cordova-plugins/stripe

La primera instalará el plugin que permite la comunicación nativa con el sistema.

Y la segunda conecta el código de nuestra aplicación con el plugin.

Y visto esto, ya estamos en disposición de utilizar el módulo, continuemos.

Configuración de Stripe Ionic

Aunque no sea necesario recordarlo otra vez. Yo lo voy a hacer, porque me parece algo necesario en la Apps hechas con Ionic.

NO es necesario que los módulos se implementen en el AppModule. Si nuestro módulo solo se va a usar en un componente, es muy recomendable incluirlo solo en el module de este componente.

Visto esto, veamos cómo se agrega a los providers esta clase.

...

import { Stripe } from "@awesome-cordova-plugins/stripe/ngx"

...

providers: [
...,
Stripe,
...
]

...

Vale, pues no requiere más. Con esto ya estamos a disposición de usar Stripe. Continuemos…

Plataformas que soportan este componente

En la actualidad, Stripe funciona para los siguientes sistemas operativos:

• Android
• Browser
• iOS

Cómo se usa Stripe en Ionic

Antes de continuar vamos a ver un ejemplo de código. Así podemos ilustrarnos de manera más clara.

...

import {Stripe} from '@awesome-codova-plugins/stripe/ngx';

export class myClass {
    constructor(private stripe: Stripe) {

        this.stripe.setPublishableKey('my_publishable_key');
        let card = {
            number: '4242424242424242',
            expMonth: 12,
            expYear: 2020,
            cvc: '220'
        };

        this.stripe.createCardToken(card)
            .then(token => {
                console.log(token.id);
                this.makePaiment(token);
            }).catch(error => console.error(error));

    }

    makePayment(token) {
        this.http.post('https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe', {
            amount: 100,
            currency: "usd",
            token: token.id
        }).subscribe(data => {
            console.log(data);
        });
    }
}

...

1. En primer lugar, vamos a realizar un import de la clase Stripe que será la encargada de realizar todo el trabajo duro.
2. Posteriormente, y cómo es un servicio, lo podemos inyectar en el constructor. Así que lo hacemos y ya disponemos de su funcionalidad en toda la clase.
3. Ahora, con la función “setPublishableKey” le seteamos la key que nos da Stripe para poder comunicarnos con su Api. Si aún no la tienes la puede obtener desde aquí: https://dashboard.stripe.com/register?redirect=https%3A%2F%2Fstripe.com%2Fdocs%2Fapi
4. Es la página oficial de Stripe y una vez te registres accederás a su Dashboard para gestionar todo.
5. Ahora creamos el objeto Card cómo vemos en el ejemplo. Este objeto cuenta con los siguientes campos:
   1. number -> string -> Será el número de tarjeta. Todo junto y sin guiones.
   2. expMonth -> number -> Mes en el que caduca la tarjeta.
   3. expYUear -> number -> Año en el que caduca la tarjeta.
   4. cvc -> string -> EL código de verificación de la tarjeta. Si no sabes lo que es, son los 3 o 4 últimos dígitos que aparecen en el reverso de la tarjeta de crédito o débito.
6. Con la instancia de la card creada, llamaremos a nuestra clase Stripe y a su función “createCardToken” pasándole dicha instancia cómo parámetro.
7. Controlamos la promesa y si todo está correcto se resolverá bien, de lo contrario saldrá por el catch.
8. Y listo, con el que se crea ya podemos realizar el cobro. Llamamos al método makePayment pasándole el token y listo. Ya hemos realizado el cobro.

Veamos, esto es un ejemplo rudimentario y muy genérico. Pero desde este podrás hacer lo que necesites con esta clase.

No es necesario que comentemos el código de makePayment. Por qué el módulo http lo explicaremos en otro momento. Mientras tanto puedes echar un ojo en este enlace si es que no sabes usarlo aún.

Pero para ilustrar un poquito más el ejemplo, esta sería una respuesta:

Respuesta de una solicitud de cobro

{
    "id": "ch_1EZGjoKT40GCfr6OUy7b7xZ6",
    "object": "charge",
    "amount": 100,
    "amount_refunded": 0,
    "application": null,
    "application_fee": null,
    "application_fee_amount": null,
    "balance_transaction": "txn_1EZGjoKT40GCfr6OWAxU4gK3",
    "billing_details": {
        "address": {
            "city": null,
            "country": null,
            "line1": null,
            "line2": null,
            "postal_code": "12312",
            "state": null
        },
        "email": null,
        "name": null,
        "phone": null
    },
    "captured": true,
    "created": 1557663908,
    "currency": "usd",
    "customer": null,
    "description": null,
    "destination": null,
    "dispute": null,
    "failure_code": null,
    "failure_message": null,
    "fraud_details": {},
    "invoice": null,
    "livemode": false,
    "metadata": {},
    "on_behalf_of": null,
    "order": null,
    "outcome": {
        "network_status": "approved_by_network",
        "reason": null,
        "risk_level": "normal",
        "risk_score": 27,
        "seller_message": "Payment complete.",
        "type": "authorized"
    },
    "paid": true,
    "payment_intent": null,
    "payment_method": "src_1EZGjGKT40GCfr6OuqGca9Gy",
    "payment_method_details": {
        "card": {
            "brand": "visa",
            "checks": {
                "address_line1_check": null,
                "address_postal_code_check": "pass",
                "cvc_check": "pass"
            },
            "country": "US",
            "description": "Visa Classic",
            "exp_month": 2,
            "exp_year": 2024,
            "fingerprint": "r1wUCNEWSFD13KQx",
            "funding": "credit",
            "last4": "4242",
            "three_d_secure": null,
            "wallet": null
        },
        "type": "card"
    },
    "receipt_email": null,
    "receipt_number": null,
    "receipt_url": "https://pay.stripe.com/receipts/acct_1EQtQcKT40GCfr6O/ch_1EZGjoKT40GCfr6OUy7b7xZ6/rcpt_F3NUrM5dCDMcI7rySb0QLhR6m5mYGnf",
    "refunded": false,
    "refunds": {
        "object": "list",
        "data": [],
        "has_more": false,
        "total_count": 0,
        "url": "/v1/charges/ch_1EZGjoKT40GCfr6OUy7b7xZ6/refunds"
    },
    "review": null,
    "shipping": null,
    "source": {
        "id": "src_1EZGjGKT40GCfr6OuqGca9Gy",
        "object": "source",
        "amount": null,
        "card": {
            "exp_month": 2,
            "exp_year": 2024,
            "last4": "4242",
            "country": "US",
            "brand": "Visa",
            "address_zip_check": "pass",
            "cvc_check": "pass",
            "funding": "credit",
            "fingerprint": "r1wUCNEWSFD13KQx",
            "three_d_secure": "optional",
            "name": null,
            "address_line1_check": null,
            "tokenization_method": null,
            "dynamic_last4": null
        },
        "client_secret": "src_client_secret_F3NUUwOyZJmX65qyzyVEeN7R",
        "created": 1557663908,
        "currency": null,
        "flow": "none",
        "livemode": false,
        "metadata": {},
        "owner": {
            "address": {
                "city": null,
                "country": null,
                "line1": null,
                "line2": null,
                "postal_code": "12312",
                "state": null
            },
            "email": null,
            "name": null,
            "phone": null,
            "verified_address": null,
            "verified_email": null,
            "verified_name": null,
            "verified_phone": null
        },
        "statement_descriptor": null,
        "status": "consumed",
        "type": "card",
        "usage": "reusable"
    },
    "source_transfer": null,
    "statement_descriptor": null,
    "status": "succeeded",
    "transfer_data": null,
    "transfer_group": null
}

Si te paras a leer un poco los campos. Comprenderás todo lo que se puede hacer con esto.

Visto todo ya podemos continuar para ver lo que realmente nos mola y nos gusta. La chicha del artículo. Las funciones y campos que tenemos disponibles para hacer uso de toda esta parafernalia.

Funciones de Stripe para Ionic

En primer lugar, vamos a ver los métodos y después vemos el resto. La verdad que no son muchas y está todo bastante bien comprimido.

setPublishableKey(publishableKey)

• Nos permite establecer el api key que hemos generado en el panel de Stripe para que todo funcione.
• Parámetros:
  • publishableKey -> string -> Será la key de Stripe
• Retorna una promesa que tendremos que controlar. Se resolverá si todo está correcto y si no, saldrá por el reject.

createCardToken(cardInfo)

• Esta será la función que nos data “permiso” para emitir un cobro a través de una tarjeta. Es la que nos genera el token de autentificación para la validación del cobro.
• Parámetros:
  • cardInfo -> StripeCardTokenParams -> Será sómo hemos visto en el ejemplo. Básicamente son los datos de la tarjeta. Fecha de caducidad, cvc y el número de tarjeta cómo campo.
• Retorna una promesa que contiene una instancia de “StripeCardTokenRes” y hay que controlar. La interfaz la vamos a ver más abajo

createBankAccountToken(bankInfo)

• Es similar a la función anterior, pero en lugar de tarjeta se usan datos bancarios / cartilla.
• Parámetros:
  • bankInfo -> StripeBankACcountParams -> Una instancia de la interfaz que contiene los datos.
• Retorna una promesa que tenemos que controlar. Dentro de la promesa lleva una cadena con el token generado.

validateCardNumber(cardNumber)

• Esta función fuerza una validación de tarjeta solicitada.
• Parámetros:
  • cardNumber -> string -> El número de cuenta que queremos validar.
• Retorna una promesa que tenemos que controlar. Si se resuelve, la tarjeta será correcta. En caso contrario saldrá por el catch.

validateCVC(cvc)

• Esta función es similar a la anterior, pero para validar los CVC en lugar del número de tarjeta.
• Parámetros:
  • cvc -> string -> El número CVC de la tarjeta.
• Retorna una promesa que tendremos que controlar. Correcto si se resuelve, incorrecto si sale por el catch.

validateExpiryDate(expMonth, expYear)

• Similar a las dos anteriores, pero para validar una fecha dada.
• Parámetros:
  • expMonth -> string -> El mes de caducidad.
  • expYear -> string -> El año de caducidad.
• Retorna una promesa que tenemos que controlar. Correcto si se resuelve, incorrecto si sale por el catch.

getCardType(cardNumber)

• Con esta función podemos conocer qué tipo de tarjeta está usando el usuario.
• Parámetros:
  • cardNumber -> string -> Será el número de tarjeta de la tarjeta que queremos comprobar.
• Retorna una promesa que tendremos que controlar. Dentro lleva una cadena con el nombre del tipo de la tarjeta.
• Tipos de tarjeta soportados:
  • Crédito
  • Débito
  • Revolving
  • Prepago
  • Compra / Comercio

Y bueno, hasta aquí llegamos con los métodos y funciones. Ahora vamos a ver la última parte, las interfaces de datos. Venga, que ya terminamos…

StripeCardTokenParams

Esta es una de las interfaces que hemos visto más arriba. Y cuenta con los siguientes campos:

• number -> string -> Será el número de tarjeta aplicado en la solicitud.
• expMonth -> number -> Será el mes de caducidad de la tarjeta.
• expYear -> number -> Será el año de caducidad de la tarjeta.
• cvc -> number -> El código de verificación.
• name -> string -> El nombre de la persona que aparece en la tarjeta.
• address_line1 -> string -> Dirección línea 1.
• address_line2 -> string -> Dirección línea 2.
• address_city -> string -> Será la ciudad de la dirección registrada.
• address_state -> string -> El estado/provincia de la dirección registrada.
• address_country -> string -> Será el país de la dirección registrada.
• postalCode -> string -> Será el código postal registrado con la tarjeta.
• currency -> string -> La moneda de uso de la tarjeta.

StripeBankAccountParams

Será similar a la de la tarjeta, pero para la información bancaria. Los campos son los siguientes:

• rounting_number -> string -> Será el número de ruta del banco (BIC).
• account_number -> string -> Es el número de cuenta.
• currency -> string -> La moneda que quieres usar en la transacción.
• country -> string -> El código ISO del país de donde es la cuenta.
• account_holder_name -> string -> Será el nombre del propietario de la cuenta.
• account_holder_type -> string -> Es el tipo de cuenta.

StripeCardTokenRes

Este objeto es obtenido en la promesa cuando llamamos a “CreateCardToken”. Y en el van los datos del token que nos permitirá realizar la transacción.

Los campos que tiene son los siguientes:

• card -> Objeto Card -> Que dentro lleva los siguientes campos:
  • brand -> string
  • exp_month -> number
  • exp_year -> number
  • funding -> string
  • last4 -> string
• created -> string -> La fecha en la que se ha creado el token.
• id -> string -> El id del token generado.
• type -> Será el tipo de tarjeta. Cómo hemos visto antes:
  • Crédito
  • Débito
  • Revolving
  • Prepago
  • Compra / Comercio

Más tutoriales de Ionic

SQLite Ionic | Aprende a usarlas como un profesional aquí

¿Buscando la manera de guardar datos de tu aplicación en el teléfono Continuar leyendo

QR Scanner Ionic | Todo lo que necesitas saber está aquí

¿Pensando en incluir un escaner de códigos QR en tu aplicación Ionic? Continuar leyendo

Card Ionic | Cómo usar ion-card de manera práctica

¿Pensando en incluir cards en tu aplicación de Ionic y no sabes Continuar leyendo

Ionic Geofence | Aprende a usarlo cómo un profesional

¿Pensando en localizar a un usuario cuando haya pasado por X zona, Continuar leyendo

Background Mode Ionic – Cómo ejecutar tareas en segundo plano

¿Quieres realizar tareas asíncronas en tu aplicación con el componente Background Mode Continuar leyendo

FCM Ionic | Aquí te enseño a usarlo cómo un PRO

¿Pensando en implementar notificaciones Push en tu aplicación Ionic mediante FCM Ionic? Continuar leyendo

Ion Select | todo lo que debes saber

¿Pensando en incluir un Ion Select, o selector, en tu aplicación de Continuar leyendo

Ion-radio (Ionic radio button) de 0 a 100

¿Pensando en incluir radio buttons en tu app de Ionic? o, tal Continuar leyendo

Action Sheet Ionic – Ejemplos / Examples y más información avanzada

Así que quieres incluir un menú de acciones mediante el plugin Action Continuar leyendo

Y el tutorial en vídeo, cómo siempre 🙂

Bueno, pues con esto termino el artículo. La verdad que pensaba que iba a ser más corto.

Solo queda despedirme y decir que nos vemos en el siguiente artículo. Hasta entonces, que vaya bien 🙂