跳到主要内容

引导用户绑卡场景

场景介绍​

从5.0.5(17)版本开始，新增支持引导用户绑卡场景。

支持拉起绑卡页面，结合商户营销活动，有效引导用户完成绑卡操作。例如商户针对银行卡开展某营销活动，需要引导用户拉起绑卡页面完成银行卡绑定。

支持商户模型：直连商户、平台类商户、服务商

引导用户绑卡页面展示：

提供绑卡跳转应用信息​

开发者需与华为支付业务侧沟通（合作咨询可点击此处）后提供以下应用信息：

应用信息是否必选说明
AppID是应用的AppID（在AppGallery Connect网站点击“开发与服务”，在项目列表中找到项目，在“项目设置 > 常规”页面的“应用”区域获取“APP ID”的值）。

业务流程​

开发者接入引导用户绑卡，具体接入流程如下：

场景1：用户取消绑卡

  1. 商户客户端调用requestBindCard接口拉起用户绑卡页面。
  2. Payment Kit客户端展示绑卡页面，商户客户端可根据用户不同处理场景完成后续流程。
  3. 用户返回或取消绑卡。
  4. Payment Kit客户端返回商户客户端并将绑卡结果一并返回，商户客户端根据绑卡结果完成后续业务处理。

场景2：用户完成绑卡

  1. 商户客户端调用requestBindCard接口拉起用户绑卡页面。
  2. Payment Kit客户端展示绑卡页面，商户客户端可根据用户不同处理场景完成后续流程。
  3. 用户通过绑卡页面完成绑卡操作，Payment Kit客户端会请求Payment Kit服务端处理绑卡。
  4. Payment Kit服务端处理绑卡。
  5. Payment Kit服务端将绑卡结果返回给Payment Kit客户端。
  6. Payment Kit客户端展示绑卡结果页面。
  7. 用户关闭绑卡页后，Payment Kit客户端返回商户客户端并将绑卡结果一并返回。
  8. 商户客户端根据绑卡结果完成后续业务处理。

接口说明​

拉起用户绑卡页面接口。具体API说明详见接口文档。

接口名描述
requestBindCard(context: common.UIAbilityContextcommon.UIExtensionContext): Promise<BindCardResult>

开发步骤​

拉起绑卡页面（端侧开发）​

商户客户端调用requestBindCard接口拉起用户绑卡页面。

当接口通过.then()方法返回结果，则表示接口请求成功，通过.catch()方法返回异常表示请求失败。当此次请求有异常时，可通过error.code获取错误码，错误码相关信息请参见错误码。

示例代码如下：

import { BusinessError } from '@kit.BasicServicesKit';
import { paymentService } from '@kit.PaymentKit';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
  requestBindCardPromise() {
    paymentService.requestBindCard(this.context)
      .then((bindCardResult: paymentService.BindCardResult) => {
        // succeeded in bind card
          console.info(`succeeded in binding card. result: ${bindCardResult}`);
      })
      .catch((error: BusinessError) => {
        // failed to bind card
        console.error(`failed to binding card, error.code: ${error.code}, error.message: ${error.message}`);
      });
  }

  build() {
    Column() {
      Button('requestBindCardPromise')
        .type(ButtonType.Capsule)
        .width('50%')
        .margin(20)
        .onClick(() => {
          this.requestBindCardPromise();
        })
      }
    .width('100%')
    .height('100%')
  }
}