Update Credit Card Details
Use Update Credit Card Details to update a user's credit card details.
This screen loads the current saved card, captures updated card details through the secure payment field, and submits the selected payment method for the current payment context.
This screen includes:
| # | Element | Description |
|---|---|---|
| 1 | Header | Displays Update payment details with back navigation and settings access. |
| 2 | Payment method section | Displays the saved payment method. |
| 3 | Saved card selector | Lets the user select the saved card for update. |
| 4 | Update credit card details label | Identifies the card details update area. |
| 5 | Card number field | Captures the updated credit card number. |
| 6 | Save card checkbox | Lets the user keep card details secured for future bookings. |
| 7 | Secure payment indicator | Displays the secure payment status and supported payment logos. |
| 8 | Update action | Submits the updated payment details. |
Workflow
- Open Update payment details.
- Load the current payment method.
- Enter the new card details in the secure card field.
- Select or clear Keep card details secured for future appointments.
- Select Update.
- Attach the payment method to the user account.
- Apply the payment method to the appointment when appointment context exists.
- Display success or error state.
Validations
| Scenario | App Behavior | SDK Output |
|---|---|---|
| Session invalid | Block payment update | state = unauthenticated |
| Payment method unavailable | Display payment method error | error = payment_method_unavailable |
| Card number empty | Block update | error = missing_card_number |
| Card details invalid | Display card validation error | error = invalid_card |
| Secure payment field unavailable | Display payment field error | error = payment_field_unavailable |
| Payment method unchanged | Preserve current payment method | state = unchanged |
| Update succeeds | Refresh the displayed payment method | paymentMethod = updated |
| Update fails | Display error state | state = error |
Actions
| Scenario | App Behavior | SDK Output |
|---|---|---|
| Update payment details opened | Load payment method screen | PUT /api/v3/payment-method |
| Saved card selected | Set current payment method | paymentMethod = selected |
| Card details entered | Update secure card field state | card = updated |
| Keep card selected | Save card for future appointments | saveCard = true |
| Keep card cleared | Use card for current payment context only | saveCard = false |
| Update selected | Attach payment method to the account | PATCH /api/v3/payment-method |
| Update succeeds | Display updated payment method | state = updated |
| Update rejected | Preserve previous payment method | state = unchanged |
Endpoint Resources
Update
PUT
v3/payment-method
Displays the screen for updating the patient's credit card payment method.
Confirm Payment Method
PATCH
v3/payment-method
Attaches a payment method to the user account and applies it to the specified appointment.