Payment Form

Nov 21, 2022
2 minutes to read

The Payment Form (PaymentForm) is a ready-to-use and custom-designed credit card checkout form with integrated masking and card number validation.

Show Payment Form

The following example demonstrates how to show the Credit Card Form. Use the PaymentForm.Card and PaymentForm.CardHolder properties to obtain the card details entered by the user.

csharp

using DevExpress.UITemplates.Collection.Forms;

// ...
using(var frm = new PaymentForm()) {
    if(frm.ShowDialog() == DialogResult.OK) {
        var card = frm.Card;
        string cardHolder = frm.CardHolder;
        // ...
    }
}

Form Title and Buttons

Use the following properties of the form’s ViewModel to personalize its title and buttons:

Title - the form’s title.
AcceptCaption - the Accept button’s text.
DeclineCaption - the Decline button’s text.
C#

csharp

public partial class PaymentForm : HtmlFormBase {
    // ...
    public class ViewModel {
        public string Title {
            get { return "PAYMENT DETAILS"; }
        }
        public string AcceptCaption {
            get { return "Confirm and Pay"; }
        }
        public string DeclineCaption {
            get { return "Cancel"; }
        }
        // ...
    }
}

Form Actions

Use the following methods of the ViewModel to implement the form actions.

Accept - This method should implement Checkout. It is called when the user clicks the Confirm and Pay button.
Decline - This method should implement Checkout cleanup. It is called when the user clicks the Cancel button.
C#

csharp

public partial class PaymentForm : HtmlFormBase {
    // ...
    public class ViewModel {
        // ...
        public void Accept() {
            /* Implements Checkout */
        }
        public void Decline() {
            /* Implements Checkout cleanup */
        }
        // ...
    }
}