Pay for application

### 📖 User Story
**As a Strata Hotel user,** after I click on the "submit and pay" button on the "review and submit" page,
**I want** the system to take me to a payment page where I can see the total amount due and the available payment methods,
**So that** I can pay the fee for the registration application.

### Context:

- Payment must be received for the STR registry to process registrations.
- Applications will not be sent to the queue for automatic or provisional approved unless a payment has been made
- Applications will not be reviewed by STRR staff unless payment has been made.
- Applications with outstanding payments should clearly indicate that payment is still due.
- Successful payments result in a status change see https://bcgov.sharepoint.com/:x:/r/teams/09399/Shared%20Documents/Product-Scrum%20Team%20Chat/VALIDATIONS%20%20AND%20STATUSES/Field%20validation%20and%20Status%20Table.xlsx?d=wd73427566b6148b48776b7c8682de8e9&csf=1&web=1&e=pu3Dtr&nav=MTVfezRGMDRERDMwLUFGRUQtNDE4Ri1CQUU3LTkxQjc0ODI2RTU4RH0


### 📏 Business Rules

- [ ] Display the correct fee amount.
- [ ] Users can only use credit card payment
- [ ] Timestamp marks when the payment is officially recognized, and that moment will be treated as the point at which the payment is considered valid or accepted.
- [ ] If the payment fails, the application should be marked as "Payment Due."

#### 🎨 UX/UI Link:

### 🎭 Story Scenarios

#### Scenario: Click submit and pay from the "Review and Submit" Page and move to the Payment Page
- **Given** I have clicked submit and pay on the "Review and Submit" page,
- **And** my application has be technically submitted
- - **And** my application status is "Payment Due"
- **And** I have the required account configurations to be able to pay (I thought there was something we have to do aside from the user creating and SBC Connect account see #23479

- **Then** I should be presented with the payment component, showing the total amount due and available payment methods.

#### Scenario: Payment fails
- **Given** I have attempted to make a payment,
- **When** the payment is unsuccessful,
- **Then** the application should be marked as Payment Due

🌐 Accessibility Scenarios

### Keyboard Users
**Scenario: Comprehensive Keyboard Navigation**
Given I am a keyboard user on the website
When I use the Tab key to navigate through the website
Then all interactive elements should be accessible and highlighted
And I should be able to activate these elements using the Enter or Space key.

**Scenario: Full Content Accessibility via Keyboard**
Given I am a keyboard user navigating the website
When I traverse through different pages and sections
Then all content should be fully accessible using the keyboard alone
And there should be no traps preventing me from navigating away using the keyboard.

### Screen Reader Users
**Scenario: Accessible Image Descriptions**
Given I am using a screen reader on the website
When I encounter images
Then each image should have descriptive alt text that conveys the same message as the image.

**Scenario: Structured Navigation for Screen Readers**
Given I am navigating the website using a screen reader
When I move through different page elements
Then the content should be structured with proper headings
And the reading order should be logical and sequential.

**Scenario: Descriptive Form Fields**
Given I am filling out a form using a screen reader
When I navigate through the form fields
Then each field should be clearly labeled with descriptive text
And instructions should be directly associated with their respective inputs.

### Low Vision Users
**Scenario: Effective High Contrast Mode**
Given I am a user with low vision on the website
When I enable high contrast mode
Then all content should display with high color contrast suitable for low vision
And the layout should remain coherent and unchanged.

**Scenario: Text Resizing Accommodation**
Given I am a user with low vision on the website
When I increase the text size
Then the text should resize without loss of information or functionality
And the page layout should adapt accordingly without disrupting the user experience.

**Scenario: Personalized Styling Preferences**
Given I am a user with low vision adjusting settings on the website
When I customize my styling preferences, including colors, fonts, and spacing
Then these adjustments should be applied consistently across all pages
And the changes should persist during my entire session or until altered by me.

🌍 Global Scenarios

### Data Validation
- Mikaela to confirm: Do we need these validations for MVP? Ensure input data is in the correct format, as defined by business rules.

### Internet Connection

#### Standard Internet Connection
Given I am accessing the website with a standard internet connection
When I navigate to any page on the site
Then the page should load completely within 2 seconds, ensuring a fast and efficient user experience.

#### Low-Speed Internet
Given a user accesses the "Application Details View" with a low-speed internet connection (defined as under [specific speed] Mbps)
When the user attempts to load and interact with the dashboard page
Then the "Application Details View" should prioritize critical content and functionality, loading essential elements first to ensure usability.

#### Mobile Responsiveness
Given I am accessing the "Application Details View" on a mobile device
When I click on any link
Then the content should display correctly and be easily editable on my device, ensuring a responsive design.