{"id":7160,"date":"2020-09-27T10:07:11","date_gmt":"2020-09-27T08:07:11","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/stripe-checkout-integration-with-angular\/"},"modified":"2024-01-10T19:17:16","modified_gmt":"2024-01-10T18:17:16","slug":"stripe-checkout-integration-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/","title":{"rendered":"Integraci\u00f3 de Stripe Checkout amb Angular"},"content":{"rendered":"\n<p>En aquest article, aprendrem a integrar &#8220;Checkout with <a rel=\"noreferrer noopener\" href=\"https:\/\/stripe.com\/\" target=\"_blank\">Stripe<\/a> &#8221; a la darrera versi\u00f3 d&#8217;Angular (actualment 10.1.4)<\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">Qu\u00e8 \u00e9s Stripe?<\/h3>\n\n<p>Stripe \u00e9s <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">un software<\/a> i APIs per acceptar pagaments, enviar pagaments i <a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">gestionar<\/a> el seu negoci en l\u00ednia<\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">Objectiu<\/h3>\n\n<p>anem a aprendre,  <\/p>\n\n<ol class=\"wp-block-list\"><li>com crear un producte a Stripe<\/li><li>integrar aquest producte a Angular per obtenir una experi\u00e8ncia de pagament sense problemes per als nostres usuaris.<\/li><\/ol>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">Notes<\/h3>\n\n<p>Recordeu que totes les dades i claus relacionades amb el producte en stripe les hem de crear en <em>&#8220;Mode de prova&#8221;<\/em>  <\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">Requisits previs<\/h3>\n\n<ul class=\"wp-block-list\"><li>angular-cli versi\u00f3 10.1.3 o posterior<\/li><li>Nodejs versi\u00f3 10 o posterior<\/li><li>Es requereixen coneixements b\u00e0sics d&#8217;Angular<\/li><\/ul>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">1. Creeu un compte a Stripe i inicieu la sessi\u00f3 i aneu al tauler per al seg\u00fcent pas:<\/h4>\n\n<p><\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1jj5To3i2Jr8Sa8eAix1G1A.png\" alt=\"  estil=\" border:=\"\" solid=\"\"\/><figcaption style=\"text-align:center\"><strong>Tauler de control de Stripe<\/strong><\/figcaption><\/figure>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">2. <a href=\"https:\/\/support.stripe.com\/questions\/how-to-create-products-and-prices\" rel=\"noreferrer noopener\" target=\"_blank\">Creeu un producte<\/a> i deseu el priceId per utilitzar-lo posteriorment a Angular<\/h4>\n\n<p><\/p>\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1LLkg_kanFmmmBXq99k6Fkw.png\" alt=\"  estil=\" border:=\"\" solid=\"\"\/><figcaption style=\"text-align:center\"><strong>Crea un producte<\/strong><\/figcaption><\/figure>\n\n<p><\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1LhnFoJ4HVvSdm0IHxTJ2rQ.png\" alt=\"><figcaption style=\" text-align:center=\"\"\/><strong>Copia l&#8217;identificador del preu<\/strong><\/figure>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">3. Creeu una aplicaci\u00f3 d&#8217;inici d&#8217;Angular mitjan\u00e7ant Angular CLI<\/h4>\n\n<pre class=\"wp-block-code\"><code>ng new angular-stripe --style=scss<\/code><\/pre>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">4. Instal\u00b7leu Stripe js mitjan\u00e7ant NPM:<\/h4>\n\n<pre class=\"wp-block-code\"><code>npm i @stripe\/stripe-js<\/code><\/pre>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">5. Creeu components =&gt; Producte i transacci\u00f3 amb \u00e8xit i transacci\u00f3 fallida<\/h4>\n\n<pre class=\"wp-block-code\"><code>ng generate component product\nng generate component success\nng generate component failure<\/code><\/pre>\n\n<p><strong>ProductComponent<\/strong> : on mostrem els detalls del producte<\/p>\n\n<p><strong>SuccessComponent<\/strong> : on mostrem el missatge d&#8217;\u00e8xit<\/p>\n\n<p><strong>FailureComponent<\/strong> : on mostrem el missatge d&#8217;error<\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">6. Ara, afegirem les rutes dels components que s&#8217;han creat<\/h4>\n\n<p><\/p>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/14N0FR5VjxchklQw5W8ygfg.png\" alt=\"><figcaption style=\" text-align:center=\"\"\/><strong>Fitxer<\/strong> : app.module.ts<\/figure><\/div>\n\n<p><\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1ZTKYklUa8FTIXCvfjGaJzg.png\" alt=\"><figcaption style=\" text-align:center=\"\"\/><strong>Fitxer<\/strong> : app.component.html<\/figure>\n\n<p><\/p>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">7. Genereu la clau publicable per obtenir la interf\u00edcie de stripe<\/h4>\n\n<p><\/p>\n\n<p><a href=\"https:\/\/stripe.com\/docs\/keys\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Genereu la clau publicable<\/a> des de Stripe Dashboard =&gt; Desenvolupadors =&gt; claus<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/0TMM68-hGQSTCq0jQ.png\" alt=\"\/&amp;gt;&lt;\/figure&gt;&#10;&lt;\/div&gt;\"\/><\/figure>\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">8. Establiu les claus de l&#8217;API generades com a variables d&#8217;entorn per a un \u00fas posterior<\/h4>\n\n<p><\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1ikyPCjVHVlQjf7OCFpD4Qg.png\" alt=\"><figcaption style=\" text-align:center=\"\"\/><strong>Fitxer<\/strong> : entorn.ts<\/figure>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">9. Creeu variables de dades de producte a ProductComponent per utilitzar-les a la interf\u00edcie d&#8217;usuari del producte<\/h4>\n\n<p>L&#8217;objecte <em>de producte<\/em> s&#8217;utilitzar\u00e0 a la plantilla de producte per a la IU<\/p>\n\n<p><em>priceId<\/em> s&#8217;utilitzar\u00e0 mentre es redirigeix \u200b\u200bl&#8217;usuari per a la compra<\/p>\n\n<pre class=\"wp-block-code\"><code>title = \"angular-stripe\";\npriceId = \"price_1HSxpTFHabj9XRH6DMA8pC7l\";\nproduct = {\n  title: \"Classic Peace Lily\",\n  subTitle: \"Popular House Plant\",\n  description:\n    \"Classic Peace Lily is a spathiphyllum floor plant arranged in a bamboo planter with a blue &amp; red ribbom and butterfly pick.\",\n  price: 18.0,\n};\nquantity = 1;\nstripePromise = loadStripe(environment.stripe_key);<\/code><\/pre>\n\n<p><\/p>\n\n<p><\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1-BVHJgH9u30iYCd2D7QPbA.png\" alt=\"><figcaption style=\" text-align:center=\"\"\/><strong>Fitxer<\/strong> : product.component.html<\/figure>\n\n<p><\/p>\n\n<h4 class=\"wp-block-heading\">10. Creeu un m\u00e8tode <em>de pagament<\/em> per redirigir l&#8217;usuari a la p\u00e0gina de pagament de Stripe<\/h4>\n\n<pre class=\"wp-block-code\"><code>async checkout() {\n  \/\/ Call your backend to create the Checkout session.\n  \/\/ When the customer clicks on the button, redirect them to Checkout.\n  const stripe = await this.stripePromise;\n  const { error } = await stripe.redirectToCheckout({\n    mode: \"payment\",\n    lineItems: &#91;{ price: this.priceId, quantity: this.quantity }],\n    successUrl: `${window.location.href}\/success`,\n    cancelUrl: `${window.location.href}\/failure`,\n  });\n  \/\/ If `redirectToCheckout` fails due to a browser or network\n  \/\/ error, display the localized error message to your customer\n  \/\/ using `error.message`.\n  if (error) {\n    console.log(error);\n  }\n}\n<\/code><\/pre>\n\n<p><\/p>\n\n<p><\/p>\n\n<hr class=\"wp-block-separator\"\/>\n\n<p><\/p>\n\n<p><\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"  controls=\" loop=\"  preload=\" auto=\"\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2020\/09\/Demo_-Stripe-Integration-with-Angular.mp4\" style=\"border: 1.5px solid #e3e8ee;border-radius: 4px\"><\/video><figcaption style=\"text-align:center\"><strong>Demostraci\u00f3<\/strong><\/figcaption><\/figure>\n\n<p><\/p>\n\n<p><strong>El codi complet<\/strong> est\u00e0 disponible <a href=\"https:\/\/github.com\/unimedia-technology\/angular-stripe\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a> per a la refer\u00e8ncia.<\/p>\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/unimedia-technology.github.io\/angular-stripe\" target=\"_blank\">Feu clic aqu\u00ed<\/a> per veure la demostraci\u00f3 per provar.<\/p>\n\n<p><\/p>\n\n<h3 class=\"wp-block-heading\">Unimedia Technology<\/h3>\n\n<p>Aqu\u00ed a <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenim un equip de <strong>desenvolupadors angulars<\/strong> que poden desenvolupar els vostres taulers web i aplicacions web m\u00e9s dif\u00edcils.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Integrar Checkout amb Stripe i Angular<\/p>\n","protected":false},"author":6,"featured_media":6529,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[196,218],"tags":[258,259,260],"class_list":["post-7160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-ca","category-technical-guides-ca","tag-facturacio","tag-spa-ca","tag-stripe-api-ca"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Integraci\u00f3 de Stripe Checkout amb Angular - Unimedia Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Integraci\u00f3 de Stripe Checkout amb Angular\" \/>\n<meta property=\"og:description\" content=\"Integrar Checkout amb Stripe i Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-27T08:07:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-10T18:17:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Integraci\u00f3 de Stripe Checkout amb Angular - Unimedia Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/","og_locale":"ca_ES","og_type":"article","og_title":"Integraci\u00f3 de Stripe Checkout amb Angular","og_description":"Integrar Checkout amb Stripe i Angular","og_url":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2020-09-27T08:07:11+00:00","article_modified_time":"2024-01-10T18:17:16+00:00","og_image":[{"width":1120,"height":660,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Escrit per":"Unimedia","Temps estimat de lectura":"3 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Integraci\u00f3 de Stripe Checkout amb Angular","datePublished":"2020-09-27T08:07:11+00:00","dateModified":"2024-01-10T18:17:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/"},"wordCount":379,"commentCount":0,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","keywords":["facturaci\u00f3","SPA","stripe-api"],"articleSection":["Angular","Technical Guides"],"inLanguage":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/","url":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/","name":"Integraci\u00f3 de Stripe Checkout amb Angular - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","datePublished":"2020-09-27T08:07:11+00:00","dateModified":"2024-01-10T18:17:16+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","width":1120,"height":660,"caption":"Stripe integration with Angular"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/ca\/stripe-checkout-integration-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Integraci\u00f3 de Stripe Checkout amb Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7160"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6529"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}