Integració de Stripe Checkout amb Angular

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

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

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

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

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.