{"id":7289,"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":"2023-12-18T13:07:25","modified_gmt":"2023-12-18T12:07:25","slug":"stripe-checkout-integration-with-angular","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/","title":{"rendered":"Stripe Checkout Integration with Angular"},"content":{"rendered":"\n<p>In this article, we are going to learn how to integrate \u201cCheckout with <a rel=\"noreferrer noopener\" href=\"https:\/\/stripe.com\/\" target=\"_blank\">Stripe<\/a>\u201d in latest version of Angular (currently 10.1.4)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is&nbsp;Stripe?<\/h3>\n\n\n\n<p>Stripe is <a href=\"https:\/\/www.unimedia.tech\/bespoke-software-development\/?lang=de\">software <\/a>and APIs to accept payments, send payouts, and <a href=\"https:\/\/www.unimedia.tech\/engagierte-entwicklungsteams\/?lang=de\">manage <\/a>their business online<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Goal<\/h3>\n\n\n\n<p>We are going to learn, <\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>how to create a product in Stripe<\/li><li>integrate that product in Angular for hassle free checkout experience for our users.<\/li><\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Notes<\/h3>\n\n\n\n<p>Remember that, All the product related data &amp; keys in stripe we have to create in <em>\u201cTest Mode\u201d<\/em>  <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prerequisites<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>angular-cli version 10.1.3 or later<\/li><li>Nodejs version 10 or later<\/li><li>Basic knowledge of Angular is required<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Create an account on Stripe and Sign in and go to dashboard for the next step:<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/1jj5To3i2Jr8Sa8eAix1G1A.png\" alt=\" style=\"border: 1.5px solid #e3e8ee;border-radius: 4px\"><figcaption style=\"text-align:center\"><strong>Stripe Dashboard<\/strong><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\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\">Create a product<\/a> &amp; save the priceId for later use in&nbsp;Angular<\/h4>\n\n\n\n<p><\/p>\n\n\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=\" style=\"border: 1.5px solid #e3e8ee;border-radius: 4px\"><figcaption style=\"text-align:center\"><strong>Create a&nbsp;product<\/strong><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\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>Copy Price&nbsp;ID<\/strong><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Create an Angular starter application using Angular&nbsp;CLI<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ng new angular-stripe --style=scss<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4. Install Stripe js using&nbsp;NPM:<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i @stripe\/stripe-js<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">5. Create components =&gt; Product and Successful Transaction and Failed Transaction<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ng generate component product\nng generate component success\nng generate component failure<\/code><\/pre>\n\n\n\n<p><strong>ProductComponent<\/strong>: Where we show product details<\/p>\n\n\n\n<p><strong>SuccessComponent<\/strong>: Where we show success message<\/p>\n\n\n\n<p><strong>FailureComponent<\/strong>: Where we show failure message<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">6. Now, we will add the routes for components that has been created<\/h4>\n\n\n\n<p><\/p>\n\n\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>File<\/strong>: app.module.ts<\/figcaption><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\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>File<\/strong>: app.component.html<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">7. Generate Publishable Key for fetching the stripe interface<\/h4>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/stripe.com\/docs\/keys\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Generate the Publishable Key<\/a> from Stripe Dashboard =&gt; Developers =&gt; keys<\/p>\n\n\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">8. Set the generated API keys as environment variables for later use<\/h4>\n\n\n\n<p><\/p>\n\n\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>File<\/strong>: environment.ts<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">9. Create Product Data Variables in ProductComponent to use them in Product UI<\/h4>\n\n\n\n<p><em>product <\/em>object will be used in the product template for UI<\/p>\n\n\n\n<p><em>priceId <\/em>will be used while redirecting user for the checkout<\/p>\n\n\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\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\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>File<\/strong>: product.component.html<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">10. Create <em>checkout&nbsp;<\/em>method&nbsp;for redirecting user to Stripe checkout page<\/h4>\n\n\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\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\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>Demo<\/strong><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Full Code<\/strong> is available <a href=\"https:\/\/github.com\/unimedia-technology\/angular-stripe\" target=\"_blank\" rel=\"noreferrer noopener\">here <\/a>for the reference.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/unimedia-technology.github.io\/angular-stripe\" target=\"_blank\">Click here<\/a> to see the demo to try.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Unimedia Technology<\/h3>\n\n\n\n<p>Here at <a href=\"https:\/\/www.unimedia.tech\/?lang=de\">Unimedia Technology<\/a> we have a team of <strong>Angular Developers<\/strong> that can develop your most challenging Web Dashboards and Web apps. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Integrate Checkout with Stripe and Angular<\/p>\n","protected":false},"author":6,"featured_media":6530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,219],"tags":[],"class_list":["post-7289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-de","category-technical-guides-de"],"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>Stripe Checkout Integration with 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\/de\/stripe-checkout-integration-with-angular\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stripe Checkout Integration with Angular\" \/>\n<meta property=\"og:description\" content=\"Integrate Checkout with Stripe and Angular\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/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=\"2023-12-18T12:07:25+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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Stripe Checkout Integration with 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\/de\/stripe-checkout-integration-with-angular\/","og_locale":"de_DE","og_type":"article","og_title":"Stripe Checkout Integration with Angular","og_description":"Integrate Checkout with Stripe and Angular","og_url":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:07:25+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":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Stripe Checkout Integration with Angular","datePublished":"2020-09-27T08:07:11+00:00","dateModified":"2023-12-18T12:07:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/"},"wordCount":120,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Stripe-integration-with-Angular-1-4.png","articleSection":["Angular","Technical Guides"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/","url":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/","name":"Stripe Checkout Integration with Angular - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:07:25+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/stripe-checkout-integration-with-angular\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/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\/de\/stripe-checkout-integration-with-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Stripe Checkout Integration with Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/#\/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\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/wp-json\/wp\/v2\/posts\/7289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7289"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7289\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6530"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}