En este artículo, vamos a aprender a integrar “Checkout with Stripe” en la última versión de Angular (actualmente 10.1.4)

Tabla de contenidos

¿Qué es Stripe?

Stripe es un software y API para aceptar pagos, enviar pagos y gestionar sus negocios en línea

Objetivo

Vamos a aprender,

cómo crear un producto en Stripe
integrar ese producto en Angular para una experiencia de pago sin problemas para nuestros usuarios.

Notas

Recuerde que, todos los datos relacionados con el producto y las claves en la franja que tenemos que crear en “Modo de prueba”

Requisitos previos

angular-cli versión 10.1.3 o posterior
Nodejs versión 10 o posterior
Se requieren conocimientos básicos de Angular

1. Cree una cuenta en Stripe e inicie sesión y vaya al panel de control para el siguiente paso:

2. Cree un producto y guarde el PriceId para su uso posterior en Angular

3. Crear una aplicación de inicio de Angular usando Angular CLI

ng new angular-stripe --style=scss

4. Instala Stripe js usando NPM:

npm i @stripe/stripe-js

5. Crear componentes => Producto y Transacción exitosa y Transacción fallida

ng generate component product
ng generate component success
ng generate component failure

Componente del producto: Donde mostramos los detalles del producto

Componente de éxito: Donde mostramos el mensaje de éxito

FailureComponent: Donde mostramos el mensaje de fallo

6. Ahora, vamos a añadir las rutas para los componentes que se ha creado

7. Generar la clave publicable para obtener la interfaz de la franja

Generar la clave publicable desde el panel de control de Stripe => Desarrolladores => claves

8. Establezca las claves API generadas como variables de entorno para su uso posterior

9. Crear variables de datos de producto en ProductComponent para utilizarlas en la interfaz de usuario del producto

se utilizará en la plantilla del producto para la interfaz de usuario

priceId se utilizará al redirigir al usuario para el pago

title = "angular-stripe";
priceId = "price_1HSxpTFHabj9XRH6DMA8pC7l";
product = {
  title: "Classic Peace Lily",
  subTitle: "Popular House Plant",
  description:
    "Classic Peace Lily is a spathiphyllum floor plant arranged in a bamboo planter with a blue & red ribbom and butterfly pick.",
  price: 18.0,
};
quantity = 1;
stripePromise = loadStripe(environment.stripe_key);

10. Crear método de pago para redirigir al usuario a la página de pago de Stripe

async checkout() {
  // Call your backend to create the Checkout session.
  // When the customer clicks on the button, redirect them to Checkout.
  const stripe = await this.stripePromise;
  const { error } = await stripe.redirectToCheckout({
    mode: "payment",
    lineItems: [{ price: this.priceId, quantity: this.quantity }],
    successUrl: `${window.location.href}/success`,
    cancelUrl: `${window.location.href}/failure`,
  });
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `error.message`.
  if (error) {
    console.log(error);
  }
}

Demo

El código completo está disponible aquí para la referencia.

Haga clic aquí para ver la demo y probarla.

Tecnología Unimedia

En Unimedia Technology contamos con un equipo de Desarrolladores Angular que pueden desarrollar sus más desafiantes Web Dashboards y Web apps.

Integración de Stripe Checkout con Angular