Integración de Stripe Checkout con Angular

Stripe integration with Angular
Integrar Checkout con Stripe y Angular

Índice

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 software y APIs para aceptar pagos, enviar pagos, y gestionar su 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:

 

estilo
Cuadro de mandos de Stripe

 

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

 

estilo
Crear un producto

 

><figcaption style= Copia Precio ID

 

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

 

><figcaption style= Archivo: app.module.ts

 

><figcaption style= Archivo: app.component.html

 

 

7. Generar clave publicable para obtener la interfaz de banda

 

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

/&gt;</figure>
</div>

 

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

 

><figcaption style= Archivo: environment.ts

 

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

se utilizará en la plantilla de 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);

 

 

><figcaption style= Archivo: product.component.html

 

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í 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.

Recuerde que en Unimedia somos expertos en tecnologías emergentes, así que no dude en ponerse en contacto con nosotros si necesita asesoramiento o servicios. Estaremos encantados de ayudarle.

Unimedia Technology

Su socio de desarrollo de software

Somos una consultora tecnológica de vanguardia especializada en arquitectura y desarrollo de software a medida.

Nuestros servicios

Suscríbase a nuestras actualizaciones

Mantente al día, informado y ¡demos forma juntos al futuro de la tecnología!

Lecturas relacionadas

Profundice con estos artículos

Descubra más opiniones expertas y análisis en profundidad de Unimedia en el ámbito del desarrollo de software y la tecnología.

Let’s make your vision a reality!

Simply fill out this form to begin your journey towards innovation and efficiency.

Hagamos realidad tu visión.

Sólo tienes que rellenar este formulario para iniciar tu viaje hacia la innovación y la eficiencia.