https://d226lax1qjow5r.cloudfront.net/blog/blogposts/stripe-sms-laravel-dotun/unnamed.png

Notificaciones SMS de Stripe usando Laravel

Publicado el November 5, 2020

Tiempo de lectura: 9 minutos

En este tutorial, vamos a crear una sencilla aplicación que envía notificaciones por SMS utilizando Nexmo cada vez que Stripe envía un evento de cargo exitoso.

Stripe envía varios eventos webhook cada vez que ocurre algo con su Account. A veces, para algunos de estos eventos, como una nueva compra, le gustaría ser notificado al instante cuando se producen.

Empecemos.

Requisitos previos

Vamos a utilizar Laravel 5.8 en este tutorial y usando Compositor para instalar y gestionar todas las dependencias.

También necesitará tener una Account con Stripe para que podamos enviar eventos webhook de prueba.

Por último, necesitarás tener Ngrok instalado para permitir que la aplicación que vamos a desarrollar localmente sea accesible a través de la web para que podamos recibir eventos webhook.

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.

Configuración de Laravel

Usaremos Composer para instalar un nuevo proyecto Laravel. Desde la línea de comandos, utilice el siguiente comando:

composer create-project --prefer-dist laravel/laravel nexmo-stripe

Laravel proporciona soporte para el envío de notificaciones SMS utilizando Nexmo. Sin embargo, desde Laravel 5.8 y superiores, esto se ha extraído en un paquete de primera parte por lo que primero tenemos que tirar de ese paquete, así ejecutando el siguiente comando:

composer require laravel/nexmo-notification-channel

Variables de entorno y configuración

Abra la raíz de su proyecto en su editor favorito y edite el archivo .env para añadir la clave de la API de Nexmo y las credenciales secretas que anotaste antes.

NEXMO_KEY = xxxx NEXMO_SECRET = xxxx SMS_FROM = xxxx SMS_TO = xxxx

Establezca la variable SMS_FROM variable al número que adquirió anteriormente (asegúrese de mantenerlo en el formato formato E.164).

También hemos añadido una variable SMS_TO que es el número de teléfono que recibirá la notificación de SMS, puede establecer esto a su propio número.

A continuación, haremos referencia a las variables de entorno que acabamos de definir a través de nuestro archivo de configuración. Dirígete al directorio config\services y añade un nuevo Nexmo array.

'nexmo' => [
    'key' => env('NEXMO_KEY'),
    'secret' => env('NEXMO_SECRET'),
    'sms_from' => env('SMS_FROM'),
    'sms_to' => env('SMS_TO')
]

Creación del punto final Webhook

Vamos a añadir el webhook endpoint al que Stripe hará una POST cada vez que un cargo tenga éxito.

Edite el archivo routes/api.php para añadir el siguiente código:

Route::post('/stripe/webhook', 'WebhookController@handle');

Creación del controlador Webhook

A continuación, genere un nuevo WebhookController desde la línea de comandos ejecutando el siguiente comando:

php artisan make:controller WebhookController

Esto añadirá un nuevo WebhookController en el directorio App\Http\Controllers directorio. Editar el archivo con el siguiente código:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Notification;
use App\Notifications\NewSaleOccurred;

class WebhookController extends Controller
{
    public function handle(Request $request)
    {
        $payload = $request->all();

        if($payload['type'] == 'charge.succeeded'){
           Notification::route('nexmo', config('services.nexmo.sms_to'))
                        ->notify(new NewSaleOccurred($payload));
        }

        return response('Webhook received');
    }
}

El método handle() del controlador comprueba si el event enviado desde Stripe es el que estamos esperando, que en este caso es el evento charge.succeeded evento. A continuación, utilizando las notificaciones bajo demanda a través de Notification Facade que Laravel proporciona, activamos el envío de una notificación.

El primer parámetro que acepta el método route es el canal de entrega de esta notificación, que en este caso es Nexmo, mientras que el segundo parámetro es el número de teléfono al que queremos enviar la notificación por SMS.

El método notify recibe una instancia de notificación NewSaleOccurred instancia de notificación, que crearemos a continuación.

Creación de la clase de notificación

Utilizando artisan, ejecute el siguiente comando:

php artisan make:notification NewSaleOccurred

Esto nos generará una nueva clase de notificación en el directorio App\Notifications directorio. Editar el archivo con el siguiente código:

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\NexmoMessage;

class NewSaleOccurred extends Notification implements ShouldQueue
{
    use Queueable;

    public $payload;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($payload)
    {
        $this->payload = $payload;
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['nexmo'];
    }

    /**
     * Get the Nexmo representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\NexmoMessage
     */
    public function toNexmo($notifiable)
    {
        $amount = $this->payload['data']['object']['amount'] / 100;

        $message = 'Hello, you just made a sale of $' .$amount. ' in your store';

        return (new NexmoMessage())
                    ->content($message);
    }

}

La página payload del event de Stripe se pasa al constructor de esta notificación. El método via() recibe una instancia notifiable que es una instancia de la clase a la que se envía la notificación y devuelve una matriz con los distintos canales de entrega que se utilizarán para esta notificación, que en este caso es Nexmo.

La dirección toNexmo() recibe una notifiable entidad. Obtenemos el amount del payload y luego dividimos por 100 para convertir de céntimos a dólares. También definimos el message que queremos enviar junto con el importe y, a continuación, devolvemos un Illuminate\Notifications\Messages\NexmoMessage que se encarga de enviar la notificación por SMS.

Configuración de Ngrok

Para probar que nuestra aplicación funciona como se espera, tendremos que configurar Ngrok. Esto hará que nuestra aplicación sea accesible públicamente para que pueda ser alcanzada por Stripe. Para servir nuestra aplicación localmente, ejecute php artisan serve y luego ejecuta el siguiente comando en una ventana de terminal separada:

ngrok http 8000

Esto generará un nuevo terminal similar al que se muestra a continuación.

The ngrok terminalThe ngrok terminal

Copie la primera forwarding URL ya que es la que utilizaremos para configurar nuestro webhook de Stripe.

Manejo de Webhooks de Stripe

El siguiente paso es configurar un endpoint en nuestra cuenta de Stripe para enviar datos a nuestra aplicación. Dirígete a tu panel de Stripe y configura el entorno en modo de prueba para que podamos enviar un evento de prueba a nuestro punto final de webhook.

En la sección Desarrolladores > Webhooks seleccione Add Endpoint y configúrelo utilizando el archivo ngrok url que ha copiado anteriormente. La URL completa tendrá este aspecto http://6fb4323a.ngrok.io/api/stripe/webhooksólo su ID alfanumérico al principio de la dirección será diferente.

Stripe Webhook SetupStripe Webhook Setup

Pruebas

En la configuración del webhook de Stripe, haga clic en el botón Enviar Webhook de prueba de prueba. Esto enviará un evento charge.succeeded de prueba al punto final del webhook que añadimos antes.

Deberías recibir un texto similar al siguiente:

SMS NotificationSMS Notification

Conclusión

Hemos visto cómo podemos recibir notificaciones SMS instantáneas de Stripe usando Nexmo. Esto es importante, ya que siempre estamos al tanto de lo que ocurre en nuestra aplicación.

Hay otros escenarios diferentes para los que le gustaría recibir notificaciones SMS de Stripe y usted puede decidir cómo manejaría estos mirando todos los eventos que Stripe proporciona y decidir si alertar sobre ellos también.

Este tutorial puede servir como una gran guía de partida para la forma de añadir más notificaciones si desea hacerlo y usted puede encontrar todo el código que aparece arriba en GitHub.

Compartir:

https://a.storyblok.com/f/270183/250x250/d288ec8a73/dotun.png
Dotun Jolaoso

Software Developer who loves building awesome tools and products. I currently work with Laravel, PHP and Vue.