Earning our stripes with the leading internet payment gateway

Integrating Stripe into a complex system and thinking outside of the box

One of our high profile clients required a payment gateway to facilitate a subscription plan with monthly and annual payments for their members. Due to the complex structure of their website and business model, this project required a unique approach.

 

This is where Stripe comes in; it’s an industry leader in online payment gateways and one of Formulate's preferred options. It's a fantastic tool to work with and can integrate into most web applications. From a development perspective, this reduces the risk of bugs and makes Stripe a cost-efficient option. Stripe also offers competitive rates along with exceptional customer management and insight tools. With all these positives, it's a no-brainer! 

 

Over the years, Formulate has successfully integrated Stripe into many client projects. We have a lot of experience using it; however, this project was a little different. 

 

The client's site consists of 2 separate systems; one built-in React Js for the front end (what the user sees) and a Ruby on Rails instance used for the back end (logic and data management). When deployed correctly, the two technologies will provide a seamless, fast, and satisfying experience for the user.

 

Integrating Stripe into a combined React Js / Ruby on Rails set-up is more involved than a standard Ruby on Rails website. The payment request is performed on Stripe controlled by the React front end, whilst the Ruby on Rails backend handles the logic and stores data relating to the transaction.  

 

This complexity posed a whole host of problems with data security and error handling. However, with some in-depth research and drawing on past experiences, the Formulate team cracked it.

 

The final process seems lengthy, but don't forget it all happens in the blink of an eye, meaning the user will be none the wiser of the interaction that is taking place behind the scenes: 

 

Step 1 – On the web page (React front-end), the user selects the payment plan they would like to subscribe to and are directed to a client-branded payment form hosted by Stripe.

 

The user inputs their data, including sensitive payment information, and clicks submit. As the user submits directly on Stripe, there are no security issues at this stage.

 

Step 2 – Once the payment is successfully processed, Stripe returns a token to the React front-end. The token links to the user's information in Stripe, but it does not contain any sensitive data for security purposes. 

 

Step 3 – The React front-end passes the token back to the Rails API.

 

Step 4 – Then, using the token, the Rails API requests additional information it needs from Stripe. 

 

Step 5 – Stripe will find the correct token, create a new customer and set up a subscription plan for monthly or annual payments.

 

Step 6 – Stripe then notifies the Rails API with a success or failure response. This information is communicated back to the user on the website to let them know their subscription is set-up, and they can access the service.

 

 

After subscribing, Stripe will take regular payments from the customer based on their selected subscription plan. The Stripe API will push notifications to the client, helping them manage successful payments and monitor unpaid subscriptions.

 

Data security was a key factor for this project, and this hybrid implementation worked perfectly for our client. At no point is sensitive customer information, such as bank or address details, exposed because this is submitted directly to Stripe. The final result is a seamless solution that provides a robust, secure system and a great user experience. 

 

No matter the challenge, get in touch to discover how we can help you formulate your future.