XamGirl

Let’s start

Adding your credit card information in an application involves many validations since you want to make sure that all information is added properly. There are a few things we can do to improve the user experience when adding this information such as presenting the form in a nice friendly way and adding instant feedback on what’s been added.

In this article, I will show you how to create a beautiful credit card payment UI, inspired by the following UI from CVTemplates.

Also we will add some validations and styling such as:

• Fields length validation
• Fields mask
• Credit card Icon/Background color according to the credit card provider

I took all the credit card validations from this great article by SomosTechies.

The result will looks like this:

Let’s code step by step

1-Add the XamarinFastEntry.Behaviors Package

We will use this package to set the mask and format for our text entries.

2-Create the Card Number to Image Converter

As mentioned before we will change the Icon based on the credit card provider, to achieve this will use this converter by SomosTechies.

Will add a new converter to change the background color according to the card type (based on the credit card number). Since will be using the same credit card regex I created a base class to do these validations.

3-Add the Converters

Add the converters in your App.xaml (Or in the Page XAML if you prefer).

We added the CardNumberToImageConverter twice with different keys, that’s because we will use different images for the main card view and other ones for the card entry Icon.

4-Add the views

Now we will put everything together by adding the views, the behaviors to the entries and the converters to the images.

As you see in the XAML above we are making use of Xamarin.Forms.Visual.Material, so make sure to install this package. Be also aware we are using the new Xamarin.Forms checkbox so should use Xamarin.Forms >= 4.1.

5-Remove the entry borders

The original design has a custom entry to make it simple we will remove the border entry. For that, we will customize the material entry by creating our own visual entry renderer.

Copy the iOS renderer here.

Copy the Android renderer here.

Copy the Control here.

About this article

This is article number 9 of the #XamarinUIJuly, which is basically a series of blog posts where every day of July a Xamarin community member posts a blog about Xamarin and UI. Check more info here:

That’s all for now.

You can check the full source code here.

Happy coding.