Stripe Checkout with Firebase Functions and Angular in 20 minutes

Let's go serverless for Stripe!
We'll build an Angular 11 storefront connected to a Cloud Firestore database and Firebase Functions let Stripe process payments from credit cards, Google Pay, and Apple Pay
Code: gitlab.com/ryanlogsdon/angula...

[@KumarSaptam]

A very nice and descriptive tutorial. Thanks a lot. Looking for more great videos.

[@d-i-ry]

thank you!!

[@donaloconnell69]

Amazing tutorial and the link to the code was very helpful, thank you this is exactly what I have been looking for over last couple of weeks. Great channel, subbed.

[@d-i-ry]

thanks, that really means a lot!

[@thelavishcoder2553]

Pretty awesome! Keep it up!

[@d-i-ry]

Thanks!

[@heliogonzalesrivas3695]

Hello @D-I-Ry, really good tutorial. Thank you for sharing your knowledge It helps a lot. I would like to ask a question. It's about having orders. I have an application that when I click the button to buy my order is stored in Firebase, but I would like to pass the ID of the order to integrate Stripe checkout, as you can see the ID is only generated when I click on the button and I am having trouble getting the specific ID for a specific order and moving to the strip because it is generated right at the moment I click the button. I would greatly appreciate any ideas.

[@d-i-ry]

Hi Helio, thank you very much! Here are the 2 places I'd guess a solution would work for you... 1) (I think this is the best option) In your [salesPage].component.ts file, inside the checkoutFirebase() function (this was home.component.ts for me), there's a block of code called stripe.redirectToCheckout(). Inside the ".then()" section, I'd make another call to Firebase to update the given document with the order ID. 2) when you assign a value to the stripeStatus variable in ngOnInit(), if it equals 'success', you can update your Firebase doc here. As a 3rd option, you could generate an order ID from the start of the user entering your page, but this won't allow you to use sequential order numbers, so I'm not a fan of this option. Not sure if either options 1 or 2 will work for you, but I hope this helps!

[@heliogonzalesrivas3695]

Hi @@d-i-ry Thank you very much for your response and advice. I will try as soon as possible and as usual as in the videos clear explanation

[@user-vk1cp3lx2k]

Hello Ryan, I wanted to raise two points. Firstly, how would you go about handling the payment? For instance, lets say after a successful payment, add the item that your user purchased to his list of items(in a different firestore collection). For a failed/cancelled request, no such change should be made. Secondly, since the documentation on stripe/angular is very scarce, you might want to explain/present the specific stripe commands/arguments a little more in depth(for example in the cloud function, some arguments are required and it will fail if you don't define them) In any case, code is very clear and easy to follow even for us who are less experienced. Thank you very much

[@d-i-ry]

Thank you, I'm really glad the code was easy to follow! For your 1st question, you'd need to handle this action on the server, not in the Angular app. This is to protect your database from the client (and it's the same reason that Stripe forces us to process payments on the server, away from the client side). So after the Stripe function returns successfully, you'd have your code call another function that writes to your other collection. To do that, you need to create a "service account" in Firebase. Go to the project in Firebase > click the gear icon > Project Settings > Service Accounts tab. I just made a video on another topic that uses a service account to post data to my collections. Here's the video: kzbin.info/www/bejne/hoqXqp2gmLmbpdU&ab_channel=D-I-Ry and it's at the 11 minute mark.

[@d-i-ry]

Thanks for the Stripe feedback, too! I'll make sure to explain that part of the code in depth for my next Stripe project.

[@d-i-ry]

Thinking about this a bit more, I don't believe you'll need a service account when you're using Firebase Functions. Your Firebase Functions should have full access to your Firestore collections. But if you want to do any testing from your local computer or a self-hosted server, you'll need the service account.

[@user-vk1cp3lx2k]

@@d-i-ry Well I assume the service account is only necessary for passing "mock" requests to the new function. Since in firebase functions you use that "admin" tag that should circumvent any rules defined for any collection. Anyway I think I understand and ill try to implement tomorrow morning. Thank you for responding, its really helpful. I will definitely check out your other video as well.

[@d-i-ry]

@@user-vk1cp3lx2k let me know how it turns out. And you're pretty spot-on about service accounts. They're for when you want a write a program or script to fully automate parts of your process. A service account acts as the credentials for a stand-alone program (as opposed to writing the Angular app where a user enters their own credentials to gain access)

[@The0posthuma]

Could you do a video swapping firebase with aws amplify?

[@d-i-ry]

Hi Carl, I actually stopped using AWS, so I don't know how to use Amplify, sorry!

[@sergeykrivoruchko9696]

thank you from Ukraine )You helped me a lot

[@d-i-ry]

Hey Sergey, glad I could help!

[@reeteshsuggula8828]

Hey i liked the video , could you please do a video on CORS issue after deploying it

[@d-i-ry]

Hey Reetech, I'm glad you liked it! When you're getting CORS issues, what's your environment look like?

[@reeteshsuggula8828]

@@d-i-ry i get cors error with allow control allow origin error. i have deployed the angular app to firebase hosting so when clicking on checkout button i get cors issue. i tried adding cors package to firebase functions as a response it would be helpful if get to know how to solve

[@d-i-ry]

@@reeteshsuggula8828 hummm.... I actually deploy my projects to virtual machines, not to Firebase. can you paste the exact error and I'll try to recreate it

[@witoldspychaa8843]

Hi, D-I-Ry is this tutorial still good for angular 13+ I tried some time ago but it didn't work. Great video btw.

[@d-i-ry]

Thanks a lot!

[@MatheusCabraldosSantos]

how we can calculate shipping? thx for the video

[@d-i-ry]

Hi Matheus, here you go stripe.com/docs/payments/checkout/shipping

[@wonderram234]

I get a cors issue with this. Was anyone able to fix this issue? thanks

[@d-i-ry]

Hey DevGranil, can you post your exact error message? I’ve gotten through the cors issue a bunch of times

[@wonderram234]

@@d-i-ry Hi D-I-Ry thanks for the reply. I'm not getting the error anymore - I deployed the code with --only functions which seems to have fixed this issue - weird. Great video btw. Quick question have you made a video on recurring payments? I'm trying to implement a subscription based model for my product.

[@d-i-ry]

@@wonderram234 Hey DevGranil, I haven't. Last time I played with Stripe, they really updated the API, so I hope it's easier to set up. When I made some recurring payment code, I remember that taking me a few weeks.

[@sapito169]

why is it so difficult to understand that serverless is not serverless and it was an investment of marketing department

[@d-i-ry]

Well… you get the benefits of running your own server without having to maintain it, and it’s a lot cheaper than hiring a person to do that job, so yeah, it’s part marketing spin, but there’s a good part that saves money and time :)

[@mattlion321]

Hi! I have a couple of errors while following your tutorial and I am in a need of help! Does it mean that my port is not connecting to the stripeCheckout which throws an error? Here are the errors that I got: zone.js:1523 POST localhost:8102/assignment-27c49/us-central1/stripeCheckout net::ERR_FAILED core.js:6456 ERROR Error: internal

[@d-i-ry]

Hi @Hey Matthew, I'm not finding anything when I search for those errors, so here's what I would do (it's going to take a little work, but I promise it'll show you the problem)... First, just download the code I posted gitlab.com/ryanlogsdon/angular-and-stripe-checkout-integration and run it. If that also gives you an error, it has to do with your computer's configuration. If this is the case, just tell me the new error, and we'll research it together. But if that code does work.... Do a file comparison of each of the files you wrote versus the files on my gitlab link. This takes a little time, but you can compare them in a few ways.. 1) Easiest: download Beyond Compare, and run a folder-to-folder comparison of your project to mine. It will automatically tell you where there are any differences. or 2) Harder: use VS Code; put your folder and mine inside of the same parent folder; then right click on one of your files & choose "select for compare", then choose my corresponding file, right-click and choose "compare with selected". In any case, when you get multiple errors in files that we didn't write (like zone.js and core.js), that usually means it's a very small TypeScript bug ...like a missing type for a variable I hope this helps, Ryan

[@mattlion321]

@@d-i-ry Hi Ryan! I have manage to solve the error! This is due to the stripe api key where I cant use a public key but however it works when I switch it to a secret api key from the stripe dashbord and IT WORKS!!! :). Thank you so much for your help too, as it helps me to find the root cause of the error :)

[@mattlion321]

Hi Ryan, so sorry for the troubles! Just to ask, if there is a sub-collection in the firebase (for example: the date of purchase and quantity of the product). Does this mean our query codes in the index.js have to retrieve the firebase sub-collection out so that stripeCheckout can be read it?. //query codes calling the firebase collection but not the sub-collection var db = admin.firestore(); var querySnapshot = await db.collection('clothes').where('id', '==', productId).get(); if (querySnapshot.docs.length > 0){ var doc = querySnapshot.docs[0]; price = doc.data().price; name = doc.data().name; image = doc.data().image I wanted to get the sub-collection of Date and item quantity. Clothes [collection] id price name image Testing [sub-collection] Date Quantity I got the error of "Missing required param: line_items[0][quantity] while trying it". Hope you can help! :) Thank you Ryan!

[@d-i-ry]

@@mattlion321 Hi Matthew, yep, your assumption is exactly right. Firebase calls their queries "flat" which is a weird way of saying that if you have docuements within a given doc, you need to make a query at the "deeper" level. Without explicitly making the deep query, you'll only return the data on the current query level of your doc

[@mattlion321]

@@d-i-ry Hey Ryan! Sorry to trouble you, I have tried to retrieve a sub-collection (deep level from the firebase) in the index.js but I can't seem to get it. Here is the code that I have tried to use: var db = admin.firestore(); var querySnapshot = await db.collection('loans').where('id', '==', productId).get(); // Read subcollection '/loans//items' var query = await db.collection('loans/' + productId + '/items').get().then(collection => { items = []; // Empty array collection.forEach(doc => { let item = new Item(doc.id, doc.data().quantity); console.log(item) items.push(item); console.log('test'+ items); }) return query; }); console.log(querySnapshot +' this is the query'); console.log('this is the ' + query); if (querySnapshot.docs.length > 0){ var doc = querySnapshot.docs[0]; //console.log(doc.data().line_items + ' this is the doc'); price = doc.data().price; username = doc.data().username; duedate = doc.data().duedate; overdue = doc.data().overdue; status = doc.data().status; var docc = query.docs[0]; items = docc.data().items; In my firebase here is a hierachy of it: Clothes [collection] id price name image Items [sub-collection] Item Name [docs id] Quantity [field] Hope you can help! Thank you