Integración de Stripe Checkout con Angular

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

¿Qué es Stripe?

Stripe es softwarey APIs para aceptar pagos, enviar pagos, y gestionarsu negocio en línea

Objetivo

Vamos a aprender,

1. cómo crear un producto en Stripe
2. integrar ese producto en Angular para una experiencia de pago sin complicaciones 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, inicie sesión y vaya al panel de control para el siguiente paso:

2. Crear un producto y guardar el priceId para su uso posterior en Angular

3. Crear una aplicación Angular starter 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

ComponenteProducto: 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 clave publicable para obtener la interfaz de banda

Generar la clave publicable desde el panel de Stripe => Developers => keys

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

9. Crear Variables de Datos de Producto en ProductComponent para usarlas en Product UI

se utilizará en la plantilla de productopara la interfaz de usuario.

priceIdse 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);
  }
}

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

Haga clic aquí para ver la demo y probarla.

Unimedia Technology

Aquí en Unimedia Technology tenemos un equipo de desarrolladores Angular que pueden desarrollar sus más desafiantes Web Dashboards y Web apps.