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