Integrating With Stripe- Background
This will be the first in a series of articles about implementing the commonly used Stripe transaction services with a Vue.JS WebApp and Flask back-end.
Disclaimer: This article is not affiliated with or sponsored by Stripe. It is uniquely relaying my knowledge and experience as an independent developer integrating the Stripe services into my platform.
TL;DR:
+ I’m an integrations engineer implementing transaction services
+ Stripe is a leading company for transaction services integration
+ There are many use cases for online transactions, I can’t cover them all
+ Make sure you know your options and what Stripe tool fits your needs
My Background:
{Feel free to skip on to Using Stripe if you only want the nuts and bolts}
I am an integrations engineer who generally takes on projects that include some form of third part integration and API interaction. This, of course, is now a large majority of new projects as more and more third party services simplify developing cool new applications and more companies want to allow their product to be connected into other parts of customers’ lives. I am currently working on a project for a client that includes the integration of transaction services. I decided to go with Stripe due to some key features that I will try to highlight as we go along. Because this is a fairly common need today, I thought I should write down a bit of my journey to augment the quality documentation that Stripe provides at https://stripe.com/docs.
About Stripe:
Obviously you can go to https://stripe.com/about to get the official take, but this is my basic synopsis. Stripe is a tech company that provides digital payment processing & transaction services along with other financial infrastructure for online businesses. It is the back-end integration to manage transactions for businesses handling money online. You could say that Stripe is the digital cash-register that simplifies transactions and cash management for businesses, abstracting away the complexity of financial transactions.They are also expanding out into other financial services that make money easier for businesses.
Stripe is the most notable leader in transaction services for much of eCommerce. All of the payment processing on Shopify sites is powered by Stripe, along with many of your favorite marketplaces and retailers online. They make their money by taking a percentage cut from all transactions in the same way that credit-card institutions operate. This means that when a customer uses a credit card with Stripe, the money that actually hits your account will be reduced by both the financial institution fees and Stripe’s cut (this is all wrapped into Stripe’s flat rate). So, if your users have an account with you, it may be advantageous to encourage them to link a bank account and take direct ACH, since the percentage cut is much lower. Do note that failed ACH payments (bounced due to insufficient funds in the user’s account, etc.) will cost an extra fee. You can see all of Stripe’s pricing here: stripe.com/pricing. ACH bank transactions are in the “Local Payment Methods” portion.
Because Stripe’s services are developer first, they have a well built API and set of plugins along with libraries for the common languages you will likely be using. Ultimately providing simple integrations for the many different use cases of online transactions. I will only be covering a small set of these, but will hopefully expand out in the future. No matter what your needs are, you will be able to interact similarly through their API in a way that is securely managed. If you are not a developer, this content is likely not for you, but feel free to reach out to me about how best to meet your needs or check out pre-built solutions on Stripe’s site: https://stripe.com/partners/apps-and-extensions. There are other transaction services out there and I don’t claim to be an expert or assert that Stripe is the best solution for you. But just like “Nobody ever got fired for buying IBM” Stripe is a straight forward solution if you are looking for transaction services.
Using Stripe:
Assuming you’ve decided on Stripe and have signed up for an account, you will need to start thinking about what all you want out of Stripe. Here are a few of the solutions depending on your situation:
Checkout:
A Simple Limited Payment Gateway: You just want to charge customers and don’t care if the payment flow is super tightly connected to your user flow. You have pre-defined SKUs that you can add through their SKUs API or your dashboard, but you won’t be doing any form of dynamic pricing (all transaction data is locked into the SKU). If this sounds like you, my future articles will be least relevant to you. This use case can be handled by Stripe’s Client Only Checkout and really only requires enough development skill to add a button into your HTML that links to their processing page.
A Simple Dynamic Payment Gateway: You need more control over pricing and what happens with the transaction. You may be interested in integrating with other Stripe services like connect, or you may just not be able to define your offering in the form of simple SKUs. The Checkout With Server integration will provide you the flexibility to choose the pricing and how the transaction is processed while still using their pre-made checkout page. This and all of the following require a back-end server as well. See my article on implementing that here.
Elements:
The One Element Option: You want the card transaction to be directly in your user flow. Maybe you have flaky users, or they choose their price on the same page that they put in their card info. However, you are comfortable with all the card data collection being in one horizontal element. if this is the case you can probably use their Card Element.
Ultimate Control: You care about exactly how your UI is presented. You want your elements in specific places and would like to dynamically control the interaction with each piece of card info. This is the place I found myself in and what my following posts are about. For this you will need to use individual elements. This gives you the most versatility but there are also a few gotchas that I will mention along the way.
Connect:
A Way to Move Money Between Parties: If you are using stripe and aren’t just an online seller of your own products/services, you probably want to pay providers, participants, or other parties within your ecosystem. For this you would use the connect API. Portions of which are part of Slack standard and others cost a bit more. I will be covering some usage of Connect in my other articles and should give a little more input there. But connect should really cover most use cases you have for shifting money around after the initial transaction.
And Much More:
If you use one of the more common platforms/frameworks to develop in, you should also go look at the plugins and libraries available, including for native mobile and React. Stripe also has services for consuming your transaction data in a intuitive way with Sigma, managing in-person payment with Terminal, providing payment cards with Issuing, and even launching a startup with Atlas. And it all comes with their fraud protection under the hood with Radar. Now, you may not need all of these different pieces, but I thought I should put them out there in the small case that you do.
A Few Things To Note:
As you get started with Stripe you may run into questions, but don’t worry too much, most everything you could need is out there and Stripe’s documentation is pretty good.
For security purposes all of the complex transaction requesting must be done on a back-end server. This means that the flow of data will be: Front End Element → Your Server Implementation → Stripe’s API. You will use a public key for sending to your server and a secret key to communicate with their API. Stripe uses a token system to manage the requests from their elements.
Stripe is super nice and allows you to play around with test data and test keys. Take advantage of that. You will find your test keys in your dashboard. Even with your test keys they really mean it when they tell you to make the secret one ONLY accessible to your back-end server. I would even encourage you to just keep both stored away in your API and provide an endpoint that your front-end can query to get the public key.
The test card that I use is the first one suggested 4242 4242 4242 4242. You can use any CVC and expiration date (beyond the current moment) to test it out.
The stripe Elements have some limitation and they don’t receive relative values or variables. That said, they should fit most of what you need.
Ultimately, if you think you can’t do it, see if someone else did, or ask someone like me. There’s a lot out there, but hopefully this article provides a good comprehensive overview for anyone who has a project similar to mine. If it doesn’t help you, I’m sorry and hope you can find what you are looking for somewhere else. I am always up for input if you think I could improve, so feel free to reach out. I wish you all the best;
-Marcus
