还款 H5 页面改造 — 补充需求
目标：在现有“41尼日-收银台-首页”基础上补齐 Loan ID 与服务提供方信息、还款方式选择、银行卡 OTP、OTP 短信及切卡流程，并在还款详情页和确认页增加
Privacy Policy、Terms & Conditions的确认与查看入口；本期不提供新增银行卡入口，也不恢复首次进入 H5 的手机号尾号验证。
1. 设计稿与页面定义
- Figma 文件：袋鼠金融 APP
- 设计分区：
0817 · Repayment page revamp
| 需求名称 | Figma 页面 | Node ID | 本文简称 |
|---|---|---|---|
| 还款方式与订单信息 | 91.01 Repayment · Payment methods | 171:249 | 详情页 |
| 默认卡与 OTP 验证 | 91.02 Repayment · Card OTP | 173:260 | 确认页 |
| 最后一次 OTP 倒计时 | 91.02a Repayment · Card OTP · Phone verification entry | 329:266 | 自动切换态（默认第 2 次） |
| OTP 手机号后 4 位补充验证 | 91.03 Repayment · Phone verification | 238:264 | 手机验证态 |
| 切换银行卡 | 91.04 Repayment · Switch card | 181:236 | 切卡页 |
本文所称“详情页”固定指 91.01，“确认页”固定指 91.02，避免与还款结果详情混淆。
2. 本期范围
| 能力 | 是否纳入 | 说明 |
|---|---|---|
| 展示 Loan ID、服务提供方 | 是 | 服务提供方按业务线显示 KasyKredit、PocketBuy 等服务端返回值 |
| 还款方式单选 | 是 | 每种方式均为单选项；支付卡选项在详情页不展示卡号或尾号 |
| 默认还款方式 | 是 | 默认选中 Transfer Repayment（Virtual Account）；用户可切换到其他可用方式 |
| 默认卡与 OTP 确认 | 是 | 选择 Bank Card 后打开半弹窗，默认选中有效默认卡并输入 OTP |
| OTP 短信与补充验证 | 是 | 达到 OTP 最大发送配置后的最后一次倒计时结束时，自动切换至手机号后 4 位验证；默认配置为 2 次，验证通过后直接确认还款 |
| 切换银行卡 | 是 | 展示有效已保存银行卡，当前卡默认选中 |
| 新增银行卡 | 否 | 切卡页不展示 + Add another card；本期不进入绑卡流程 |
| Privacy 与 Terms 确认/查看 | 是 | 详情页、确认页均展示两个查看入口；不设置独立复选框 |
| 协议正文编辑及法务定稿 | 否 | 由对应业务线/服务提供方提供已生效的正文、URL 和版本 |
3. 用户流程
- 用户通过还款 H5 链接进入。
- 用户直接进入详情页，查看 Loan ID、服务提供方、还款金额和还款方式。
- 详情页默认选中
Transfer Repayment（Virtual Account）；用户可单选切换支付方式。 - 用户选择
Bank Card且存在有效已保存卡时，打开银行卡 OTP 半弹窗，默认选择默认卡并发送 OTP。 - 首次 OTP 发送后进入 OTP 输入态，并展示 60 秒重发倒计时；倒计时结束后，如未达到当前配置的最大发送次数，用户可再次发送 OTP。
- 达到当前配置的最大发送次数并成功发送 OTP 后，重新开始 60 秒倒计时；倒计时结束时自动切换至手机号后 4 位验证态，不提供手动入口。最大发送次数默认值为 2。
- 手机验证态仅显示后 4 位输入框和
Confirm Repayment；不显示 OTP 输入框、OTP 重试次数或恢复 OTP 入口。 - 用户输入正确的手机号后 4 位并点击
Confirm Repayment后，直接确认还款；不再发送第 3 次 OTP，也不返回 OTP 输入态。 - 用户可在 OTP 输入态点击
Change打开切卡页，从有效已保存银行卡中切换。 - 用户查看协议后返回当前页面时，已选还款方式、银行卡和未提交输入保持不变。
- 用户点击详情页或还款确认页的主按钮即确认当前展示版本的协议，并继续对应业务动作；页面不增加独立协议复选框。银行卡 OTP 验证页不展示协议入口。
4. 页面需求
4.1 详情页
-
页面上方展示：
Loan ID · {loanId}；- 服务提供方
{serviceProviderDisplayName}。
-
服务提供方由业务线映射后返回，例如
KasyKredit、PocketBuy。 -
还款方式均使用单选控件，同一时刻只能选择一种。
-
默认选中
Transfer Repayment（Virtual Account），并置于还款方式列表首位；用户可单选切换至银行卡或 USSD。 -
Bank Card在本页只显示支付方式名称与说明，不显示卡品牌、完整卡号、脱敏卡号或尾号。 -
没有有效已保存卡时，
Bank Card置为不可选并给出简短不可用提示；不进入 OTP 页、不提供新增银行卡入口。 -
主按钮上方展示协议确认文案：
By continuing, you confirm that you have read and agree to thePrivacy Policy and Terms & Conditions -
Privacy Policy、Terms & Conditions是两个独立的绿色下划线查看入口；不展示协议复选框。 -
点击
Confirm表示用户同意当前展示的两份协议版本并继续；是否可点击仅由还款方式、金额及页面业务校验决定，不依赖协议勾选状态。
4.2 确认页：默认卡与 OTP
- 以底部半弹窗展示，默认选中服务端返回的有效默认卡。
- 可展示卡品牌和脱敏尾号，禁止展示完整卡号；示例：
GTBank Visa ·••• 1234。 - 有两张及以上有效已保存卡时，
Change可点击并进入切卡页；仅有一张有效卡时，Change置为不可用，不展示切卡页。 - 展示 OTP 接收手机号的脱敏信息、OTP 输入框和倒计时重发入口。
- 手机号脱敏规则：国家码正常展示，仅展示国家码后的前 3 位，其余数字全部掩码；尼日利亚示例为
+234 801 ••• ••••。不得在该页面展示手机号后 4 位。 - 首次 OTP 发送后展示 60 秒倒计时；倒计时结束前重发入口不可点击，结束后如未达到当前配置的最大发送次数则可再次发送 OTP。
- 达到当前配置的最大发送次数并成功发送 OTP 后，展示“手机号验证将在倒计时结束后自动开始”的倒计时状态；倒计时结束时自动进入 91.03，不展示手动验证入口、发送次数或触发阈值。
- 本页面不展示
Privacy Policy、Terms & Conditions或协议确认文案；点击Confirm Repayment仅用于提交当前卡与 OTP 的还款验证。
4.3 OTP 补充验证态：手机号后 4 位验证
- 仅在达到当前配置的 OTP 最大发送次数后的最后一次 60 秒倒计时结束时自动进入，不作为首次进入还款 H5 的身份验证或页面拦截；默认配置下为第 2 次 OTP。
- 此态仅提供手机号后 4 位补充验证，不展示 OTP 输入框、OTP 重试次数、恢复 OTP 入口或“降级”说明。
- 展示文案：
Didn't receive the OTP? Verify your phone's last 4 digits.
- 提供 4 位数字输入框和
Confirm Repayment按钮；只能输入数字，长度必须为 4。输入中需展示聚焦边框、已输入数字与光标；未满 4 位时主按钮不可点击。 - 手机号后 4 位必须由服务端与当前客户标准化后的绑定手机号比对；前端不得获取完整手机号或在本地完成比对。
- 校验通过后直接确认还款；校验失败不得发送短信或进入 OTP 输入态。
4.4 切卡页
- 以底部半弹窗展示有效已保存银行卡。
- 当前卡/默认卡预选；用户每次只能选择一张卡。
- 列表项展示银行/卡组织与脱敏尾号，禁止展示完整卡号。
- 点击
Use selected card返回确认页，并更新确认页已选卡。 - 本期不展示
+ Add another card，也不从本页面进入绑卡流程。 - 仅有一张有效已保存卡时，不进入本页面，确认页的
Change置为不可用。 - 没有任何有效已保存卡时，详情页的
Bank Card不可选；不展示空白切卡列表，也不以“新增银行卡”作为本期兜底动作。
5. 协议确认与查看规则
- 详情页、还款确认页必须同时展示
Privacy Policy和Terms & Conditions；银行卡 OTP 验证页（91.02/91.02a）及手机号后 4 位验证页（91.03）均不展示协议入口。 - 协议入口使用正文内链接样式，不增加单独勾选框、开关或二次确认弹窗。
- 点击当前页面主按钮才表示用户确认该页面展示的协议版本。
- 协议页面优先在 H5/WebView 内打开；关闭或返回后回到原页面并保留当前业务状态。
- 协议正文必须按当前
bizCode显示对应服务提供方、适用业务线和当前生效版本，不能把 KasyKredit 与 PocketBuy 的协议交叉展示。 - 本期不新增独立的协议勾选或同意记录；主按钮代表当前页面协议确认，协议打开行为仅用于页面埋点和体验分析。
6. 银行卡与 OTP 业务规则
- 仅展示当前用户、当前业务线下可用于还款的已保存卡；卡信息仅以卡组织、银行和脱敏尾号展示。
- OTP 最大发送次数为可配置业务规则，配置项为“同一还款会话成功发送 OTP 的最大次数”，默认值为 2，需支持0次（直接进入输手机号后4位的流程）；首次发送计入次数，后续正常重发每成功一次计入一次。手机号后 4 位验证不发送恢复 OTP。
- 正常重发间隔为 60 秒；OTP 有效期为 10 分钟。每次成功发送新 OTP 后，前一个 OTP 立即失效，避免同一会话存在多个可用验证码。
- 达到当前配置的最大发送次数并成功发送 OTP 后开始最后一轮 60 秒倒计时；倒计时结束即自动进入手机号后 4 位验证，前端不提供手动切换入口。默认配置下，该次为第 2 次 OTP。
- 手机号后 4 位最多校验 3 次；格式错误不计入校验次数。校验失败或次数耗尽时不得再发送恢复 OTP。
- 刷新、返回、关闭半弹窗或切换银行卡不得重置短信发送次数、OTP 有效状态或手机号后 4 位校验次数。
- OTP 错误、过期、频控、支付处理中和结果未知均显示稳定且不含敏感信息的提示；支付结果未知时必须保持处理中并避免用户重复发起还款。
6.1 uSpeedo OTP 短信模板
| 字段 | 值 |
|---|---|
| 业务分类 | Repayment OTP |
| Template Name | REPAYMENT_OTP_CODE |
| Template ID | UTA260818T4NNVH |
| Type / Purpose | Verification Code / 1 |
| Content | Your {1} repayment verification code is {2}. It expires in {3} minutes. Do not share this code with anyone. |
| 变量映射 | {1}=serviceProvider；{2}=otp；{3}=expiryMinutes |
| Service Account | Default international SMS project (60209091) |
| 报备状态 | 已报备 |
| 报备时间 | 2026-08-18 14:03:18（UTC+8） |
| 长度校验 | 以 KasyKredit、6 位 OTP、10 分钟估算为 116 字符，OK: 1 segment |
| 台账 | uSpeedo 短信模板台账 Sheet1!A38:M38 已写入并回读 |
{1}必须使用当前页面相同的serviceProviderDisplayName，例如KasyKredit或PocketBuy，禁止业务线串用。{2}为一次性验证码，日志、埋点和对客错误中不得记录明文。{3}与服务端实际 OTP 有效期保持一致，禁止短信文案与校验时限不一致。
7. 异常处理
| 场景 | 页面行为 |
|---|---|
| Loan ID 无效/过期 | 阻断进入还款方式页，提示重新获取有效链接 |
| 服务提供方或协议元数据缺失 | 展示可重试错误，禁止继续提交 |
| 协议页面加载失败 | 保留当前页面状态，支持重试打开；主流程不得伪造“已查看” |
| 无有效银行卡 | 引导选择其他还款方式，不展示新增卡入口 |
| OTP 错误/过期 | 显示稳定英文提示，允许修改或重新获取 OTP |
| 最后一次 OTP 倒计时结束 | 自动进入手机号后 4 位验证；不展示手动入口、次数、阈值或降级机制 |
| 手机号后 4 位格式错误 | 本地提示输入 4 位数字，不发起校验、不发送 OTP |
| 手机号后 4 位不匹配 | 展示稳定英文提示和剩余尝试次数，不发送 OTP |
| 手机号后 4 位尝试耗尽 | 关闭恢复入口，引导选择其他还款方式或联系支持 |
| 后 4 位验证通过 | 直接确认还款，不再发送 OTP 或返回 OTP 输入态 |
| OTP/短信触发频控 | 展示可再次尝试的剩余时间，不通过切卡、刷新或返回绕过频控 |
| 支付结果未知 | 进入处理中状态并查询原还款引用，禁止重复扣款 |
8. 埋点
本功能必须遵循 11-前端全流程埋点需求 的统一模型：事件名使用小写下划线；view/click/input/result/popup_view/popup_click 按真实动作区分；公共字段由统一上下文注入。本表只补充 5.1 还款/支付 未覆盖的卡 OTP、切卡、协议和手机号后 4 位验证事件，不新建 repayment_method_select、repayment_details_confirm、repayment_confirm_submit 等同义事件。
详情页曝光、还款方式选择、确认提交和支付结果继续使用既有事件：repayment_method_page_view、repayment_method_click、repayment_confirm_click、repayment_submit_result、repayment_result_page_view。其中还款方式选择与提交按公共字段传 payment_method，不把支付方式拼进事件名。
8.1 页面埋点与业务指标
| 流程阶段 | 页面/状态与 owner | 关键事件 | 业务属性及来源 | 衡量目标 |
|---|---|---|---|---|
| 方式选择 | repayment_method_page / H5 | repayment_method_page_view、repayment_method_click | loan_id 取当前展示贷款；payment_method 取用户已选方式 | 各还款方式的选择率与银行卡入口转化 |
| 银行卡 OTP | repayment_method_page 的 card_otp 半弹窗 / H5 | repayment_card_otp_popup_view、repayment_otp_send_result、repayment_otp_verify_result | 卡类型取页面展示的稳定枚举；发送/校验结果取实际业务结果 | OTP 发送成功率、校验成功率与失败原因分布 |
| OTP 补充验证 | repayment_method_page 的 phone_last4_verification 半弹窗 / H5 | repayment_phone_verification_popup_view、repayment_phone_verification_click、repayment_phone_verification_result | 仅记录输入是否完成、长度和验证结果；不记录号码原文 | 最后一次 OTP 后的自动验证进入率、验证成功率与直接还款转化 |
| 切卡 | repayment_method_page 的 card_switch 半弹窗 / H5 | repayment_card_switch_popup_view、repayment_card_switch_click | 可选卡数量、卡组织稳定枚举取页面状态 | 切卡需求及切卡后的支付确认转化 |
| 协议 | repayment_method_page / H5 | repayment_agreement_click | 协议类型及当前版本取页面展示内容 | 协议查看率与支付确认转化 |
| 页面/模块 | 事件名 | 类型 | 触发时机 | 事件特有必传字段 | 字段取值逻辑 |
|---|---|---|---|---|---|
| 详情页、确认页协议入口 | repayment_agreement_click | click | 点击 Privacy Policy 或 Terms & Conditions | agreement_type, agreement_version | agreement_type 仅取 privacy_policy/terms_conditions；agreement_version 取当前展示且可打开的协议版本；公共 content 与 agreement_type 一致，target_page=external_url。 |
| 银行卡 OTP 半弹窗 | repayment_card_otp_popup_view | popup_view | 半弹窗实际展示且默认卡数据就绪 | popup_type, selected_card_type | popup_type=card_otp；selected_card_type 取稳定卡类型/卡组织枚举，不传卡号、尾号、卡 ID 或 token。 |
| 发送/重发 OTP | repayment_otp_send_result | result | 发送或重发短信接口返回 | send_action | send_action 仅取 initial/resend；公共 result/error_code/error_msg 按统一规则传。不上报配置值、累计次数或触发阈值。 |
| OTP 输入 | repayment_otp_input | input | OTP 输入框失焦或填写状态变化 | field_name, filled, value_length | field_name=otp；仅传是否填写和长度，不传 OTP 原文。 |
| OTP 校验 | repayment_otp_verify_result | result | OTP 校验接口返回 | verification_action | verification_action=otp_verify；校验结果与稳定错误码走公共字段，不传 OTP 原文。 |
| 打开切卡 | repayment_card_switch_popup_view | popup_view | 切卡半弹窗实际展示 | popup_type, available_card_count | popup_type=card_switch；只传有效可选卡数量。 |
| 选择银行卡 | repayment_card_switch_click | popup_click | 点击某张已保存卡或确认使用所选卡 | popup_type, action_type, selected_card_type | action_type 取 select_card/confirm_selection；只传卡类型/卡组织枚举，不传卡号、尾号、卡 ID 或 token。 |
| 手机号后 4 位验证弹窗 | repayment_phone_verification_popup_view | popup_view | 最后一次 OTP 的 60 秒倒计时结束后自动展示 | popup_type, entry_mode | popup_type=phone_last4_verification；entry_mode=auto_after_final_otp_countdown；不传手机号、OTP 或内部次数。 |
| 手机号后 4 位输入 | repayment_phone_last4_input | input | 输入框失焦或填写状态变化 | field_name, filled, value_length | field_name=phone_last4；value_length 范围 0–4；不得传输入原文。 |
| 提交手机号后 4 位验证 | repayment_phone_verification_click | popup_click | 点击 Confirm Repayment | popup_type, action_type | popup_type=phone_last4_verification；action_type=confirm_repayment；客户端格式不符时仍记录点击，结果由下一事件记录。 |
| 手机号后 4 位验证结果 | repayment_phone_verification_result | result | 本地格式校验或业务确认结果返回 | verification_action | verification_action=phone_last4_confirm_repayment；格式错误固定使用公共 result=fail/error_code=client_validation_error，验证通过后直接进入既有 repayment_submit_result；不得传后 4 位原文。 |
所有本期 H5 事件须带 scene=repayment、loan_id、is_app_webview 及 第 4.2 节适用公共字段。service_provider_code、agreement_bundle_id、trace_id 仅在当前页面上下文或对应接口返回中可稳定取得时作为扩展属性传入；不以展示名称替代编码。
严禁上报 OTP 原文、手机号后 4 位/完整手机号、完整卡号/尾号、卡 ID、provider token，以及服务端恢复 OTP 的具体阈值或内部判定过程。
9. 验收标准
- 用户通过还款 H5 链接直接进入详情页，不进行手机号尾号验证。
- 详情页准确展示动态 Loan ID 和按业务线返回的服务提供方。
- 默认选中
Transfer Repayment（Virtual Account）；所有还款方式为单选，详情页的银行卡方式不展示任何卡号或尾号。 - 没有有效已保存卡时，银行卡方式不可选；仅有一张有效卡时
Change不可用；有两张及以上有效卡时才能打开切卡页。 - 选择银行卡后打开 OTP 半弹窗，默认卡已选中；手机号仅按
+234 801 ••• ••••展示，不展示后 4 位。 - OTP 发送后的重发倒计时为 60 秒；同一会话成功发送 OTP 的最大次数可配置、默认值为 2，最新 OTP 有效期为 10 分钟且新码使旧码失效。
- 达到配置的 OTP 最大发送次数后，最后一次 OTP 的倒计时结束自动进入手机号后 4 位验证；页面不展示手动入口、发送次数、阈值或降级机制。
- 91.03 仅展示后 4 位输入、输入中样式与
Confirm Repayment；不展示 OTP 输入框、恢复 OTP 或其他额外入口。 - 后 4 位匹配时直接确认还款；格式错误、不匹配或超过 3 次均不得发送新的 OTP；验证通过后按既有还款结果展示。
- 刷新、返回或切换银行卡不重置 OTP 有效状态、发送次数或手机号后 4 位失败次数。
- uSpeedo 模板
UTA260818T4NNVH审批通过后才可配置到生产；发送变量顺序、服务提供方和有效期与本文一致。 - 切卡页没有
+ Add another card或其他新增卡入口。 - 详情页和还款确认页均展示
Privacy Policy、Terms & Conditions两个独立查看入口，且按bizCode展示相应正文；银行卡 OTP 验证页和手机号后 4 位验证页不展示协议入口。 - 展示协议入口的页面均没有协议复选框；点击其主按钮即确认当前展示的协议版本。
- 协议页面返回后，已选还款方式、银行卡及未提交输入保持不变。
- OTP、手机号后 4 位、完整手机号、完整卡号、provider token 不出现在埋点、日志和对客错误信息中。
- 按第 8 节逐条核对事件名、事件类型、公共字段和事件特有字段；不得上报已废弃的同义事件名或未约定字段。
10. 非本期事项
- 新增银行卡、绑卡验证及绑卡结果页。
- 首次进入还款 H5 的手机号后 4 位验证。
- Privacy Policy、Terms & Conditions 正文的法务撰写或版本审批。
- 新增还款通道或调整现有通道路由。
- 修改还款入账、对账和结果同步规则。