Credit Card Detail Web Part

The Credit Card Detail Web Part lets shoppers create a payment record, as well as modify or delete saved credit card information. The credit card information recorded is the card type, card number, expiration date, and billing address. All credit card numbers entered in this Web Part are initially validated by standard card number validation algorithms. The Web Part also lets a particular credit card be tagged as the default for all payments and for fast-checkout options.

Shoppers can choose existing billing addresses in their profiles from a drop-down list. When they select an address, the credit card address information is pre-populated but inactive. The shopper can edit the address or create a new address. If the shopper chooses to enter a new address, the address fields are cleared of their values and become active.

Architecture

The Credit Card Detail Web Part contains these components:

  • CreditCardDetailWebPart/SPCreditCardDetailWebPart: dynamically loads the CreditCardDetail user control.

  • CreditCardDetail.ascx: defines the possible actions that a shopper can take to create, edit, or delete a credit card. It contains a textbox for the card number and drop-down controls for the expiration date, billing address, and credit card type. The "Add a New Address" button redirects the shopper to the Address Detail page. The "Remove", "Cancel", and "Save" buttons post back to the control and make calls to the API to perform the appropriate action, such as saving the credit card data.

Properties

The following table lists the mapping of the properties for the Credit Card Web Part.

Property

Maps to

"Account number" label text

AccountNumberLabelText

"Account number is required" message

AccountNumberRequiredErrorMessage

"Action" URL parameter

ActionQueryParameter

"Address Detail" page URL

AddressDetailUrl

"Billing address" label text

BillingAddressLabelText

"Billing address is required" message

BillingAddressRequiredErrorMessage

"Add new address" button text

ButtonAddNewAddressText

"Cancel" button text

ButtonCancelText

"Save" button text

ButtonSaveText

"Credit card" section title text

CreditCardDetailHeaderText

"Credit card id" URL parameter

CreditCardIdQueryParameter

"Credit card number is invalid" message

CreditCardNumberValidatorErrorMessage

"Credit card type" label text

CreditCardTypeLabelText

CSS Class

CssClass

"Default payment" label text

DefaultPaymentText

"Expiration date" label text

ExpirationDateLabelText

"Credit card expiration date is invalid" message

ExpiryDateValidatorErrorMessage

Instructional text

InstructionText

On completion, go to URL

PostActionPageUrl

"Account number is invalid" message

RegexAccountNumberFormatErrorMessage

"* are required fields" label text

RequiredFieldsText

Customization

You can customize the Credit Card Detail Web Part by modifying the .ascx file.

Configuration Setting

Credit card validation is enabled. For every payment method you need to add the payment methods Group ID to the CreditCards section in the web.config file. An example of the CreditCards section is shown below:

<CreditCards>
     <Card name="Visa" Id="{d8c162c2-25ec-4e5d-9f85-e81168055d9e}" />
     <Card name="MasterCard" Id="{73e5b533-f705-497d-9759-5e5e76f36c80}" />
</CreditCards>

Error Handling

There is no design-time error handing required for this Web Part.

API Dependencies

The Credit Card Detail Web Part is dependent on the UserProfile API. Credit card data is associated with a user profile, so the Credit Card Detail Web Part uses QueryRelatedItem<CreditCard> with the ModelSearch criteria mechanism to retrieve credit card information.

You update credit card information through an update of the user profile. The Web Part uses the UpdateRelatedItem<CreditCard> operation with the ModelSearch criteria mechanism. Similarly, you can delete a credit card through the DeleteRelatedItem<CreditCard> operation.

The Credit Card Detail Web Part uses the CreditCardNumber, CreditCardType, ExpirationMonth, ID, and ExpirationYear strongly typed properties of the API credit card object. You use the member ID to retrieve a card.

See Also

Other Resources

Developing with SharePoint Commerce Services

Profile Administration System Web Parts

Working With the Credit Card Detail Web Part