Custom Stripe Checkout
Last updated
Last updated
If you have a Firebase project that is e-commerce or another web app that needs to manage online payments and you’re using Stripe as a credit card payment processor, you may need that a user will be capable of setting by default a credit card in this app.
When a user arrives at your app and signs up, this runs the function addNewUserToStripe that was previously installed in your backend app from Function Store. This function will create a new Stripe customer associated with the new user, and store its info in a Firestore collection.
If the user decides to purchase something from your app, he needs to add a card that will be reusable for future purchases. As it is an action that contains private and sensitive user information, it must be carried out taking into consideration and complying with the highest security standards. In Function Store we already have a couple of functions that make this work easier for you.
When a user adds the card info, this runs the function createStripeSetupIntent. This function goes to Firestore and recovers the Stripe customer ID of the user that was previously stored in the Firestore collection. Once the customer is obtained, it is used to create a SetupIntent in Stripe. This action returns a client secret. The client secret can be used to complete payment setup from your frontend. It should not be stored, logged, embedded in URLs, or exposed to anyone other than the customer.
Since you have the client secret in the frontend of your app, you’re going to use stripe.confirmCardSetup. When called, it will confirm the SetupIntent with the card data your user provides. With all the previous procedures, you have already set the user in Stripe a card as their default payment method.
If you need to have a confirmation from Stripe that you set the user a card as their default payment method to commit some actions in your backend, we have another function in functions.store that may suit you: stripeWebhook.
To use this function, you need to create a webhook in Stripe that calls the function stripeWebhook in your backend when a payment method is attached. The stripeWebhook function handles webhook events sent by Stripe. It will verify the request was signed by Stripe, and then the events will be translated into GCP Pub/Sub events. Finally, you can run your custom function when this Pub/Sub is triggered.
Using these functions that we provide from Function Store, we cover a real use case that aims to save and optimize the user's payment credentials for future payments, which means that the payment method is configured correctly for any scenario.
