Payment Details
This screen allows the pet owner to configure the pet policy by indicating a preferred type of payment (direct debit or card payment), the frequency for premium payments and a preferred start date for the cover. Since the payment details provided by the pet owner impact the policy's management, this step leaves no room for errors - following that only option sets are available for input. For this step, the values inserted by the user are stored in the Pet Quote entity.
From here: When the user presses Continue, and depending on the payment type selected by the user, the next step on display is either Direct Debit or Payment Card.
On-Screen Assets
The following user interface components are included with the Payment Details 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: Tell us how you would like to pay |
| Payment Frequency Option Set Buttons | Under the label How often would you like us to collect payment?, this option set captures the value (payment frequency) indicated by the user. The option set values are: Monthly, and Yearly. |
| Policy Start Date Picker | Under the label When should we start to cover (pet name)?, this input form captures the value (policy start date) picked by the user. |
| Payment Type Option Set Buttons | Under the label How would you like to pay?, this option set captures the value (payment type) indicated by the user. The option set values are: Direct Debit and Card. |
| 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 Details screen:
