Payment Card
When the card payment type is chosen by the user, this screen is displayed in order to allow the pet owner to provide the card details for the future payments, on the current policy's installments. For this step, the values inserted by the user are stored in the Billing Payment Card entity - this is a transient data entity present in the journey for simulation purposes, namely it is a placeholder for the integration with the Billing and Collection solution.
Once the policy holder agreed to pay the premiums by the card payment method, a billing procedure must be followed, by the insurer, in order to notify the policyholder about the payment arrangement and to send the necessary instructions (the invoice for every installment), regularly, so that the payer transfers the premium amount into insurer's account. For the Pet Insurance solution, the management of card payment operations can be handled through the integration with the Billing and Collection module. However, the Pet Insurance solution can be also customized to send the payment details to another third-party billing application.
From here: When the user presses Continue, the Congratulations screen is displayed.
On-Screen Assets
The following user interface components are included with the Payment Card screen:
| UI Components | Description |
|---|---|
| Progress Bar | The progress bar gives the user a visual answer to the "How much till I get insurance for my pet?" question. |
| Back Button | The back button helps the user to re-take previous steps in the flow. |
| Help Button | The help button allows the user to find support for completing the flow. |
| Heading Title | The following heading title is displayed in the header section: Pay by Card |
| Supporting Text | The following supporting text is displayed under the heading title: You have decided to pay your (selected frequency) premium of (calculated premium amount) by PayU |
| Card Number Input Form | Under the label Card Number, this input form captures the value (card number) inserted by the user. |
| Name of cardholder Input Form | Under the label Name of cardholder, this input form captures the value (cardholder name) inserted by the user. |
| Expiry date Input Form | Under the label Expiry date, this input form captures the value (card expiry date) inserted by the user. |
| CVC Input Form | Under the label CVC, this input form captures the value (CVC number) inserted by the user. |
| Icon | Card logo - From the public domain, released under the Creative Commons (CC0) license. |
| Action Button | Continue - This button is used to display the next flow step. |
For details about the default UI style components used for creating the journey, consult the UI Style Components list on the Customer Journey page.
Below is an example of the Payment Card screen:
