You can download the complete source code of this tutorial here
Whether you're building a marketplace, mobile app, online storefront, or subscription service, Stripe has the features you need to quickly get started. It is therefore not a surprise it is heavily used by Lyft, TaskRabbit, Instacart, and many other well-known companies. One the main advantages of this payment gateway is that it's built for developers with the eye on easy integration. This is an important advantage; taking away development time on implementing a payment infrastructure helps developers focus on the more important aspects of their applications.
Challenges
Nevertheless, integrating payments remains having its challenges and drawbacks. One of the major issues that is faced by the community (see threads on StackOverflow) is the integration of the payment server. Despite the very elaborate documentation of Stripe, there are still a lot of unanswered questions, especially if you have never implemented a server before. Also, once you have successfully achieved to integrate a server, you'll need to make a link with your client side and afer that find a way to run it 24/7 on a VPS like Heroku, Cloud9, etc. This might be an costly undertaking as you will see yourself easily paying too much for unused server capacity.
Solution
In this tutorial I am going to introduce you a new way to integrate Stripe payments, which takes away all the drawbacks that we just mentioned. We'll be leveraging the new but amazing Stripe Payments API (also called Noodlio Pay) to replace our server-side. As you will see, this will save you a lot of precious time to learn a new server language, test, validate and so.
Benefits of this approach
- It's quick: You can have a working payment server set up within a few minutes.
-
No server-side setup needed: Simply send
HTTP POST
requests to the Noodlio Pay API from the client-side and the rest will be taken care of. - Cost efficient: Hosting a complete server-side 24/7 can be a costly undertaking. This won't be a worry anymore: because the Noodlio Pay server is already hosted for you, you don't have to spend money on unused server capacity.
- Instantaneous: Thanks to the Stripe setup, you'll see the funds transferred immediately to your Stripe Account
- Unlimited: There are no restrictions on the number of requests that you can send through the Noodlio Pay server.
-
Broad support: You can charge your customers with any client-side language through
HTTP POST
requests (for instanceAngular
,React
,Javascript
, etc.). In addition, there is support for dedicated server-languages such asCURL
,Java
,NodeJS
,PHP
,Python
,Objective-C
,Ruby
and.NET
. - Tested, pre-configured and maintained: The team is constantly monitoring, testing and updating the server to conform to the latest developments.
- Secure: The servers are secure and they never store any transaction data.
How it works
0. Stripe and Mashape Setup
We first need to define a couple of constants in our app. If you are working with Angular/Ionic v1.x
, head over to app.js
and copy and paste the following:
// Stripe Payments API
// Obtain from:
// - https://market.mashape.com/noodlio/noodlio-pay-smooth-payments-with-stripe
var NOODLIO_PAY_API_URL = "https://noodlio-pay.p.mashape.com";
var NOODLIO_PAY_API_KEY = "<YOUR-MASHAPE-API-KEY>";
// Stripe Account
// Connect on both:
// - https://www.noodl.io/pay/connect and
// - https://www.noodl.io/pay/connect/test
var STRIPE_ACCOUNT_ID = "<YOUR-STRIPE-ACCOUNT-ID>"
// Define whether you are in development mode (TEST_MODE: true) or production mode (TEST_MODE: false)
var TEST_MODE = false;
The NOODLIO_PAY_API_URL
is basically the location of the server and is fixed. The variable TEST_MODE
simply takes the values true
or false
and defines whether we are in test mode (development) or production (actually charging the user). Now let's define two constants:
Mashape
To consume the Stripe Payments API, we'll need to obtain our unique NOODLIO_PAY_API_KEY
. To do so, head over to Mashape and click on the right "Get your API Keys and Start Hacking" or press on "Sign up free".
After you are signed in, you'll find your unique API Key in the request example on the Stripe Payments API page:
curl -X POST --include 'https://noodlio-pay.p.mashape.com/charge/token' \
-H 'X-Mashape-Key: <YOUR-MASHAPE-API-KEY>' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Accept: application/json' \
... other values
Replace the NOODLIO_PAY_API_KEY
with this unique identifier.
Stripe Account
If you haven't already sign up for a Stripe Account. After that, you'll need to retrieve your unique Stripe Account ID (field: stripe_account
), which you can obtain on the following pages (Note: you'll need to visit both links once):
- For the production mode: https://www.noodl.io/pay/connect
- For the development mode: https://www.noodl.io/pay/connect/test
The Stripe Account ID looks something like acct_12abcDEF34GhIJ5K
. Replace the constant STRIPE_ACCOUNT_ID
wherever you have defined it.
That's it. Our server is configured and ready to receive payments.
1. Obtain the Stripe token (source
)
Now we can head over to the fun part and start integrating the payments in our application. To do so, we'll first need to obtain the crucial parameter source
. This parameter can be either a token (which we will obtain in this exercise) or a customer ID (mostly used for recurring payments which we will discuss in another tutorial). As we will be charging the client's credit card, we'll therefore need to obtain the token. Note that when obtaining the token, the server also validates the credit card input of the user.
There are two options to obtain a Stripe token:
Option 1: Use the Stripe Payments API (Noodlio Pay)
This corresponds to sending a HTTP POST
request with the credit card input (number
, cvc
, exp_month
and exp_year
) to the route /tokens/create
of the Stripe Payments API (Noodlio Pay). For that we'll need to implement a custom form in which your customer can add their credit card details. The form data is subsequently send to the Stripe Payments API and returns the token upon success.
Add the HTML form
Let's start with integrating the form with the credit card details. In Angular v1.x
we can do this as follows:
<div ng-controller="ExampleCtrl">
<!-- html form -->
<label class="item item-input">
<span class="input-label">Card number</span>
<input type="text" size="20" ng-model="FormData.number" placeholder="4242 4242 4242 4242"/>
</label>
<label class="item item-input">
<span class="input-label">Exp. Mth (MM)</span>
<input type="text" size="2" ng-model="FormData.exp_month"/ placeholder="01">
</label>
<label class="item item-input">
<span class="input-label">Exp. Year (YYYY)</span>
<input type="text" size="4" ng-model="FormData.exp_year"/ placeholder="2020">
</label>
<label class="item item-input">
<span class="input-label">Sec. Code (CVC)</span>
<input type="text" size="4" ng-model="FormData.cvc"/ placeholder="123">
</label>
</div>
and a Submit button that is linked to our controller ExampleCtrl
through the function charge()
:
<div class="padding center">
<button class="button button-block button-balanced" ng-click="charge()">Submit</button>
</div>
Extend the HTTP
headers
To send the FormData to the Stripe Payments API, we'll need to make a HTTP request to the NOODLIO_PAY_API_URL
, which in Angular v1.x
can be achieved with the dependency $http
. We define our controller therefore as follows:
.controller('ExampleCtrl', ['$scope', '$http', function($scope, $http) {
// ...
}]);
Note: for best practices you should do this in a factory or service
Since it is hosted through Mashape, we'll also need to add authentication headers in our request. We can do this by using the NOODLIO_PAY_API_KEY
and including it in the headers of the $http
method. If you look at the documentation of the route charge/token
, the first part of the cURL request looks something like this:
curl -X POST --include 'https://noodlio-pay.p.mashape.com/charge/token'
-H 'X-Mashape-Key: 3fEagjJCGAmshMqVnwTR70bVqG3yp1lerJNjsnTzx5ODeOa99V'
-H 'Content-Type: application/x-www-form-urlencoded'
-H 'Accept: application/json'
... other variables
From that we can see that in order to send requests to the API, we'll need to include the headers X-Mashape-Key
, Content-Type
and Accept
. In Angular v1.x
this translates to:
.controller('ExampleCtrl', ['$scope', '$http', function($scope, $http) {
// add the following headers for authentication
$http.defaults.headers.common['X-Mashape-Key'] = NOODLIO_PAY_API_KEY;
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
$http.defaults.headers.common['Accept'] = 'application/json';
}]);
Obtain the token
Now that our headers are configured, we can continue by implementing the function to obtain the token for our source
parameter. Here is the example code that we used to obtain the Stripe token:
// part of ExampleCtrl
$scope.FormData = {
number: "4242424242424242",
cvc: "256",
exp_month: "08",
exp_year: "2018",
test: TEST_MODE,
};
$scope.charge = function() {
// init for the DOM
$scope.ResponseData = {
loading: true
};
// create a token and validate the credit card details
$http.post(NOODLIO_PAY_API_URL + "/tokens/create", $scope.FormData)
.success(
function(response){
if(response.hasOwnProperty('id')) {
var token = response.id; $scope.ResponseData['token'] = token;
// --> success, proceed with charging the user
proceedCharge(token);
} else {
$scope.ResponseData['token'] = 'Error, see console';
$scope.ResponseData['loading'] = false;
};
}
)
.error(
function(response){
$scope.ResponseData['token'] = 'Error, see console';
$scope.ResponseData['loading'] = false;
}
);
};
As you can see from this example, we're sending a HTTP POST
request to the url NOODLIO_PAY_API_URL + "/tokens/create"
with the form encoded parameters corresponding to the credit card details of the user. When the response has a property id
, i.e. a token (source
), then we continue with charging the user through the function proceedCharge(token)
(which we discuss below). We bind the variable ResponseData
to the $scope
to update the user through the DOM on the status of the payment (this is optional). You can see how a successful response looks like in the official documentation (on the right under RESPONSE BODY).
Option 2: Use Stripe's native Checkout form
The Checkout form is an embeddable payment form for desktop, tablet, and mobile devices. It works within your site: customers can pay instantly, without being redirected to complete the transaction.
The integration of the checkout form is to be discussed in another tutorial. If you would to integrate it yourself already, you can obtain an example source code or read guides/tutorials on how to embed the Checkout form in your application in the following languages: Ionic/Angular, Sinatra, Rails, Flask, and PHP
2. Charge the client
Now that you have obtained the token (source
) from Step 1, let's proceed with charging the user. We can do so by sending another HTTP POST
request to another route of the Stripe Payments API: charge/token
. As we can read from the docs, the form encode parameters are in this case amount
, description
(optional), currency
and stripe_account
. With the integration in Step 1 behind us, this is now a piece of cake and corresponds to:
// part of ExampleCtrl
// includes also the header extensions at the top
// charge the customer with the token from Step 1
function proceedCharge(token) {
var param = {
source: token,
amount: 100, // amount in cents
currency: "usd",
description: "Your custom description here",
stripe_account: STRIPE_ACCOUNT_ID,
test: TEST_MODE,
};
$http.post(NOODLIO_PAY_API_URL + "/charge/token", param)
.success(
function(response){
// --> success
$scope.ResponseData['loading'] = false;
if(response.hasOwnProperty('id')) {
// success, check your Stripe account
var paymentId = response.id; $scope.ResponseData['paymentId'] = paymentId;
} else {
$scope.ResponseData['paymentId'] = 'Error, see console';
};
}
)
.error(
function(response){
$scope.ResponseData['paymentId'] = 'Error, see console';
$scope.ResponseData['loading'] = false;
}
);
};
The setup is similar and if the response has an id
then this corresponds to the paymentId
(store it in your database for your reference) which equals to a successful charge. This also means that you should have received the funds on your Stripe Account, visible in your Dashboard. Don't forget to define the amount
in cents. The parameter stripe_account
thus indicates to which Stripe Account the funds should be transferred. Make sure you have included the right ID (see Step 0).
You can see how a successful response looks like in the official documentation (on the right under RESPONSE BODY).
Wrapping up
That's it, you have successfully integrated Stripe payments in your work. As you see, it was actually a piece of cake and the setup was quite short. Now you can focus on the more important aspects of your app and actually start making money from it.
If you have question, comments or some suggestions, please let us know. We love to hear from you.
Templates & Source Code
Ionic 1.x / Angular 1.x
You can download the complete source code from this repository. It also includes an example with Stripe Checkout. While the examples are made in AngularJS in an Ionic App, it is easy to reuse most of the code in other projects (whether native or hybrid)
Ionic 2.x / Angular 2.x
If you are looking for a starter that is built with the latest version of Ionic 2.x / Angular 2.x, then have a look at this great starter.
Your own template
If you have implemented your own template/starter/tutorial with the Stripe Payments API (Noodlio Pay) and would like to list it here, please let the owner know and you can receive an award.
Pricing
The use of the API hosted on Mashape is free and you can make unlimited requests. Click here for an overview of complementary licenses
Top comments (1)
I think it is worth having an alternative when it comes to the payment gateway. There is a guide Everything You Need to Think about Before Choosing the Right Payment Solution - you can downoald on g2a pay blog for free