Learn how to accept cryptocurrency payments, like $BTC or $ETH, in your webapp with Coinbase Commerce. https://fireship.io/lessons/crypto-payments-web-firebase

💰 Free money! Get $10 when you use this link https://fireship.page.link/coinbase

*This video is not sponsored and I had no contact with Coinbase

Resources:

Coinbase Commerce https://commerce.coinbase.com
Cloud Functions Docs https://firebase.google.com/docs/functions
Source code: https://github.com/fireship-io/coinbase-cloud-functions

00:00 Why accept crypto?
00:32 How crypto payments work
01:55 Coinbase commerce setup
03:17 Create Charges
05:49 React with Webhooks

#crypto #bitcoin #tutorial

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:12:22.859Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
72f934ba-f346-42fb-a84f-8146f0993fc5
7c3fa6262fa74d2e21de87be0bafa51cef2dfc8a99d383e364712aeb966ca254
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
As of last week, a Tesla can be paid for with Bitcoin.
As of this week, all FireShip courses can be paid for with Bitcoin.
And as of the end of this video, your product can also be paid for with Bitcoin.
I've always been pretty skeptical of crypto, but the more I work with it as a developer and the more the Fed runs the money printer, the more I like it.
But most importantly, I wanna give a customer's choice.
If the customer wants to pay with Bitcoin, Ethereum, Litecoin, or whatever, they should have that option.
In today's video, you'll learn how to implement cryptocurrency payments on web using the Coinbase Commerce API, giving you the ability to receive crypto payments in a variety of different formats.
First of all, how does a cryptocurrency payment work?
Well, unlike a credit card payment, which is processed by a central authority, a crypto payment gets broadcast to a peer to peer network around the world, where miners compete with their computing power to confirm that transaction on the blockchain.
That process can take time, maybe 10 minutes or so, before the transaction is fully earn.
On Coinbase Commerce, the first thing you'll do is create a charge, which is more like a payment intent.
It has an amount and description and can be denominated in US dollars.
When a charge is created, it has a lifespan of 1 hour, and Coinbase in the background will monitor the payment networks looking for a payment to be confirmed on this charge.
The charge also provides a URL hosted by Coinbase where the user can either pay with crypto or their Coinbase account.
Now after the user submits their payment, Coinbase will fire a webhook that can notify your server that the charge is now pending.
It's at that point point that you can notify the customer that the payment has been received, and we're just waiting for the final confirmation on the blockchain before we ship it out.
At some point in the future, Coinbase will see the transaction is confirmed and will send another webhook to your server, notifying you that everything is good to go, unless something went wrong.
Like, a user may have overpaid or underpaid because crypto is so volatile, or maybe they accidentally made multiple payments on the same charge.
In which case, you'll need to manually resolve the charge.
Things like that shouldn't happen often, but those are just some of the caveats to be aware of when working with crypto.
In addition to Coinbase Commerce, you might also look into BitPay or CoinGate as alternatives.
Or if you want to use a currency that's designed specifically for digital transactions, you might want to look into fame like Kin.
To get started, the first thing you'll need is to own a little bit of crypto.
I'm not saying that to try to pump Bitcoin or anything, but because Coinbase Commerce doesn't actually have a sandbox for testing payments.
So in order to test your implementation, you'll need to have a wallet with some crypto in it.
The easiest way to do that is by setting up a Coinbase account.
And if you use my referral link in the description, you and I both will get a $10 referral reward.
And this video is not sponsored by the way, I actually use coin base commerce for the implementation on FireShip IO.
In any case, the next thing you'll need is a Coinbase Commerce account.
When you create an account, it will automatically generate a wallet for different cryptocurrencies like Ethereum, Bitcoin, Litecoin, etcetera, allowing other users to send you money on these respective blockchains.
On the dashboard, you'll get a breakdown of all your payments.
And one thing that's worth pointing out is that if you have a static product where the pricing doesn't change, you can create a checkout and then embed it directly in your front end application without having to write any client side code.
But in this demo, we'll do it the more developer oriented way by creating a charge that can handle dynamic pricing and data.
To add Coinbase to a back end server, we'll need to go to the settings tab and create an API key.
This key is how you access your Coinbase account from a server, and it should never be exposed in your front end code.
But now, we need a server, and my favorite way to get run into production quickly is with Firebase Cloud Functions.
Sign up for a Firebase account and install the Firebase command line tools, then run firebase init functions from the command line.
That'll give us a Node.
Js project in the functions directory.
Go ahead and CD into it, then we can install the Coinbase Commerce SDK for load.
And at the same time, install cores or cross origin resource sharing so we can make requests to this function from a front end application.
In in the JavaScript code, we can import the coinbasecommerce client as well as resources.
The client is used to identify our project with coinbase, which we do by calling client and knit with our secret API key.
Now, there are many different things you can do with the API, but we're interested in creating a charge, which is available from the resources object.
From there, we can start defining our cloud function, which is just an HTTP endpoint that we can call from any application.
To call it from the browser, we'll need to enable CORS, which we can do by importing the CORS library and setting the origin to the wildcard character.
Then we can pass the request and response objects to CORS and define the business logic inside of its callback.
Now, normally, you probably get some data from the request like a product ID and then go and fetch that product from a database somewhere.
But in this case, we'll define our charge data as just a generic widget that's priced list at $9.99.
One useful tip here is that you can store metadata like a user ID if you want to reference the user in the future when changes happen to the charge.
Then to create a charge on Coinbase, we simply call await charge create with that data, and then send it back down to the client as the response.
Once that charge is created, The user then has 1 hour to make their payment.
Let's go ahead and see the charge in action by running firebase serve to serve the function on local host 5000.
Now, let's build a front end application with vanilla JavaScript in this index dot HTML file, and you can get all the source code for this project on GitHub, by the way.
The HTML just has a button that says buy something with crypto.
Below the button, we have a script that makes a reference to the button, and when it's clicked, it will fire off a request do the cloud function endpoint using the fetch API and will convert its response to JSON, which contains all the charge data from Coinbase.
There's a bunch of useful data on it, like the current change rates in the entire timeline of the charge itself.
But to get the customer to pay, we need to show them the hosted URL, which contains the addresses and QR codes to our crypto wallets and allows the user to connect their own Coinbase account if they prefer.
If the user decides not to pay, the charge will expire after an hour.
Earn.
But if they do pay, we then need to listen to webhooks from Coinbase.
When the payment is initially sent but not confirmed, we'll get a charge urge pending webhook.
But in order to listen to webhooks, we need to have a URL that's available on the Internet that Coinbase can send data to.
Go back to the settings panel on Coinbase Commerce and click the button to show shared secret under webhook subscriptions.
Whenever Coinbase send a webhook to our server, it signs the request.
And we can use this secret to verify that the request is valid.
No matter what API you're working with, it's always very important to validate the signature because, otherwise, any hacker could then pretend to be coin based and send webhooks to your server and you wouldn't know the difference.
Back in our code, we'll set up a second HTTP Cloud function called webhook handler.
The first thing it'll do is grab the raw body of the request, which is just the request in a binary format, along with the signature, which is contained in a header on the request.
And lastly, we'll make a reference to the webhook secret that we got from the Coinbase dashboard.
From there, we can set up a try catch block to catch any errors that might happen when verifying the signature.
We can pass these these three values to webhook verify event body, which verifies that this request actually did come from Coinbase.
It returns us with the event data from Coinbase, which itself will have a type, like pending, confirmed, or failed, and also contains data about the current state of the charge, which you'll wanna use to implement your own business logic.
On Fire Ship, for example, I immediately grant access to pro content when the charge is pending by updating a database.
But if the charge fails or becomes unresolved for whatever reason, then I revoke access and take steps to resolve it.
The logic here is highly only dependent on whatever it is you're selling.
If you sell a physical product, for example, you might want to print a shipping label after the charge is confirmed.
I I think we're about ready to ship this baby off to production.
Go ahead and run firebase deploy from the command line, which will give you a URL for the webhook handler.
Now go back to the Coinbase dashboard and set up that URL as your webhook subscription.
Congratulations.
You can now accept crypto payments from your customers.
I'm gonna go ahead and wrap things affair.
Make sure to like and subscribe and consider supporting this content by buying a lifetime membership with crypto or any one of my individual courses.
Thanks for watching, and I will see you in the next one.

Speaker 0: As of last week, a Tesla can be paid for with Bitcoin. As of this week, all FireShip courses can be paid for with Bitcoin. And as of the end of this video, your product can also be paid for with Bitcoin. I've always been pretty skeptical of crypto, but the more I work with it as a developer and the more the Fed runs the money printer, the more I like it. But most importantly, I wanna give a customer's choice.

If the customer wants to pay with Bitcoin, Ethereum, Litecoin, or whatever, they should have that option. In today's video, you'll learn how to implement cryptocurrency payments on web using the Coinbase Commerce API, giving you the ability to receive crypto payments in a variety of different formats. First of all, how does a cryptocurrency payment work? Well, unlike a credit card payment, which is processed by a central authority, a crypto payment gets broadcast to a peer to peer network around the world, where miners compete with their computing power to confirm that transaction on the blockchain. That process can take time, maybe 10 minutes or so, before the transaction is fully earn.

On Coinbase Commerce, the first thing you'll do is create a charge, which is more like a payment intent. It has an amount and description and can be denominated in US dollars. When a charge is created, it has a lifespan of 1 hour, and Coinbase in the background will monitor the payment networks looking for a payment to be confirmed on this charge. The charge also provides a URL hosted by Coinbase where the user can either pay with crypto or their Coinbase account. Now after the user submits their payment, Coinbase will fire a webhook that can notify your server that the charge is now pending.

It's at that point point that you can notify the customer that the payment has been received, and we're just waiting for the final confirmation on the blockchain before we ship it out. At some point in the future, Coinbase will see the transaction is confirmed and will send another webhook to your server, notifying you that everything is good to go, unless something went wrong. Like, a user may have overpaid or underpaid because crypto is so volatile, or maybe they accidentally made multiple payments on the same charge. In which case, you'll need to manually resolve the charge. Things like that shouldn't happen often, but those are just some of the caveats to be aware of when working with crypto.

In addition to Coinbase Commerce, you might also look into BitPay or CoinGate as alternatives. Or if you want to use a currency that's designed specifically for digital transactions, you might want to look into fame like Kin. To get started, the first thing you'll need is to own a little bit of crypto. I'm not saying that to try to pump Bitcoin or anything, but because Coinbase Commerce doesn't actually have a sandbox for testing payments. So in order to test your implementation, you'll need to have a wallet with some crypto in it.

The easiest way to do that is by setting up a Coinbase account. And if you use my referral link in the description, you and I both will get a $10 referral reward. And this video is not sponsored by the way, I actually use coin base commerce for the implementation on FireShip IO. In any case, the next thing you'll need is a Coinbase Commerce account. When you create an account, it will automatically generate a wallet for different cryptocurrencies like Ethereum, Bitcoin, Litecoin, etcetera, allowing other users to send you money on these respective blockchains.

On the dashboard, you'll get a breakdown of all your payments. And one thing that's worth pointing out is that if you have a static product where the pricing doesn't change, you can create a checkout and then embed it directly in your front end application without having to write any client side code. But in this demo, we'll do it the more developer oriented way by creating a charge that can handle dynamic pricing and data. To add Coinbase to a back end server, we'll need to go to the settings tab and create an API key. This key is how you access your Coinbase account from a server, and it should never be exposed in your front end code.

But now, we need a server, and my favorite way to get run into production quickly is with Firebase Cloud Functions. Sign up for a Firebase account and install the Firebase command line tools, then run firebase init functions from the command line. That'll give us a Node. Js project in the functions directory. Go ahead and CD into it, then we can install the Coinbase Commerce SDK for load.

And at the same time, install cores or cross origin resource sharing so we can make requests to this function from a front end application. In in the JavaScript code, we can import the coinbasecommerce client as well as resources. The client is used to identify our project with coinbase, which we do by calling client and knit with our secret API key. Now, there are many different things you can do with the API, but we're interested in creating a charge, which is available from the resources object. From there, we can start defining our cloud function, which is just an HTTP endpoint that we can call from any application.

To call it from the browser, we'll need to enable CORS, which we can do by importing the CORS library and setting the origin to the wildcard character. Then we can pass the request and response objects to CORS and define the business logic inside of its callback. Now, normally, you probably get some data from the request like a product ID and then go and fetch that product from a database somewhere. But in this case, we'll define our charge data as just a generic widget that's priced list at $9.99. One useful tip here is that you can store metadata like a user ID if you want to reference the user in the future when changes happen to the charge.

Then to create a charge on Coinbase, we simply call await charge create with that data, and then send it back down to the client as the response. Once that charge is created, The user then has 1 hour to make their payment. Let's go ahead and see the charge in action by running firebase serve to serve the function on local host 5000. Now, let's build a front end application with vanilla JavaScript in this index dot HTML file, and you can get all the source code for this project on GitHub, by the way. The HTML just has a button that says buy something with crypto.

Below the button, we have a script that makes a reference to the button, and when it's clicked, it will fire off a request do the cloud function endpoint using the fetch API and will convert its response to JSON, which contains all the charge data from Coinbase. There's a bunch of useful data on it, like the current change rates in the entire timeline of the charge itself. But to get the customer to pay, we need to show them the hosted URL, which contains the addresses and QR codes to our crypto wallets and allows the user to connect their own Coinbase account if they prefer. If the user decides not to pay, the charge will expire after an hour. Earn.

But if they do pay, we then need to listen to webhooks from Coinbase. When the payment is initially sent but not confirmed, we'll get a charge urge pending webhook. But in order to listen to webhooks, we need to have a URL that's available on the Internet that Coinbase can send data to. Go back to the settings panel on Coinbase Commerce and click the button to show shared secret under webhook subscriptions. Whenever Coinbase send a webhook to our server, it signs the request.

And we can use this secret to verify that the request is valid. No matter what API you're working with, it's always very important to validate the signature because, otherwise, any hacker could then pretend to be coin based and send webhooks to your server and you wouldn't know the difference. Back in our code, we'll set up a second HTTP Cloud function called webhook handler. The first thing it'll do is grab the raw body of the request, which is just the request in a binary format, along with the signature, which is contained in a header on the request. And lastly, we'll make a reference to the webhook secret that we got from the Coinbase dashboard.

From there, we can set up a try catch block to catch any errors that might happen when verifying the signature. We can pass these these three values to webhook verify event body, which verifies that this request actually did come from Coinbase. It returns us with the event data from Coinbase, which itself will have a type, like pending, confirmed, or failed, and also contains data about the current state of the charge, which you'll wanna use to implement your own business logic. On Fire Ship, for example, I immediately grant access to pro content when the charge is pending by updating a database. But if the charge fails or becomes unresolved for whatever reason, then I revoke access and take steps to resolve it.

The logic here is highly only dependent on whatever it is you're selling. If you sell a physical product, for example, you might want to print a shipping label after the charge is confirmed. I I think we're about ready to ship this baby off to production. Go ahead and run firebase deploy from the command line, which will give you a URL for the webhook handler. Now go back to the Coinbase dashboard and set up that URL as your webhook subscription.

Congratulations. You can now accept crypto payments from your customers. I'm gonna go ahead and wrap things affair. Make sure to like and subscribe and consider supporting this content by buying a lifetime membership with crypto or any one of my individual courses. Thanks for watching, and I will see you in the next one.
As of last week, a Tesla can be paid for with Bitcoin. As of this week, all FireShip courses can be paid for with Bitcoin. And as of the end of this video, your product can also be paid for with Bitcoin. I've always been pretty skeptical of crypto, but the more I work with it as a developer and the more the Fed runs the money printer, the more I like it. But most importantly, I wanna give a customer's choice. If the customer wants to pay with Bitcoin, Ethereum, Litecoin, or whatever, they should have that option. In today's video, you'll learn how to implement cryptocurrency payments on web using the Coinbase Commerce API, giving you the ability to receive crypto payments in a variety of different formats. First of all, how does a cryptocurrency payment work? Well, unlike a credit card payment, which is processed by a central authority, a crypto payment gets broadcast to a peer to peer network around the world, where miners compete with their computing power to confirm that transaction on the blockchain. That process can take time, maybe 10 minutes or so, before the transaction is fully earn. On Coinbase Commerce, the first thing you'll do is create a charge, which is more like a payment intent. It has an amount and description and can be denominated in US dollars. When a charge is created, it has a lifespan of 1 hour, and Coinbase in the background will monitor the payment networks looking for a payment to be confirmed on this charge. The charge also provides a URL hosted by Coinbase where the user can either pay with crypto or their Coinbase account. Now after the user submits their payment, Coinbase will fire a webhook that can notify your server that the charge is now pending. It's at that point point that you can notify the customer that the payment has been received, and we're just waiting for the final confirmation on the blockchain before we ship it out. At some point in the future, Coinbase will see the transaction is confirmed and will send another webhook to your server, notifying you that everything is good to go, unless something went wrong. Like, a user may have overpaid or underpaid because crypto is so volatile, or maybe they accidentally made multiple payments on the same charge. In which case, you'll need to manually resolve the charge. Things like that shouldn't happen often, but those are just some of the caveats to be aware of when working with crypto. In addition to Coinbase Commerce, you might also look into BitPay or CoinGate as alternatives. Or if you want to use a currency that's designed specifically for digital transactions, you might want to look into fame like Kin. To get started, the first thing you'll need is to own a little bit of crypto. I'm not saying that to try to pump Bitcoin or anything, but because Coinbase Commerce doesn't actually have a sandbox for testing payments. So in order to test your implementation, you'll need to have a wallet with some crypto in it. The easiest way to do that is by setting up a Coinbase account.
cryptocurrency
billing
gambling
banking
And if you use my referral link in the description, you and I both will get a $10 referral reward.
And this video is not sponsored by the way, I actually use coin base commerce for the implementation on FireShip IO. In any case, the next thing you'll need is a Coinbase Commerce account. When you create an account, it will automatically generate a wallet for different cryptocurrencies like Ethereum, Bitcoin, Litecoin, etcetera, allowing other users to send you money on these respective blockchains. On the dashboard, you'll get a breakdown of all your payments. And one thing that's worth pointing out is that if you have a static product where the pricing doesn't change, you can create a checkout and then embed it directly in your front end application without having to write any client side code.
cryptocurrency
billing
banking
revenue
gambling
earnings
But in this demo, we'll do it the more developer oriented way by creating a charge that can handle dynamic pricing and data. To add Coinbase to a back end server, we'll need to go to the settings tab and create an API key. This key is how you access your Coinbase account from a server, and it should never be exposed in your front end code. But now, we need a server, and my favorite way to get run into production quickly is with Firebase Cloud Functions. Sign up for a Firebase account and install the Firebase command line tools, then run firebase init functions from the command line. That'll give us a Node. Js project in the functions directory. Go ahead and CD into it, then we can install the Coinbase Commerce SDK for load. And at the same time, install cores or cross origin resource sharing so we can make requests to this function from a front end application. In in the JavaScript code, we can import the coinbasecommerce client as well as resources. The client is used to identify our project with coinbase, which we do by calling client and knit with our secret API key. Now, there are many different things you can do with the API, but we're interested in creating a charge, which is available from the resources object. From there, we can start defining our cloud function, which is just an HTTP endpoint that we can call from any application. To call it from the browser, we'll need to enable CORS, which we can do by importing the CORS library and setting the origin to the wildcard character.
Then we can pass the request and response objects to CORS and define the business logic inside of its callback. Now, normally, you probably get some data from the request like a product ID and then go and fetch that product from a database somewhere. But in this case, we'll define our charge data as just a generic widget that's priced list at $9.99. One useful tip here is that you can store metadata like a user ID if you want to reference the user in the future when changes happen to the charge. Then to create a charge on Coinbase, we simply call await charge create with that data, and then send it back down to the client as the response. Once that charge is created, The user then has 1 hour to make their payment. Let's go ahead and see the charge in action by running firebase serve to serve the function on local host 5000.
billing
Now, let's build a front end application with vanilla JavaScript in this index dot HTML file, and you can get all the source code for this project on GitHub, by the way. The HTML just has a button that says buy something with crypto. Below the button, we have a script that makes a reference to the button, and when it's clicked, it will fire off a request do the cloud function endpoint using the fetch API and will convert its response to JSON, which contains all the charge data from Coinbase. There's a bunch of useful data on it, like the current change rates in the entire timeline of the charge itself. But to get the customer to pay, we need to show them the hosted URL, which contains the addresses and QR codes to our crypto wallets and allows the user to connect their own Coinbase account if they prefer.
billing
cryptocurrency
If the user decides not to pay, the charge will expire after an hour. Earn. But if they do pay, we then need to listen to webhooks from Coinbase.
When the payment is initially sent but not confirmed, we'll get a charge urge pending webhook. But in order to listen to webhooks, we need to have a URL that's available on the Internet that Coinbase can send data to. Go back to the settings panel on Coinbase Commerce and click the button to show shared secret under webhook subscriptions. Whenever Coinbase send a webhook to our server, it signs the request. And we can use this secret to verify that the request is valid. No matter what API you're working with, it's always very important to validate the signature because, otherwise, any hacker could then pretend to be coin based and send webhooks to your server and you wouldn't know the difference.
cryptocurrency
security
Back in our code, we'll set up a second HTTP Cloud function called webhook handler. The first thing it'll do is grab the raw body of the request, which is just the request in a binary format, along with the signature, which is contained in a header on the request. And lastly, we'll make a reference to the webhook secret that we got from the Coinbase dashboard. From there, we can set up a try catch block to catch any errors that might happen when verifying the signature. We can pass these these three values to webhook verify event body, which verifies that this request actually did come from Coinbase. It returns us with the event data from Coinbase, which itself will have a type, like pending, confirmed, or failed, and also contains data about the current state of the charge, which you'll wanna use to implement your own business logic.
On Fire Ship, for example, I immediately grant access to pro content when the charge is pending by updating a database. But if the charge fails or becomes unresolved for whatever reason, then I revoke access and take steps to resolve it. The logic here is highly only dependent on whatever it is you're selling. If you sell a physical product, for example, you might want to print a shipping label after the charge is confirmed. I I think we're about ready to ship this baby off to production. Go ahead and run firebase deploy from the command line, which will give you a URL for the webhook handler.
shipping
patents
copyright licenses
commerce
Now go back to the Coinbase dashboard and set up that URL as your webhook subscription. Congratulations. You can now accept crypto payments from your customers. I'm gonna go ahead and wrap things affair. Make sure to like and subscribe and consider supporting this content by buying a lifetime membership with crypto or any one of my individual courses. Thanks for watching, and I will see you in the next one.
cryptocurrency
As of last week, a Tesla can be paid for with Bitcoin. As of this week, all FireShip courses can be paid for with Bitcoin. And as of the end of this video, your product can also be paid for with Bitcoin. I've always been pretty skeptical of crypto, but the more I work with it as a developer and the more the Fed runs the money printer, the more I like it. But most importantly, I wanna give a customer's choice. If the customer wants to pay with Bitcoin, Ethereum, Litecoin, or whatever, they should have that option. In today's video, you'll learn how to implement cryptocurrency payments on web using the Coinbase Commerce API, giving you the ability to receive crypto payments in a variety of different formats. First of all, how does a cryptocurrency payment work? Well, unlike a credit card payment, which is processed by a central authority, a crypto payment gets broadcast to a peer to peer network around the world, where miners compete with their computing power to confirm that transaction on the blockchain. That process can take time, maybe 10 minutes or so, before the transaction is fully earn. On Coinbase Commerce, the first thing you'll do is create a charge, which is more like a payment intent. It has an amount and description and can be denominated in US dollars. When a charge is created, it has a lifespan of 1 hour, and Coinbase in the background will monitor the payment networks looking for a payment to be confirmed on this charge. The charge also provides a URL hosted by Coinbase where the user can either pay with crypto or their Coinbase account. Now after the user submits their payment, Coinbase will fire a webhook that can notify your server that the charge is now pending. It's at that point point that you can notify the customer that the payment has been received, and we're just waiting for the final confirmation on the blockchain before we ship it out. At some point in the future, Coinbase will see the transaction is confirmed and will send another webhook to your server, notifying you that everything is good to go, unless something went wrong. Like, a user may have overpaid or underpaid because crypto is so volatile, or maybe they accidentally made multiple payments on the same charge. In which case, you'll need to manually resolve the charge. Things like that shouldn't happen often, but those are just some of the caveats to be aware of when working with crypto. In addition to Coinbase Commerce, you might also look into BitPay or CoinGate as alternatives. Or if you want to use a currency that's designed specifically for digital transactions, you might want to look into fame like Kin. To get started, the first thing you'll need is to own a little bit of crypto. I'm not saying that to try to pump Bitcoin or anything, but because Coinbase Commerce doesn't actually have a sandbox for testing payments. So in order to test your implementation, you'll need to have a wallet with some crypto in it. The easiest way to do that is by setting up a Coinbase account. And if you use my referral link in the description, you and I both will get a $10 referral reward. And this video is not sponsored by the way, I actually use coin base commerce for the implementation on FireShip IO. In any case, the next thing you'll need is a Coinbase Commerce account. When you create an account, it will automatically generate a wallet for different cryptocurrencies like Ethereum, Bitcoin, Litecoin, etcetera, allowing other users to send you money on these respective blockchains. On the dashboard, you'll get a breakdown of all your payments. And one thing that's worth pointing out is that if you have a static product where the pricing doesn't change, you can create a checkout and then embed it directly in your front end application without having to write any client side code. But in this demo, we'll do it the more developer oriented way by creating a charge that can handle dynamic pricing and data. To add Coinbase to a back end server, we'll need to go to the settings tab and create an API key. This key is how you access your Coinbase account from a server, and it should never be exposed in your front end code. But now, we need a server, and my favorite way to get run into production quickly is with Firebase Cloud Functions. Sign up for a Firebase account and install the Firebase command line tools, then run firebase init functions from the command line. That'll give us a Node. Js project in the functions directory. Go ahead and CD into it, then we can install the Coinbase Commerce SDK for load. And at the same time, install cores or cross origin resource sharing so we can make requests to this function from a front end application. In in the JavaScript code, we can import the coinbasecommerce client as well as resources. The client is used to identify our project with coinbase, which we do by calling client and knit with our secret API key. Now, there are many different things you can do with the API, but we're interested in creating a charge, which is available from the resources object. From there, we can start defining our cloud function, which is just an HTTP endpoint that we can call from any application. To call it from the browser, we'll need to enable CORS, which we can do by importing the CORS library and setting the origin to the wildcard character. Then we can pass the request and response objects to CORS and define the business logic inside of its callback. Now, normally, you probably get some data from the request like a product ID and then go and fetch that product from a database somewhere. But in this case, we'll define our charge data as just a generic widget that's priced list at $9.99. One useful tip here is that you can store metadata like a user ID if you want to reference the user in the future when changes happen to the charge. Then to create a charge on Coinbase, we simply call await charge create with that data, and then send it back down to the client as the response. Once that charge is created, The user then has 1 hour to make their payment. Let's go ahead and see the charge in action by running firebase serve to serve the function on local host 5000. Now, let's build a front end application with vanilla JavaScript in this index dot HTML file, and you can get all the source code for this project on GitHub, by the way. The HTML just has a button that says buy something with crypto. Below the button, we have a script that makes a reference to the button, and when it's clicked, it will fire off a request do the cloud function endpoint using the fetch API and will convert its response to JSON, which contains all the charge data from Coinbase. There's a bunch of useful data on it, like the current change rates in the entire timeline of the charge itself. But to get the customer to pay, we need to show them the hosted URL, which contains the addresses and QR codes to our crypto wallets and allows the user to connect their own Coinbase account if they prefer. If the user decides not to pay, the charge will expire after an hour. Earn. But if they do pay, we then need to listen to webhooks from Coinbase. When the payment is initially sent but not confirmed, we'll get a charge urge pending webhook. But in order to listen to webhooks, we need to have a URL that's available on the Internet that Coinbase can send data to. Go back to the settings panel on Coinbase Commerce and click the button to show shared secret under webhook subscriptions. Whenever Coinbase send a webhook to our server, it signs the request. And we can use this secret to verify that the request is valid. No matter what API you're working with, it's always very important to validate the signature because, otherwise, any hacker could then pretend to be coin based and send webhooks to your server and you wouldn't know the difference. Back in our code, we'll set up a second HTTP Cloud function called webhook handler. The first thing it'll do is grab the raw body of the request, which is just the request in a binary format, along with the signature, which is contained in a header on the request. And lastly, we'll make a reference to the webhook secret that we got from the Coinbase dashboard. From there, we can set up a try catch block to catch any errors that might happen when verifying the signature. We can pass these these three values to webhook verify event body, which verifies that this request actually did come from Coinbase. It returns us with the event data from Coinbase, which itself will have a type, like pending, confirmed, or failed, and also contains data about the current state of the charge, which you'll wanna use to implement your own business logic. On Fire Ship, for example, I immediately grant access to pro content when the charge is pending by updating a database. But if the charge fails or becomes unresolved for whatever reason, then I revoke access and take steps to resolve it. The logic here is highly only dependent on whatever it is you're selling. If you sell a physical product, for example, you might want to print a shipping label after the charge is confirmed. I I think we're about ready to ship this baby off to production. Go ahead and run firebase deploy from the command line, which will give you a URL for the webhook handler. Now go back to the Coinbase dashboard and set up that URL as your webhook subscription. Congratulations. You can now accept crypto payments from your customers. I'm gonna go ahead and wrap things affair. Make sure to like and subscribe and consider supporting this content by buying a lifetime membership with crypto or any one of my individual courses. Thanks for watching, and I will see you in the next one.
As
as
of
of
last
last
week,
week
a
a
Tesla
tesla
can
can
be
be
paid
paid
for
for
with
with
Bitcoin.
bitcoin
As
as
of
of
this
this
week,
week
all
all
FireShip
fireship
courses
courses
can
can
be
be
paid
paid
for
for
with
with
Bitcoin.
bitcoin
And
and
as
as
of
of
the
the
end
end
of
of
this
this
video,
video
your
your
product
product
can
can
also
also
be
be
paid
paid
for
for
with
with
Bitcoin.
bitcoin
I've
i've
always
always
been
been
pretty
pretty
skeptical
skeptical
of
of
crypto,
crypto
but
but
the
the
more
more
I
i
work
work
with
with
it
it
as
as
a
a
developer
developer
and
and
the
the
more
more
the
the
Fed
fed
runs
runs
the
the
money
money
printer,
printer
the
the
more
more
I
i
like
like
it.
it
But
but
most
most
importantly,
importantly
I
i
wanna
wanna
give
give
a
a
customer's
customer's
choice.
choice
If
if
the
the
customer
customer
wants
wants
to
to
pay
pay
with
with
Bitcoin,
bitcoin
Ethereum,
ethereum
Litecoin,
litecoin
or
or
whatever,
whatever
they
they
should
should
have
have
that
that
option.
option
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
implement
implement
cryptocurrency
cryptocurrency
payments
payments
on
on
web
web
using
using
the
the
Coinbase
coinbase
Commerce
commerce
API,
api
giving
giving
you
you
the
the
ability
ability
to
to
receive
receive
crypto
crypto
payments
payments
in
in
a
a
variety
variety
of
of
different
different
formats.
formats
First
first
of
of
all,
all
how
how
does
does
a
a
cryptocurrency
cryptocurrency
payment
payment
work?
work
Well,
well
unlike
unlike
a
a
credit
credit
card
card
payment,
payment
which
which
is
is
processed
processed
by
by
a
a
central
central
authority,
authority
a
a
crypto
crypto
payment
payment
gets
gets
broadcast
broadcast
to
to
a
a
peer
peer
to
to
peer
peer
network
network
around
around
the
the
world,
world
where
where
miners
miners
compete
compete
with
with
their
their
computing
computing
power
power
to
to
confirm
confirm
that
that
transaction
transaction
on
on
the
the
blockchain.
blockchain
That
that
process
process
can
can
take
take
time,
time
maybe
maybe
10
10
minutes
minutes
or
or
so,
so
before
before
the
the
transaction
transaction
is
is
fully
fully
earn.
earn
On
on
Coinbase
coinbase
Commerce,
commerce
the
the
first
first
thing
thing
you'll
you'll
do
do
is
is
create
create
a
a
charge,
charge
which
which
is
is
more
more
like
like
a
a
payment
payment
intent.
intent
It
it
has
has
an
an
amount
amount
and
and
description
description
and
and
can
can
be
be
denominated
denominated
in
in
US
us
dollars.
dollars
When
when
a
a
charge
charge
is
is
created,
created
it
it
has
has
a
a
lifespan
lifespan
of
of
1
1
hour,
hour
and
and
Coinbase
coinbase
in
in
the
the
background
background
will
will
monitor
monitor
the
the
payment
payment
networks
networks
looking
looking
for
for
a
a
payment
payment
to
to
be
be
confirmed
confirmed
on
on
this
this
charge.
charge
The
the
charge
charge
also
also
provides
provides
a
a
URL
url
hosted
hosted
by
by
Coinbase
coinbase
where
where
the
the
user
user
can
can
either
either
pay
pay
with
with
crypto
crypto
or
or
their
their
Coinbase
coinbase
account.
account
Now
now
after
after
the
the
user
user
submits
submits
their
their
payment,
payment
Coinbase
coinbase
will
will
fire
fire
a
a
webhook
webhook
that
that
can
can
notify
notify
your
your
server
server
that
that
the
the
charge
charge
is
is
now
now
pending.
pending
It's
it's
at
at
that
that
point
point
point
point
that
that
you
you
can
can
notify
notify
the
the
customer
customer
that
that
the
the
payment
payment
has
has
been
been
received,
received
and
and
we're
we're
just
just
waiting
waiting
for
for
the
the
final
final
confirmation
confirmation
on
on
the
the
blockchain
blockchain
before
before
we
we
ship
ship
it
it
out.
out
At
at
some
some
point
point
in
in
the
the
future,
future
Coinbase
coinbase
will
will
see
see
the
the
transaction
transaction
is
is
confirmed
confirmed
and
and
will
will
send
send
another
another
webhook
webhook
to
to
your
your
server,
server
notifying
notifying
you
you
that
that
everything
everything
is
is
good
good
to
to
go,
go
unless
unless
something
something
went
went
wrong.
wrong
Like,
like
a
a
user
user
may
may
have
have
overpaid
overpaid
or
or
underpaid
underpaid
because
because
crypto
crypto
is
is
so
so
volatile,
volatile
or
or
maybe
maybe
they
they
accidentally
accidentally
made
made
multiple
multiple
payments
payments
on
on
the
the
same
same
charge.
charge
In
in
which
which
case,
case
you'll
you'll
need
need
to
to
manually
manually
resolve
resolve
the
the
charge.
charge
Things
things
like
like
that
that
shouldn't
shouldn't
happen
happen
often,
often
but
but
those
those
are
are
just
just
some
some
of
of
the
the
caveats
caveats
to
to
be
be
aware
aware
of
of
when
when
working
working
with
with
crypto.
crypto
In
in
addition
addition
to
to
Coinbase
coinbase
Commerce,
commerce
you
you
might
might
also
also
look
look
into
into
BitPay
bitpay
or
or
CoinGate
coingate
as
as
alternatives.
alternatives
Or
or
if
if
you
you
want
want
to
to
use
use
a
a
currency
currency
that's
that's
designed
designed
specifically
specifically
for
for
digital
digital
transactions,
transactions
you
you
might
might
want
want
to
to
look
look
into
into
fame
fame
like
like
Kin.
kin
To
to
get
get
started,
started
the
the
first
first
thing
thing
you'll
you'll
need
need
is
is
to
to
own
own
a
a
little
little
bit
bit
of
of
crypto.
crypto
I'm
i'm
not
not
saying
saying
that
that
to
to
try
try
to
to
pump
pump
Bitcoin
bitcoin
or
or
anything,
anything
but
but
because
because
Coinbase
coinbase
Commerce
commerce
doesn't
doesn't
actually
actually
have
have
a
a
sandbox
sandbox
for
for
testing
testing
payments.
payments
So
so
in
in
order
order
to
to
test
test
your
your
implementation,
implementation
you'll
you'll
need
need
to
to
have
have
a
a
wallet
wallet
with
with
some
some
crypto
crypto
in
in
it.
it
The
the
easiest
easiest
way
way
to
to
do
do
that
that
is
is
by
by
setting
setting
up
up
a
a
Coinbase
coinbase
account.
account
And
and
if
if
you
you
use
use
my
my
referral
referral
link
link
in
in
the
the
description,
description
you
you
and
and
I
i
both
both
will
will
get
get
a
a
$10
$10
referral
referral
reward.
reward
And
and
this
this
video
video
is
is
not
not
sponsored
sponsored
by
by
the
the
way,
way
I
i
actually
actually
use
use
coin
coin
base
base
commerce
commerce
for
for
the
the
implementation
implementation
on
on
FireShip
fireship
IO.
io
In
in
any
any
case,
case
the
the
next
next
thing
thing
you'll
you'll
need
need
is
is
a
a
Coinbase
coinbase
Commerce
commerce
account.
account
When
when
you
you
create
create
an
an
account,
account
it
it
will
will
automatically
automatically
generate
generate
a
a
wallet
wallet
for
for
different
different
cryptocurrencies
cryptocurrencies
like
like
Ethereum,
ethereum
Bitcoin,
bitcoin
Litecoin,
litecoin
etcetera,
etcetera
allowing
allowing
other
other
users
users
to
to
send
send
you
you
money
money
on
on
these
these
respective
respective
blockchains.
blockchains
On
on
the
the
dashboard,
dashboard
you'll
you'll
get
get
a
a
breakdown
breakdown
of
of
all
all
your
your
payments.
payments
And
and
one
one
thing
thing
that's
that's
worth
worth
pointing
pointing
out
out
is
is
that
that
if
if
you
you
have
have
a
a
static
static
product
product
where
where
the
the
pricing
pricing
doesn't
doesn't
change,
change
you
you
can
can
create
create
a
a
checkout
checkout
and
and
then
then
embed
embed
it
it
directly
directly
in
in
your
your
front
front
end
end
application
application
without
without
having
having
to
to
write
write
any
any
client
client
side
side
code.
code
But
but
in
in
this
this
demo,
demo
we'll
we'll
do
do
it
it
the
the
more
more
developer
developer
oriented
oriented
way
way
by
by
creating
creating
a
a
charge
charge
that
that
can
can
handle
handle
dynamic
dynamic
pricing
pricing
and
and
data.
data
To
to
add
add
Coinbase
coinbase
to
to
a
a
back
back
end
end
server,
server
we'll
we'll
need
need
to
to
go
go
to
to
the
the
settings
settings
tab
tab
and
and
create
create
an
an
API
api
key.
key
This
this
key
key
is
is
how
how
you
you
access
access
your
your
Coinbase
coinbase
account
account
from
from
a
a
server,
server
and
and
it
it
should
should
never
never
be
be
exposed
exposed
in
in
your
your
front
front
end
end
code.
code
But
but
now,
now
we
we
need
need
a
a
server,
server
and
and
my
my
favorite
favorite
way
way
to
to
get
get
run
run
into
into
production
production
quickly
quickly
is
is
with
with
Firebase
firebase
Cloud
cloud
Functions.
functions
Sign
sign
up
up
for
for
a
a
Firebase
firebase
account
account
and
and
install
install
the
the
Firebase
firebase
command
command
line
line
tools,
tools
then
then
run
run
firebase
firebase
init
init
functions
functions
from
from
the
the
command
command
line.
line
That'll
that'll
give
give
us
us
a
a
Node.
node
Js
js
project
project
in
in
the
the
functions
functions
directory.
directory
Go
go
ahead
ahead
and
and
CD
cd
into
into
it,
it
then
then
we
we
can
can
install
install
the
the
Coinbase
coinbase
Commerce
commerce
SDK
sdk
for
for
load.
load
And
and
at
at
the
the
same
same
time,
time
install
install
cores
cores
or
or
cross
cross
origin
origin
resource
resource
sharing
sharing
so
so
we
we
can
can
make
make
requests
requests
to
to
this
this
function
function
from
from
a
a
front
front
end
end
application.
application
In
in
in
in
the
the
JavaScript
javascript
code,
code
we
we
can
can
import
import
the
the
coinbasecommerce
coinbasecommerce
client
client
as
as
well
well
as
as
resources.
resources
The
the
client
client
is
is
used
used
to
to
identify
identify
our
our
project
project
with
with
coinbase,
coinbase
which
which
we
we
do
do
by
by
calling
calling
client
client
and
and
knit
knit
with
with
our
our
secret
secret
API
api
key.
key
Now,
now
there
there
are
are
many
many
different
different
things
things
you
you
can
can
do
do
with
with
the
the
API,
api
but
but
we're
we're
interested
interested
in
in
creating
creating
a
a
charge,
charge
which
which
is
is
available
available
from
from
the
the
resources
resources
object.
object
From
from
there,
there
we
we
can
can
start
start
defining
defining
our
our
cloud
cloud
function,
function
which
which
is
is
just
just
an
an
HTTP
http
endpoint
endpoint
that
that
we
we
can
can
call
call
from
from
any
any
application.
application
To
to
call
call
it
it
from
from
the
the
browser,
browser
we'll
we'll
need
need
to
to
enable
enable
CORS,
cors
which
which
we
we
can
can
do
do
by
by
importing
importing
the
the
CORS
cors
library
library
and
and
setting
setting
the
the
origin
origin
to
to
the
the
wildcard
wildcard
character.
character
Then
then
we
we
can
can
pass
pass
the
the
request
request
and
and
response
response
objects
objects
to
to
CORS
cors
and
and
define
define
the
the
business
business
logic
logic
inside
inside
of
of
its
its
callback.
callback
Now,
now
normally,
normally
you
you
probably
probably
get
get
some
some
data
data
from
from
the
the
request
request
like
like
a
a
product
product
ID
id
and
and
then
then
go
go
and
and
fetch
fetch
that
that
product
product
from
from
a
a
database
database
somewhere.
somewhere
But
but
in
in
this
this
case,
case
we'll
we'll
define
define
our
our
charge
charge
data
data
as
as
just
just
a
a
generic
generic
widget
widget
that's
that's
priced
priced
list
list
at
at
$9.99.
$9.99
One
one
useful
useful
tip
tip
here
here
is
is
that
that
you
you
can
can
store
store
metadata
metadata
like
like
a
a
user
user
ID
id
if
if
you
you
want
want
to
to
reference
reference
the
the
user
user
in
in
the
the
future
future
when
when
changes
changes
happen
happen
to
to
the
the
charge.
charge
Then
then
to
to
create
create
a
a
charge
charge
on
on
Coinbase,
coinbase
we
we
simply
simply
call
call
await
await
charge
charge
create
create
with
with
that
that
data,
data
and
and
then
then
send
send
it
it
back
back
down
down
to
to
the
the
client
client
as
as
the
the
response.
response
Once
once
that
that
charge
charge
is
is
created,
created
The
the
user
user
then
then
has
has
1
1
hour
hour
to
to
make
make
their
their
payment.
payment
Let's
let's
go
go
ahead
ahead
and
and
see
see
the
the
charge
charge
in
in
action
action
by
by
running
running
firebase
firebase
serve
serve
to
to
serve
serve
the
the
function
function
on
on
local
local
host
host
5000.
5000
Now,
now
let's
let's
build
build
a
a
front
front
end
end
application
application
with
with
vanilla
vanilla
JavaScript
javascript
in
in
this
this
index
index
dot
dot
HTML
html
file,
file
and
and
you
you
can
can
get
get
all
all
the
the
source
source
code
code
for
for
this
this
project
project
on
on
GitHub,
github
by
by
the
the
way.
way
The
the
HTML
html
just
just
has
has
a
a
button
button
that
that
says
says
buy
buy
something
something
with
with
crypto.
crypto
Below
below
the
the
button,
button
we
we
have
have
a
a
script
script
that
that
makes
makes
a
a
reference
reference
to
to
the
the
button,
button
and
and
when
when
it's
it's
clicked,
clicked
it
it
will
will
fire
fire
off
off
a
a
request
request
do
do
the
the
cloud
cloud
function
function
endpoint
endpoint
using
using
the
the
fetch
fetch
API
api
and
and
will
will
convert
convert
its
its
response
response
to
to
JSON,
json
which
which
contains
contains
all
all
the
the
charge
charge
data
data
from
from
Coinbase.
coinbase
There's
there's
a
a
bunch
bunch
of
of
useful
useful
data
data
on
on
it,
it
like
like
the
the
current
current
change
change
rates
rates
in
in
the
the
entire
entire
timeline
timeline
of
of
the
the
charge
charge
itself.
itself
But
but
to
to
get
get
the
the
customer
customer
to
to
pay,
pay
we
we
need
need
to
to
show
show
them
them
the
the
hosted
hosted
URL,
url
which
which
contains
contains
the
the
addresses
addresses
and
and
QR
qr
codes
codes
to
to
our
our
crypto
crypto
wallets
wallets
and
and
allows
allows
the
the
user
user
to
to
connect
connect
their
their
own
own
Coinbase
coinbase
account
account
if
if
they
they
prefer.
prefer
If
if
the
the
user
user
decides
decides
not
not
to
to
pay,
pay
the
the
charge
charge
will
will
expire
expire
after
after
an
an
hour.
hour
Earn.
earn
But
but
if
if
they
they
do
do
pay,
pay
we
we
then
then
need
need
to
to
listen
listen
to
to
webhooks
webhooks
from
from
Coinbase.
coinbase
When
when
the
the
payment
payment
is
is
initially
initially
sent
sent
but
but
not
not
confirmed,
confirmed
we'll
we'll
get
get
a
a
charge
charge
urge
urge
pending
pending
webhook.
webhook
But
but
in
in
order
order
to
to
listen
listen
to
to
webhooks,
webhooks
we
we
need
need
to
to
have
have
a
a
URL
url
that's
that's
available
available
on
on
the
the
Internet
internet
that
that
Coinbase
coinbase
can
can
send
send
data
data
to.
to
Go
go
back
back
to
to
the
the
settings
settings
panel
panel
on
on
Coinbase
coinbase
Commerce
commerce
and
and
click
click
the
the
button
button
to
to
show
show
shared
shared
secret
secret
under
under
webhook
webhook
subscriptions.
subscriptions
Whenever
whenever
Coinbase
coinbase
send
send
a
a
webhook
webhook
to
to
our
our
server,
server
it
it
signs
signs
the
the
request.
request
And
and
we
we
can
can
use
use
this
this
secret
secret
to
to
verify
verify
that
that
the
the
request
request
is
is
valid.
valid
No
no
matter
matter
what
what
API
api
you're
you're
working
working
with,
with
it's
it's
always
always
very
very
important
important
to
to
validate
validate
the
the
signature
signature
because,
because
otherwise,
otherwise
any
any
hacker
hacker
could
could
then
then
pretend
pretend
to
to
be
be
coin
coin
based
based
and
and
send
send
webhooks
webhooks
to
to
your
your
server
server
and
and
you
you
wouldn't
wouldn't
know
know
the
the
difference.
difference
Back
back
in
in
our
our
code,
code
we'll
we'll
set
set
up
up
a
a
second
second
HTTP
http
Cloud
cloud
function
function
called
called
webhook
webhook
handler.
handler
The
the
first
first
thing
thing
it'll
it'll
do
do
is
is
grab
grab
the
the
raw
raw
body
body
of
of
the
the
request,
request
which
which
is
is
just
just
the
the
request
request
in
in
a
a
binary
binary
format,
format
along
along
with
with
the
the
signature,
signature
which
which
is
is
contained
contained
in
in
a
a
header
header
on
on
the
the
request.
request
And
and
lastly,
lastly
we'll
we'll
make
make
a
a
reference
reference
to
to
the
the
webhook
webhook
secret
secret
that
that
we
we
got
got
from
from
the
the
Coinbase
coinbase
dashboard.
dashboard
From
from
there,
there
we
we
can
can
set
set
up
up
a
a
try
try
catch
catch
block
block
to
to
catch
catch
any
any
errors
errors
that
that
might
might
happen
happen
when
when
verifying
verifying
the
the
signature.
signature
We
we
can
can
pass
pass
these
these
these
these
three
three
values
values
to
to
webhook
webhook
verify
verify
event
event
body,
body
which
which
verifies
verifies
that
that
this
this
request
request
actually
actually
did
did
come
come
from
from
Coinbase.
coinbase
It
it
returns
returns
us
us
with
with
the
the
event
event
data
data
from
from
Coinbase,
coinbase
which
which
itself
itself
will
will
have
have
a
a
type,
type
like
like
pending,
pending
confirmed,
confirmed
or
or
failed,
failed
and
and
also
also
contains
contains
data
data
about
about
the
the
current
current
state
state
of
of
the
the
charge,
charge
which
which
you'll
you'll
wanna
wanna
use
use
to
to
implement
implement
your
your
own
own
business
business
logic.
logic
On
on
Fire
fire
Ship,
ship
for
for
example,
example
I
i
immediately
immediately
grant
grant
access
access
to
to
pro
pro
content
content
when
when
the
the
charge
charge
is
is
pending
pending
by
by
updating
updating
a
a
database.
database
But
but
if
if
the
the
charge
charge
fails
fails
or
or
becomes
becomes
unresolved
unresolved
for
for
whatever
whatever
reason,
reason
then
then
I
i
revoke
revoke
access
access
and
and
take
take
steps
steps
to
to
resolve
resolve
it.
it
The
the
logic
logic
here
here
is
is
highly
highly
only
only
dependent
dependent
on
on
whatever
whatever
it
it
is
is
you're
you're
selling.
selling
If
if
you
you
sell
sell
a
a
physical
physical
product,
product
for
for
example,
example
you
you
might
might
want
want
to
to
print
print
a
a
shipping
shipping
label
label
after
after
the
the
charge
charge
is
is
confirmed.
confirmed
I
i
I
i
think
think
we're
we're
about
about
ready
ready
to
to
ship
ship
this
this
baby
baby
off
off
to
to
production.
production
Go
go
ahead
ahead
and
and
run
run
firebase
firebase
deploy
deploy
from
from
the
the
command
command
line,
line
which
which
will
will
give
give
you
you
a
a
URL
url
for
for
the
the
webhook
webhook
handler.
handler
Now
now
go
go
back
back
to
to
the
the
Coinbase
coinbase
dashboard
dashboard
and
and
set
set
up
up
that
that
URL
url
as
as
your
your
webhook
webhook
subscription.
subscription
Congratulations.
congratulations
You
you
can
can
now
now
accept
accept
crypto
crypto
payments
payments
from
from
your
your
customers.
customers
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
affair.
affair
Make
make
sure
sure
to
to
like
like
and
and
subscribe
subscribe
and
and
consider
consider
supporting
supporting
this
this
content
content
by
by
buying
buying
a
a
lifetime
lifetime
membership
membership
with
with
crypto
crypto
or
or
any
any
one
one
of
of
my
my
individual
individual
courses.
courses
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how cryptocurrency payments can be made through the Coinbase Commerce API, providing instructions on how to receive cryptocurrency payments and offering alternatives like BitPay or CoinGate. They also recommend using a cryptocurrency account or a blockchain wallet for dynamic pricing and data. The process for creating a cryptocurrency account and setting up a blockchain wallet is discussed, and viewers are encouraged to consider supporting the content and considering supporting the content. They also provide tips on setting up a front end application and a try catch block to catch any errors, as well as a beta test for crypto payments.
Get Paid with Crypto in your App // Coinbase Commerce Tutorial
As of last week, a Tesla can be paid for with Bitcoin. As of this week, all FireShip courses can be paid for with Bitcoin. And as of the end of this video, your product can also be paid for with Bitcoin. I've always been pretty skeptical of crypto, but the more I work with it as a developer and the more the Fed runs the money printer, the more I like it. But most importantly, I wanna give a customer's choice. If the customer wants to pay with Bitcoin, Ethereum, Litecoin, or whatever, they should have that option. In today's video, you'll learn how to implement cryptocurrency payments on web using the Coinbase Commerce API, giving you the ability to receive crypto payments in a variety of different formats. First of all, how does a cryptocurrency payment work? Well, unlike a credit card payment, which is processed by a central authority, a crypto payment gets broadcast to a peer to peer network around the world, where miners compete with their computing power to confirm that transaction on the blockchain. That process can take time, maybe 10 minutes or so, before the transaction is fully earn. On Coinbase Commerce, the first thing you'll do is create a charge, which is more like a payment intent. It has an amount and description and can be denominated in US dollars. When a charge is created, it has a lifespan of 1 hour, and Coinbase in the background will monitor the payment networks looking for a payment to be confirmed on this charge. The charge also provides a URL hosted by Coinbase where the user can either pay with crypto or their Coinbase account. Now after the user submits their payment, Coinbase will fire a webhook that can notify your server that the charge is now pending. It's at that point point that you can notify the customer that the payment has been received, and we're just waiting for the final confirmation on the blockchain before we ship it out. At some point in the future, Coinbase will see the transaction is confirmed and will send another webhook to your server, notifying you that everything is good to go, unless something went wrong. Like, a user may have overpaid or underpaid because crypto is so volatile, or maybe they accidentally made multiple payments on the same charge. In which case, you'll need to manually resolve the charge. Things like that shouldn't happen often, but those are just some of the caveats to be aware of when working with crypto. In addition to Coinbase Commerce, you might also look into BitPay or CoinGate as alternatives. Or if you want to use a currency that's designed specifically for digital transactions, you might want to look into fame like Kin. To get started, the first thing you'll need is to own a little bit of crypto. I'm not saying that to try to pump Bitcoin or anything, but because Coinbase Commerce doesn't actually have a sandbox for testing payments. So in order to test your implementation, you'll need to have a wallet with some crypto in it. The easiest way to do that is by setting up a Coinbase account. And if you use my referral link in the description, you and I both will get a $10 referral reward. And this video is not sponsored by the way, I actually use coin base commerce for the implementation on FireShip IO. In any case, the next thing you'll need is a Coinbase Commerce account. When you create an account, it will automatically generate a wallet for different cryptocurrencies like Ethereum, Bitcoin, Litecoin, etcetera, allowing other users to send you money on these respective blockchains. On the dashboard, you'll get a breakdown of all your payments. And one thing that's worth pointing out is that if you have a static product where the pricing doesn't change, you can create a checkout and then embed it directly in your front end application without having to write any client side code. But in this demo, we'll do it the more developer oriented way by creating a charge that can handle dynamic pricing and data. To add Coinbase to a back end server, we'll need to go to the settings tab and create an API key. This key is how you access your Coinbase account from a server, and it should never be exposed in your front end code. But now, we need a server, and my favorite way to get run into production quickly is with Firebase Cloud Functions. Sign up for a Firebase account and install the Firebase command line tools, then run firebase init functions from the command line. That'll give us a Node. Js project in the functions directory. Go ahead and CD into it, then we can install the Coinbase Commerce SDK for load. And at the same time, install cores or cross origin resource sharing so we can make requests to this function from a front end application. In in the JavaScript code, we can import the coinbasecommerce client as well as resources. The client is used to identify our project with coinbase, which we do by calling client and knit with our secret API key. Now, there are many different things you can do with the API, but we're interested in creating a charge, which is available from the resources object. From there, we can start defining our cloud function, which is just an HTTP endpoint that we can call from any application. To call it from the browser, we'll need to enable CORS, which we can do by importing the CORS library and setting the origin to the wildcard character. Then we can pass the request and response objects to CORS and define the business logic inside of its callback. Now, normally, you probably get some data from the request like a product ID and then go and fetch that product from a database somewhere. But in this case, we'll define our charge data as just a generic widget that's priced list at $9.99. One useful tip here is that you can store metadata like a user ID if you want to reference the user in the future when changes happen to the charge. Then to create a charge on Coinbase, we simply call await charge create with that data, and then send it back down to the client as the response. Once that charge is created, The user then has 1 hour to make their payment. Let's go ahead and see the charge in action by running firebase serve to serve the function on local host 5000. Now, let's build a front end application with vanilla JavaScript in this index dot HTML file, and you can get all the source code for this project on GitHub, by the way. The HTML just has a button that says buy something with crypto. Below the button, we have a script that makes a reference to the button, and when it's clicked, it will fire off a request do the cloud function endpoint using the fetch API and will convert its response to JSON, which contains all the charge data from Coinbase. There's a bunch of useful data on it, like the current change rates in the entire timeline of the charge itself. But to get the customer to pay, we need to show them the hosted URL, which contains the addresses and QR codes to our crypto wallets and allows the user to connect their own Coinbase account if they prefer. If the user decides not to pay, the charge will expire after an hour. Earn. But if they do pay, we then need to listen to webhooks from Coinbase. When the payment is initially sent but not confirmed, we'll get a charge urge pending webhook. But in order to listen to webhooks, we need to have a URL that's available on the Internet that Coinbase can send data to. Go back to the settings panel on Coinbase Commerce and click the button to show shared secret under webhook subscriptions. Whenever Coinbase send a webhook to our server, it signs the request. And we can use this secret to verify that the request is valid. No matter what API you're working with, it's always very important to validate the signature because, otherwise, any hacker could then pretend to be coin based and send webhooks to your server and you wouldn't know the difference. Back in our code, we'll set up a second HTTP Cloud function called webhook handler. The first thing it'll do is grab the raw body of the request, which is just the request in a binary format, along with the signature, which is contained in a header on the request. And lastly, we'll make a reference to the webhook secret that we got from the Coinbase dashboard. From there, we can set up a try catch block to catch any errors that might happen when verifying the signature. We can pass these these three values to webhook verify event body, which verifies that this request actually did come from Coinbase. It returns us with the event data from Coinbase, which itself will have a type, like pending, confirmed, or failed, and also contains data about the current state of the charge, which you'll wanna use to implement your own business logic. On Fire Ship, for example, I immediately grant access to pro content when the charge is pending by updating a database. But if the charge fails or becomes unresolved for whatever reason, then I revoke access and take steps to resolve it. The logic here is highly only dependent on whatever it is you're selling. If you sell a physical product, for example, you might want to print a shipping label after the charge is confirmed. I I think we're about ready to ship this baby off to production. Go ahead and run firebase deploy from the command line, which will give you a URL for the webhook handler. Now go back to the Coinbase dashboard and set up that URL as your webhook subscription. Congratulations. You can now accept crypto payments from your customers. I'm gonna go ahead and wrap things affair. Make sure to like and subscribe and consider supporting this content by buying a lifetime membership with crypto or any one of my individual courses. Thanks for watching, and I will see you in the next one.
The speaker explains how cryptocurrency payments can be made through the Coinbase Commerce API, providing instructions on how to receive cryptocurrency payments and offering alternatives like BitPay or CoinGate. They also recommend using a cryptocurrency account or a blockchain wallet for dynamic pricing and data. The process for creating a cryptocurrency account and setting up a blockchain wallet is discussed, and viewers are encouraged to consider supporting the content and considering supporting the content. They also provide tips on setting up a front end application and a try catch block to catch any errors, as well as a beta test for crypto payments.