Plugin.Maui.CardView

Plugin.Maui.CardView - is a cross-platform plugin for .NET MAUI , displays payment card information in a modern, stylized view. Supports card number, cardholder name, expiration date, and integrates with entry fields for seamless user input.

How To Use

Available on NuGet: https://www.nuget.org/packages/Plugin.Maui.CardView/1.0.6

Install this Plugin in your .NET MAUI Project

Now add following namespace to your content page

xmlns:cardView="clr-namespace:CardViewControl;assembly=CardViewControl"

How To Display CardView

Use following code in your content page to display CardView Control

CardViewDemo.xaml

<cardView:CardView CardNumber="{Binding CardNumber}" x:Name="cardView" ExpiryMonth="{Binding ExpiryMonth}" ExpiryYear="{Binding ExpiryYear}" FormattedCardNumber="{Binding FormattedCardNumber}" CVC="{Binding Cvv}" Zip="{Binding Zip}" />

Bind Card Number, Expiry Month, Expiry Year ... Property In ViewModel

Use following code in your ViewModel

CardViewDemoViewModel

public partial class AddCardPopupViewModel : ObservableObject { [ObservableProperty] private string _cardNumber; [ObservableProperty] private string _cardHolderName; [ObservableProperty] private string _cvv; [ObservableProperty] private string _zip; [ObservableProperty] private int? _expiryMonth; [ObservableProperty] private int? _expiryYear; [RelayCommand] private void Submit() { var cardNumber = CardNumber; var expiryMonth = ExpiryMonth; var expiryYear = ExpiryYear; var cvv = Cvv; var zip = Zip; } }

Validating CardView Control

Use following code in your ViewModel

bool isValid = cardView.ValidateCardDetails()