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?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde el año 2014, y en este artículo aprenderás cómo cobrar a tus usuarios con tus apps hechas en Ionic mediante la plataforma Stripe.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

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

Un tutorial en video, por si no te gusta leer

Algo más que quizás te interese

Mira, ahora vas a poder evaluar, optimizar y mejorar tus logos para aumentar tus descargas, y por extensión los ingresos, con nuestra nueva herramienta. Imagina una IA entrenada con todos los logos de Google Play y que en base a eso te da una calidad del tuyo. Pues eso es lo que tienes disponible aquí. No te espoileo más, dentro todos los detalles.

Y hasta aquí el artículo de hoy. Espero haberte ayudado, y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!