Manage Payment Methods¶

The Management Payment Methods screen can be accessed by selecting Manage Payment Methods from the Preferences menu on the navbar or by saving a payment method from the Payment Confirmation screen.

By default the screen looks as follows:

The screen contains the following elements:

1. A Hide Filters link that will hide the available screen filters
2. From Date and To Date — Date filters to search the payment methods by dates
3. Payment Method — Drop-down with the available payment methods, the user can select multiple payment methods as a search criteria.
4. Last 4 Digits Card/Account #(s) — Field to enter multiple card numbers with last 4 digits
5. Reset button to reset the filter to its default value
6. Filter button to filter the on-screen data based on the selected filter value
7. A dropdown to change the number of rows displayed in the table
8. A dynamic search box that will show rows matching the user-entered criteria
9. Table containing all payment methods saved by all users
10. Payment Method Name — A link that will take the user to the Edit Payment Method screen for the selected payment method
11. Default? — A radio button to toggle the selected payment method as default for payments made by the user
12. Delete? — A link that will delete the selected payment method
13. A pager to go between pages in case there are more rows than what will fit on the screen
14. Add — button that will take the user to the Add Payment Method screen when clicked.

Add Payment Method¶

The default Add Payment Method screen looks as follows:

The Add Payment Method screen looks very similar to the Make A Payment screen, with the exception of a Payment Method Nickname field that allows the user to create his or her own nickname for the payment method, which will then display in the Payment Method dropdown.

Credit Card¶

The Add Payment Method screen for a credit card contains the following:

1. Payment Method — Credit Card
2. Card Type — The type of credit card being used for the payment
3. Name On Card — The cardholder's name
4. Card Number — The full number on the front of the credit card
5. Expiration Month/Year — The expiration date (2-digit month and year) of the credit card
6. Card Security Code — The 3- or 4-digit code on the back of the card
7. An eye and information icons to unmask the Security Code field value and with the related information text

PINless Debit Card¶

The Add Payment Method screen for a debit card contains the following:

1. Payment Method — PINless Debit Card
2. Card Type — The type of debit card being used for the payment
3. Card Number — The full number on the front of the debit card
4. Process as debit or credit? — Whether the payment should be run as a debit or credit transaction. This will only display if the card supports being run as either credit or debit.
5. First Name — The cardholder's First name
6. Last Name — The cardholder's Last name
7. Expiration Month/Year — The expiration date (2-digit month and year) of the debit card
8. Card Security Code — The 3- or 4-digit code on the back of the card

eCheck¶

The Add Payment Method screen for an eCheck contains the following:

1. Payment Method — eCheck
2. Routing Number — The routing number of the financial institution associated with the bank account
3. Account Number — The full account number
4. Re-enter Account Number — Field to re-enter Account number
5. First Name — The first name of the account holder
6. Last Name — The last name of the account holder
7. Bank Name — The name of the financial institution associated with the bank account/routing number
8. Account Type — The type (Checking, Savings, General Ledger, Corporate Checking) of account to be used in the payment
9. Date of Birth — The date of birth of the account holder
10. Drivers License Number — The drivers license number of the account holder
11. Drivers License State/Province — The state (United States) or province (Canada) that issued the account holder's drivers license

The screen also contains a Billing Information section for the billing information associated with the card or account.

Edit Payment Method¶

The Edit Payment Method screen looks and behaves very similar to the Add Payment Method screen with the exception that users cannot modify the Currency, Payment Method Name, Payment Method, Card Type, or Card Number.

The Edit Payment Method screen also has a disabled Default? radio button to indicate that the user has set this payment method as the default for payments.

Both the Add Payment Method and Edit Payment Method screens contain Cancel and Review buttons.

The Review button is disabled until all required fields are filled out. The Cancel button will take the user back to the Manage Payment Methods screen. Clicking the Review button will take the user to the Review Payment Method screen.

Review Payment Method¶

The Review Payment Method screen looks the same as the Modify Payment Method screen, with the exception that all of the fields are disabled.

The Review Payment Method screen contains Modify, Cancel, and Save buttons.

Clicking Modify will take the user back to the Edit Payment Method screen. Clicking on Cancel button will cancel the process and takes the user to Manage Payment Methods screen. Clicking Save will attempt to save the payment method.

Users will be taken to the Confirmation screen with the Payment Method Details.

Confirmation page can also be viewed with the card image. The user can switch from the Text to Image by using the toggle switch.

The Image view looks as follows:

1. Confirmation screen contains the Print button to print the payment method details.

1. Confirmation screen contains Add and Manage Payment Methods buttons.

Clicking Add will take the user to Add Payment Method screen and clicking Manage Payment Methods link will take to the Manage Payment Methods screen.

Users will be returned to the Add Payment Method screen, and an error will display, if the payment method fails to save.

Delete Payment Method¶

A Payment Method can be deleted by selecting Delete button in the Manage Payment Methods page from that repective payment method row.

Clicking upon Delete button a popup gets displayed as follows:

Clicking upon Cancel button in the popup, cancels the Delete process and closes the popup. Whereas, clicking upon Confirm button in the Delete Payment Method popup deletes the payemnt method and a message displays as follows:

---

Mobile View¶

The mobile view of the Manage Payment Methods screen uses a card interface in order to display as much data as possible while still making it viewable on a mobile device.

The screen contains the following elements:

1. Screen title
2. Menu button
3. Hide/Show Filters link that will hide or show the available screen filter
4. A card that shows saved payment method-related information
5. Modify button which takes the user to Modify Payment Method screen
6. Delete button highlighted in red allows users to delete the saved payment method
7. Add button which takes the user to Add Payment Method screen to add a new payment method.

---

Updated As Of Version 5.0.0.8