Click here to Skip to main content
13,771,476 members
Click here to Skip to main content
Add your own
alternative version

Stats

4.8K views
6 bookmarked
Posted 24 Oct 2018
Licenced CPOL

Build a Serverless Payment Processing App with PaymentSpring & Azure Functions

, 24 Oct 2018
This article will demonstrate how easy it is to set up a PaymentSpring payment process to start receiving payments on your site.

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Making or accepting payments doesn’t have to be complicated. With advancements in technology, there’s a huge demand for fast and reliable payment services. Ensuring happier customers by eliminating hassles with payment processes is crucial. And, ideally, payment systems should be easy to integrate—with payment processes that can be completed in a few button clicks.

In this article, we’ll build a serverless donation payment processing application using PaymentSpring’s payment processing gateway. This article will demonstrate how easy it is to set up a PaymentSpring payment process to start receiving payments on your site. But first, let’s take a quick look at PaymentSpring and its benefits.

What Is PaymentSpring?

PaymentSpring provides several payment solutions and a payment processing gateway for businesses. A payment processing gateway, in short, facilitates payments by transferring information between a payment portal and the acquiring bank.

Because a payment processing gateway handles sensitive information, strong security measures to safeguard user data are imperative. One such safeguard PaymentSpring uses is tokenization. Tokenization protects user data by substituting sensitive user data (password, credit card number, email, etc.) with a symbol equivalent, known as a token. Tokens reduce the surface of attack by masking sensitive user information.

What Are the Key Benefits?

Merchants want a payment gateway that’s easy to integrate with their website. PaymentSpring not only makes it easy to integrate payment into a site, but it can be done without writing a single line of code—and you get a dedicated dashboard to manage payments effectively. Plus, with PaymentSpring’s Checkout Widget, you can create a custom checkout form and start receiving payments instantly.

Payment methods influence the number of customers that can be reached. PaymentSpring offers several payment types, including credit and debit cards, digital wallet, ACH, and checks. Plus, PaymentSpring provides a mobile payment system that makes it even easier to accept payments.

If you want to make sure PaymentSpring is right for you, PaymentSpring’s payment gateway is entirely free to test, with no hidden fees or charges. All you need to do is sign up for an account, and you can begin testing the gateway right away.

For developers, this allows fine-tuning of the payment system and thorough testing, without worrying about cost. Once the system is robust enough, you can move to a live account to start receiving real payments.

Application Architecture

We’ll briefly examine the application architecture and the development stack.

Serverless (Azure Functions)

The term serverless has been making waves for awhile; you may have heard terms like Functions as a Service (FaaS) or Backend as a Service (BaaS). There are already plenty of articles, books, and videos dedicated to the topic. (This article is a nice intro to Serverless architecture.) The idea is straightforward: Focus on the code, and let the cloud platform (Azure, in our case) handle the servers.

For instance, say you want to create a customer record from a client-generated token. You would write an Azure function to create those customer records and then trigger the function via its URL. As more users trigger the function, Azure scales the function automatically to handle the load. You don’t need to worry about adding more servers to accommodate traffic. And on the plus side, you only pay for what you use. More precisely, you only pay for the time and resources needed to run your code, allowing you to cut costs.

PaymentSpring API

The PaymentSpring API gives you programmatic access to a variety of actions and information. You can handle tokens, plans, receipts, invoices, subscriptions, logs, and WebHooks. A WebHook is a callback that gets triggered on an event, such as a transaction going through or failing. PaymentSpring uses WebHooks to notify a user of events that have occurred. Users define rules (events to be notified about) and strategies (where and how to be notified).

Frontend (Heroku)

For our example, the web application will be hosted on Heroku. Heroku is a container-based platform as a service (PaaS). Users will make donations through the Heroku application. The PaymentSpring gateway handles the payments and sends a WebHook notification once payment is successful.

Flow

A user makes a payment via the web app. The payment credentials are tokenized using PaymentSpring’s tokenization script. Once the token is created, aA request is made to the serverless charge function, which charges the token. Upon a successful charge, a WebHook notification is sent to the serverless email function. This function sends an email with a custom thank-you message. This is done programmatically with the API; nonetheless, the PaymentSpring checkout widget will come in handy if you don’t need all that control or don’t know how to program.

Implementation

A few things you’ll need for this tutorial (a free account will suffice):

  1. PaymentSpring account
  2. Heroku account
  3. Azure Account
  4. GitHub Account

See the full application here, and check out all the code on GitHub.

PaymentSpring Setup

From the PaymentSpring Dashboard, select WebHook. We create a strategy (POST request, in this case), and insert the URL into the Azure function (more on this later). We’ll next create a rule for payments, and the WebHook is finally set up. When a user donates on the site, a POST request with the report of the transaction is sent to the function.

We’ll now create a receipt to customize the message users get when they make a payment on the site. To create a custom receipt, select Account from the dashboard, and under Receipt Template, create the new receipt and customize the message users will receive. Make sure to disable automatic receipt emailing. Receipts will be sent once a WebHook notification has been received for successful payment. Additionally, you’ll need to generate private-public API key pairs. Do that under API Keys. Select the expiry (one hour is recommended) and copy and paste the API keys somewhere, as they will not be accessible when you visit again.

Frontend

The application frontend is built with Express. Express is minimal, and very easy to use. With a few lines of code, you’ll have a fully functional web app. The main application code is in an app.js file, which serves index.html, and the Checkout Widget is embedded in index.html. (See the code for the Express app on GitHub.)

Now, push the project to GitHub. Create a new Heroku app. From the app deploy dashboard, choose GitHub as the deployment method and enable Automatic deploys. This automatically deploys your app when changes are made to the GitHub project.

Azure Setup

From the Azure Portal, create a Function App. The Function App will contain the two functions for this app: charge and notify. (For a detailed walkthrough on creating functions using the portal, read this piece.)

//charge function
var request = require("request");
const private_key = your-private-key;

module.exports = function (context, req) {
   const charge = req.body.charge * 100;
   const id = req.body.id;
   const email = req.body.email;
   context.log(id);
   context.log(charge);

   //charge token 
   var options = {
       method: 'POST',
       url: 'https://api.paymentspring.com/api/v1/charge',
       headers: {
           'cache-control': 'no-cache',
           'Content-Type': 'application/x-www-form-urlencoded',
           'Authorization': 'Basic ' + new Buffer(private_key + ':').toString('base64')
       },
       form: {
           token: id,
           send_receipt: 'false',
           amount: charge,
           email_address: email
       }
   };

   request(options, function (error, response, body) {
       if (error) throw new Error(error);

       context.log(body);
       context.done();
   });
}

//notify function
var request = require("request");
const private_key = your-private-key;

module.exports = function (context, req) { 
   var id = req.body.payload.id;
   var email = req.body.payload.email_address;
   context.log(email);

   //send receipt
   var options = {
       method: 'POST',
       url: 'https://api.paymentspring.com/api/v1/charge/' + id + '/receipt',
       headers: {
           'cache-control': 'no-cache',
           'Content-Type': 'application/x-www-form-urlencoded',
           'Authorization': 'Basic ' + new Buffer(private_key + ':').toString('base64')
       },
       form: {
           receipt_type: "email",
           email_address: email
       }
   };

   request(options, function (error, response, body) {
       if (error) throw new Error(error);

       context.log(body);
       context.done();
   });

   context.done();

};

*Note that both functions use the request module. This is because the functions are part of a node project.

Testing Payment

We’re now set up to start receiving payments. PaymentSpring provides a list of sample bank accounts and credit cards for testing purposes. You can find them here. Once a payment is made, you’ll see it immediately on the payment dashboard.

Start Receiving Real Payments

We’ve finally built a fully functional payment application. However, we’re still working in test mode, so our funds are virtual. To start receiving real payments, you’ll need to activate your live account via your test account. (Note that no charges are incurred until a payment is processed.)

Final Thoughts

As demonstrated in this article, setting up your website to start receiving payments doesn’t have to be difficult. Users are likely to abandon sites with complex checkout procedures. PaymentSpring simplifies the checkout process, providing a secure and seamless way to receive funds—without the need to write code.

If you want a payment option for your website, PaymentSpring makes it easy. Read the developer docs to get started with the PaymentSpring API and learn about key features, including WebHooks, tokens, and recurring billing.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bruno Edoh
United States United States
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionMessage Closed Pin
29-Oct-18 20:49
membereMexo Technologies29-Oct-18 20:49 
QuestionMessage Closed Pin
29-Oct-18 20:49
membereMexo Technologies29-Oct-18 20:49 
QuestionMessage Closed Pin
29-Oct-18 20:49
membereMexo Technologies29-Oct-18 20:49 
QuestionMessage Closed Pin
29-Oct-18 20:49
membereMexo Technologies29-Oct-18 20:49 
QuestionQuestions? Pin
Dewey29-Oct-18 9:21
memberDewey29-Oct-18 9:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.181119.1 | Last Updated 24 Oct 2018
Article Copyright 2018 by Bruno Edoh
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid