En aquest article, aprendrem a integrar “Checkout with Stripe ” a la darrera versió d’Angular (actualment 10.1.4)

Què és Stripe?

Stripe és un software i APIs per acceptar pagaments, enviar pagaments i gestionar el seu negoci en línia

Objectiu

anem a aprendre,

1. com crear un producte a Stripe
2. integrar aquest producte a Angular per obtenir una experiència de pagament sense problemes per als nostres usuaris.

Notes

Recordeu que totes les dades i claus relacionades amb el producte en stripe les hem de crear en “Mode de prova”

Requisits previs

• angular-cli versió 10.1.3 o posterior
• Nodejs versió 10 o posterior
• Es requereixen coneixements bàsics d’Angular

1. Creeu un compte a Stripe i inicieu la sessió i aneu al tauler per al següent pas:

2. Creeu un producte i deseu el priceId per utilitzar-lo posteriorment a Angular

Copia l’identificador del preu

3. Creeu una aplicació d’inici d’Angular mitjançant Angular CLI

ng new angular-stripe --style=scss

4. Instal·leu Stripe js mitjançant NPM:

npm i @stripe/stripe-js

5. Creeu components => Producte i transacció amb èxit i transacció fallida

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

ProductComponent : on mostrem els detalls del producte

SuccessComponent : on mostrem el missatge d’èxit

FailureComponent : on mostrem el missatge d’error

6. Ara, afegirem les rutes dels components que s’han creat

Fitxer : app.module.ts

Fitxer : app.component.html

7. Genereu la clau publicable per obtenir la interfície de stripe

Genereu la clau publicable des de Stripe Dashboard => Desenvolupadors => claus

8. Establiu les claus de l’API generades com a variables d’entorn per a un ús posterior

Fitxer : entorn.ts

9. Creeu variables de dades de producte a ProductComponent per utilitzar-les a la interfície d’usuari del producte

L’objecte de producte s’utilitzarà a la plantilla de producte per a la IU

priceId s’utilitzarà mentre es redirigeix l’usuari per a la compra

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

Fitxer : product.component.html

10. Creeu un mètode de pagament per redirigir l’usuari a la pàgina de pagament 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 codi complet està disponible aquí per a la referència.

Feu clic aquí per veure la demostració per provar.

Unimedia Technology

Aquí a Unimedia Technology tenim un equip de desenvolupadors angulars que poden desenvolupar els vostres taulers web i aplicacions web més difícils.