Add Secure, Fee-less, One-Click Payments to Any Website for Free

I have entered my credit card information hundreds of times on the internet. The credit card. I’m tired of pulling out my wallet every time I buy something so here’s a plea to the eCommerce world: please stop making me. same In this article, I’m going to make the case for allowing alternative payments with and Metamask for no cost to your business except the time to set it up. You should hear me out because and I’m sure it is currently costing you many. Ethereum payment processing shouldn’t cost you a dime was about logging into any website without passwords using Ethereum and Metamask — I suggest you read that one first. Note that while this article focuses on eCommerce, you can stick these payment buttons on any website (perhaps a tip box for your art blog?) and they will only be seen by Metamask users. Your mainstream audience won’t notice a difference. My last article Why Payment Processors Suck This shouldn’t be a surprise to anyone, but payment processors are businesses that exist to make money. Here are some reasons to not like them: They charge fees (usually 2–5%) They have high rates of fraud (e.g. customers charging back after receiving goods) It takes days for your funds to reach you Users need to fill in credit card information (come on guys, it’s 2017) still Your account can be frozen at any time (and it will be if, for some reason, they suspect you’re up to no good) Too bad you have to use them because there isn’t an alternative. Oh wait, there is! Why Ethereum is Awesome Just like any other , Ethereum can be used as a medium of exchange with Ethereum can actually do much more than be a medium of exchange, but that’s a topic for another day. cryptocurrency no central authority, settlement in seconds, no chargebacks, and 0% fees for the party receiving payment . Okay I hope you’re interested. Let’s write some code. You can follow along in this repo , where I have built a simple checkout component. How to use Ethereum as a Payment Processor Remember ? We’re going to set up a webpage displaying a super secret checkout that . Again, this is because Metamask injects into your browser. Everyone else will continue seeing your normal website, none the wiser that you have become hip to web 3.0. Metamask only users with a Metamask plugin will see web3 render(){if (web3){return ( );} else {return ( );};} All we’re doing so far is rendering a component if we detect web3 in the browser. If not, we render the regular checkout, which looks like this: metamaskCheckout As I mentioned in my previous article, an Ethereum address can be used as a sort of username. Whenever the user signs a transaction of any kind, they are proving ownership of that address. This will come in handy later. components/MetaPay.jsx let { pay } = this.props;return ( Checkout Horray! You're a Metamask user. We'll give you the good stuff.

Name Address City Country Pay ${this.props.pay.usd_amt} ); This component will render a form asking for the user’s physical address (this can be pre-filled via if the user has shopped with you before — bonus feature!). this.props When the user clicks pay button, it formats an Ethereum transaction and sends that to Metamask for the user to sign in their browser. The amount of ether to send will be based on the spot price of ether at the time (e.g. if ether is $50 and the product is $20, the transaction would read 0.4 ETH). Here’s what it looks like for the user: this Of course if the user doesn’t have enough ether, they won’t be able to pay you. ¯\_(ツ)_/¯ They buy ether though… can …with a credit card (oh, the irony). Anyway, note that the user pays a transaction fee of 1–10 cents to send ether and you pay nothing to receive it. You can find out why the user pays a fee if you’re interested. flat here actions/metaPay.js sendTxn(web3, ether, nonce) {return (dispatch) => {let user = web3.eth.accounts[0];let wei = ether * Math.pow(10, 18);let gasPrice = 3 * Math.pow(10, 9);let gasLimit = 30000;let rawTx = {nonce: `0x${nonce.toString(16)}`,gasPrice: `0x${gasPrice.toString(16)}`,gasLimit: `0x${gasLimit.toString(16)}`,from: user,to: this.owner_address,value: `0x${wei.toString(16)}`};web3.eth.sendTransaction(rawTx, (err, txHash) => {if (err) { console.log('Error sending txn:', err); }// Save the transaction hashyourAPI.saveOrder(rawTx, txHash);})}} Once the user signs the transaction, a callback is invoked that takes the transaction hash and stores it in your database for later use. It also stores the street address so the user doesn’t need to fill anything in next time. At this point, the user is done! No billing address. No credit card info. Just one click of the “Accept” button. Before Shipping It’s probably worth noting that while chargebacks are not possible, you need to make sure the transaction actually made it into the Ethereum . This usually takes 10–30 seconds, but I think a nice process would be to simply check before printing a shipping label (usually done minutes to hours later). do blockchain To get a transaction by its hash, you can use the Etherscan API (or, if you want to be a good Ethereum citizen, run your own node). Maybe I’ll cover more on how to interact with Ethereum in a later article — I don’t want to lose too many readers over it yet. Feel free to ping me if you’re implementing this and get stuck. admin/shipping.jsx function printMetamaskShippingLabel(order_id) {// Get the order info related to this transaction from your systemvar order = api.getOrder(order_id);// Make sure the transaction is on the blockchain and is legitvar on_chain_order = api.getMinedOrder(order.txHash);if (!order || order.value != on_chain_order.value) {return ( );} else {// Record that you printed the shipping labelapi.logShipment(data);// Show screen that can be printedreturn ( format your shipping label here... );}} function render() {var id = this.props.order_id;var metamask_order = this.props.metamask_order;if (metmamask_order) {return printMetamaskShippingLabel(id);} else {return printShippingLabel(id);};} This component is seen by whomever is preparing the shipment. To prevent any fraud, your shipper will see a warning if the transaction isn’t mined yet or if it sent the wrong amount of ether (remember, your system logged the correct amount before). Otherwise, the shipping details are displayed as they normally would be. At this point, you can be 100% sure you got paid and you can display the label, print it, and ship your product. And the best part? No middleman cut into your profits. But what do I do with this Ether stuff? That’s a fair question. You may have noticed that you aren’t getting paid any dollars — you’re getting paid in ether. You may also know that cryptocurrencies are notoriously . volatile While I personally would recommend taking your payments in ether (See: ) I understand that everyone’s risk tolerance is different. historical ether price This is why companies exist that allow you to accept cryptocurrencies and get paid in dollars. Unfortunately, those companies also charge high fees and there’s really no reason to use them unless they bring in lots of new customers. . But remember, I told you this would be free It turns out you don’t actually need to use one of those services. You can do this yourself for very little work and almost no cost. And that’s the topic of my next article. Stay tuned! — If you enjoyed this article, or come join the community at You should also check out my company, , because we do awesome stuff. follow me on Twitter https://reddit.com/r/ethereum. ConsenSys Also, if you implement anything I’ve been talking about, tweet at me and I’ll let the community know. — P.S. While you’re waiting for my next article, I suggest getting your Metamask plugin at metamask.io and heading over to etherplay.io for some arcade games. No sign up is required and if you beat the high score, you make money! And in case you’re wondering, I don’t work on either of these products. “Pay With Metamask” image credit to Vlad Todirut