Online payments made easier by Digiryte using Flutter and Ruby on Rails

Ramesh Raja
Nov 6 · 7 min read
online payment platform

This article explains how to make SCA and PCI compliant card payments using Stripe from mobile applications using Flutter and Ruby on Rails

flutter app development

Introduction:

There are countless articles available for this, yet, most of them do not explain the actual processes that happen when we use the plugin and how to save the cards and charge it the next time. So, I thought it would be of some help to show how I was able to implement it in one of my projects.

Stripe is a payment gateway with lots of useful features such as recurring payments, escrow accounts, and real-time credit card number validation using Luhn’s algorithm. With the introduction of SCA rules in the UK, Stripe also provides SCA compliant API’s and PaymentIntents make your work very simple.

So let’s get started with it.

Stripe Setup:

The first step would be to create an account in Stripe and switch to Test mode. We will be provided with a secret key and a publishable key. Our Flutter application is linked with the stripe account using the publishable key and merchantId provided by Stripe.

For this, we have to add the stripe_payment package to our project. Follow the instructions on the installation page of the package.

Now, let’s set up the connection in the initState() method of your widget.

The above code connects the application with your Stripe account and therefore, all payments made by this app will be received in your account which you can keep track of in the Stripe dashboard.

Adding a new card:

Next, let us create a Credit Card form to accept a new card from the customer.

The paymentRequestWithCardForm() methodtakes in an argument of type CardFormPaymentRequest(). You can create an object of CardFormPaymentRequest and pass it to the function if you wish to add a billing address. This method creates a native view of the credit card details page in IOS and Android as follows:

card validation | Digiryte

Validation of the card:

The Credit Card number field is validated using Luhn’s algorithm in real-time and also the card type is detected automatically using regular expressions by Stripe. So, we don’t have to worry about the authenticity of the card number. If the user’s card is not supported in a particular geographical region, Stripe handles that and declines the card automatically with an error message. More importantly, Stripe does not save your Credit card number or CVC. It follows a tokenization algorithm to securely save the details of your card which can be reused later by the user.

Customer creation:

Once, you receive the paymentMethod in the server-side, you can create a new Customer and attach this id to that Customer.

Integration with Rails:

The first step in Rails would be the installation of ‘stripe’ gem into your application.

Then your controller needs to be configured with the test secret key provided in your Stripe account.

Creating a new customer:

Now, let’s create a Stripe customer and then attach the payment method that is returned by the client-side to the customer.

The customer object is used for tracking multiple payments associated with the same customer. The above code snippet creates a customer with their email and the payment method is attached to the customer object (For additional attributes in Stripe customer creation, refer to the Stripe documentation).

Creating a paymentintemt:

Once a customer object is created, you can create a PaymentIntent. PaymentIntent object is created to simplify the complexity of asynchronous payment flow by keeping track of the lifecycle of the checkout initiated by the customer. For each transaction, exactly one payment intent is created.

Here confirmation_method can be automatic or manual. Automatic confirmation method is handled by the publishable key and is used when the payment intent is confirmed on the client-side. Manual confirmation method is handled by the secret key and the payment intent status results in either 'requires_confirmation' or 'requires_action' after the next actions are performed.

If the status of the intent is requires_confirmation, the payment is confirmed automatically since we provide explicit confirmation using the confirm attribute. Then the status is changed to succeeded and the after payment logic is handled if necessary.

After the authentication is performed by the client-side, the status of the payment intent changes to requires_confirmation. Then the payment intent is confirmed using the id of the intent returned from the client-side. After confirmation, the status is changed to 'succeeded' and the after payment logic is handled if necessary.

Note: The PaymentIntent can be created and confirmed in the client-side also using the curl command and confirmPaymentIntent() method(refer the official Stripe documentation). But since we’re using a database to store the transaction details, I just preferred doing it in the server-side.

Authenticating a payment intent:

Saving and Reusing cards

And voila!!! We have successfully made our first payment using Stripe.

Saving and Reusing cards:

Now there is the question of how to save these cards used by the customer for future transactions. Stripe makes it extremely easy to do this. Remember how you added the PaymentMethod to the Customer? The Card object in the PaymentMethod object consists of the card details along with a unique fingerprint for each card based on the Card number. So, we just have to save the payment method in the Customer object and whenever we want to display the saved card details, just fetch the payment methods attached to that customer and return the card objects.

The PaymentIntents can be created with any of these existing PaymentMethod ids. The Payment Intent just uses the card information provided in the PaymentMethod id using which it was created and therefore, that same card will be charged. So instead of creating a PaymentMethod, we just pass the existing PaymentMethod id to the server-side.

For charging the existing customer, we need the customer id returned by the stripe customer object at the time of creation. So, let’s store the stripe customer id in the database along with the unique user id. Already existing customers can be retrieved using the following code snippet.

Retrieving saved cards:

If the customer already exists, there is a possibility of two payment methods: one is adding a new card and the other, using the already existing card. We shall use the fingerprint attached to the card in each PaymentMethod to retrieve the existing cards. Note that the fingerprint for each card is unique. If the fingerprint already exists, just create a PaymentIntent using the existing PaymentMethod. If a new card is added, the existing fingerprint check using the PaymentMethod will fail. So, first, attach the PaymentMethod to the retrieved customer and create the payment intent with the given PaymentMethod for the completion of the payment.

A new PaymentIntent is created using @payment_method_id for each transaction and the client_secret in the PaymentIntent object is passed to the client-side.

In this way, we can just keep charging the existing card by using the payment method only. To show the details of your purchase, I have created a Ticket Widget in Flutter. Kindly check that out too.

https://pub.dev/packages/ticket_pass_package#-readme-tab-

By following the above methods, the whole online payment method is simplified and Digiryte, being one of the first companies to embrace Flutter, we have the right technology and innovation to make your idea a grand success at all stages of growth.


Originally published at https://digiryte.com

Ramesh Raja

Written by

Co-Founder & CEO of Digiryte | Business and Innovation Architect with deep experience in strategic planning, branding.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade