Working with the Credit Card Detail Web Part

Article
11/17/2011

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 select existing billing addresses in their profiles from a drop-down list. When they choose 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 the following 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 and describes the Credit Card Detail Web Part properties.

Property	Maps to	Type	Description	Default
"Action" URL parameter	ActionQueryParameter	String	Sets the name of the "action" parameter to use when creating URL queries to the "credit card detail" page. This setting must specify the same name expected by the destination page.	act
Display "Back" button	AllowBackUrlButton	Boolean	If checked, a "back" button is displayed which lets the shopper return to a previous page.	False
"Billing address" section title text	BillingAddressHeaderLabelText	String	Sets the text displayed above the "billing address" section.	ProfileResources.CreditCardListBillingAddressHeaderLabelText
"Add new credit card" button text	ButtonAddNewCreditCardText	String	Sets the text displayed on the "add new credit card" button.	Add Credit Card
"Back" button text	ButtonBackText	String	Sets the text displayed on the "back" button.	Back to
"Edit" button text	ButtonEditText	String	Sets the text displayed on the "edit" button	Edit
"Remove" button text	ButtonRemoveText	String	Sets the text displayed on the "remove" button.	Delete
"Credit card number" column header text	CCNumberHeaderLabelText	String	Sets the text displayed at the top of the "credit card number" column.	Number
"Credit card type" column header text	CCTypeHeaderLabelText	String	Sets the text displayed at the top of the "credit card type" column.	Type
Use "delete confirmation" pop-up	ConfirmDeletion	Boolean	If checked, causes a pop-up box to be displayed asking the shopper to confirm the deletion. You can configure the text displayed by using 'the "Delete confirmation" pop-up text' field.	True
"Credit Card Detail" page URL	CreditCardDetailUrl	String	Sets the page URL to redirect to in order to view or edit credit card details.	ProfileResources.CreditCardDetailUrl
"Credit card id" URL parameter	CreditCardIdQueryParameter	String	Sets the name of the "card id" parameter to use when creating URL queries to the "credit card detail" page. This setting must specify the same name expected by the destination page.	card
"Credit card list" section title text	CreditCardListHeader	String	Sets the text displayed before the "credit card list"	My Credit Cards
CSS class	CssClass	String	Sets the style sheet "class" name used when outputting the HTML markup of this web part.	Blank
"Default credit card" label text	DefaultCreditCardLabelText	String	Sets the text displayed on the credit card profile to indicate that it is the "default credit card".	Default Credit Card
"Delete confirmation" pop-up text	DeleteConfirmationMessage	String	Sets the text displayed on the delete confirmation pop-up.	Confirm Credit Card Deletion
Instructional text	InstructionText	String	Sets the text displayed above the credit card section. Can be used to provide instructions to shoppers.	Add a new credit card to your account below.
"Remove" link button image Url	RemoveLinkButtonImageUrl	String	Sets the URL of the image to use as a "remove" button.	Blank

Customization

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

Important Note:
If you make modifications to the ASCX file to customize a Web Part, rename the modified ASCX file to avoid the risk of overwriting your Web Part customizations during an upgrade.

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. The following is an example of the CreditCards section:

<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.