Integració de Stripe Checkout amb Angular

Stripe integration with Angular
Integrar Checkout amb Stripe i Angular

Taula de continguts

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:

estil=
Tauler de control de Stripe

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

estil=
Crea un producte

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

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

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


Demostració

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.

Recorda que a Unimedia som experts en tecnologies emergents, així que no dubtis a contactar amb nosaltres si necessites assessorament o serveis. Estarem encantats d’ajudar-te.

Unimedia Technology

El teu soci de desenvolupament de software

Som una consultoria tecnològica d’avantguarda especialitzada en arquitectura i desenvolupament de programari personalitzat.

Els nostres serveis

Registra't per rebre les nostres actualitzacions

Estigueu al dia, estigueu informat i donem forma junts al futur de la tecnologia!

Lectures relacionades

Aprofundeix amb aquests articles

Exploreu més coneixements experts d’Unimedia i anàlisis en profunditat en l’àmbit del desenvolupament de programari i la tecnologia.

Let’s make your vision a reality!

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

Fem realitat la teva visió!

Només has d’omplir aquest formulari per començar el teu viatge cap a la innovació i l’eficiència.