How to add payment method options to your customer journey
How to add payment method options to your customer journey
From paying your mobile phone bill to buying a new insurance plan, a key feature that facilitates the customer experience is the ability to easily select a payment method and proceed with payment. This is a common use case and can be widely used across a variety of service cases.
Explore the reusable payment method components in customer service that can simply be added to any service case to quickly enable the payment method option in a customer journey, in this article.
Payment method options
Payment methods can be configured in the following ways, based on the business need:
- Present the payment methods on file and also provide an option to add new ones
- Present only the list of payment methods on file
- Provide the option to add new payment methods.
The payment method component (DisplayPaymentMethod section) uses two properties that are present on the primary page: the PaymentMethodList page list property and the NewPaymentMethod page property. PaymentMethodList is used to present the list of payment methods on file for a customer and proceed with a selection, whereas the NewPaymentMethod is used to add a new payment method.
|
On Adding
|
|
|---|---|---|
| Present only the list of payment methods on file
Only the PaymentMethodList page list property has been populated. |
Provide the option to add new payment methods
Only the NewPaymentMethod page property has been populated. |
Present the payment methods on file and also provide an option to add new payment methods.
Both the PaymentMethodList page list property and NewPaymentMethod page property have been populated. |
Configuring the data source
To begin, the data source needs to be configured to fetch and save the payment method details for a customer.
Configure the source of the following data pages:
- D_PaymentMethodList
- D_PaymentMethodSavable
Adding payment methods to your service case
- Embed the DisplayPaymentMethod section to your service case where you want the payment methods to be displayed.
- Load .PaymentMethodList and .NewPaymentMethod properties before the section loads up, depending on your use case.
- By default, .PreferredMode is set to All in NewPaymentMethod to show all payment modes: card, bank account, and so on.
- To implement a preferred mode to be displayed on screen, do the following:
- Set .NewPaymentMethod.PreferredMode = Card/Bank
- Set .PaymentMethodList().Action = None for the mode you do not want to display.
- To implement a preferred mode of payment, refer to the steps in the PreferredPaymentMode data transform.
- Save the selected payment method ID and mode on the post processing steps. Note: .PaymentMethodList and .NewPaymentMethod are transient.
- Set .PaymentMethodId and .PaymentType properties on the primary page.
Updating system of records
The PaymentMethodList page list property is sourced from a savable data page and at the end of the case, the same property can be used to persist the payment methods related data.
Add the Save Data Page smart shape on your end flow and provide the .PaymentMethodList property as input.
