鸿蒙应用服务开发【华为支付服务】客户端

华为支付服务

介绍

本示例展示了使用华为支付服务提供的单次支付,签约代扣。

需要使用华为支付服务接口 @kit.PaymentKit

效果预览

Sample工程的配置与使用

在DevEco中配置Sample工程的步骤如下

  1. [创建项目]及[应用]。
  2. 打开Sample应用,使用[AppGallery Connect]应用的包名替换app.json5文件中的bundleName属性值。
  3. 使用[AppGallery Connect]应用的配置更新module.json5文件相关配置,配置client_id及app_id属性值。
  4. 详细可参见指南[开发准备]。

具体实现

单次支付:

  • 商户服务器按照商户模型调用Payment Kit提供的[直连商户预下单]或[服务商/平台类商户预下单]接口获取预下单号(prepayId),然后组建orderStr返回给客户端。
  • 商户客户端调用requestPayment接口调起Payment Kit客户端收银台。
  • 用户在Payment Kit客户端收银台完成支付操作后,Payment Kit客户端会收到支付结果信息。
  • Payment Kit客户端展示支付结果页,用户关闭支付结果页后Payment Kit客户端会返回支付状态给商户客户端。

签约代扣:

  • 商户服务器按照商户模型调用Payment Kit提供的[预签约接口]获取预下单号(preSignNo),然后返回给客户端。
  • 商户客户端构建contractStr参数,调用requestContract接口调起Payment Kit客户端签约收银台。
  • 用户在Payment Kit客户端签约收银台完成签约操作后,Payment Kit客户端会收到签约结果信息。
  • Payment Kit客户端展示签约结果页,用户关闭签约结果页后Payment Kit客户端会返回商户客户端。
  • 签约完成后,Payment Kit服务器会调用回调接口返回签约结果信息给商户服务器。
  • 商户服务器收到签约结果回调响应后,使用SM2验签方式对签约结果进行验签。
  • 签约完成后,商户服务器可以调用Payment Kit提供的[申请免密代扣接口],完成扣款服务。

参考

/*
 * Copyright (c) Huawei Technologies Co., Ltd. 2023-2023. All rights reserved.
 */
import { paymentService } from '@kit.PaymentKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { common } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;

  requestPaymentPromise() {
    // use your own orderStr
    const orderStr = '{"app_id":"***","merc_no":"***","prepay_id":"xxx","timestamp":"1680259863114","noncestr":"1487b8a60ed9f9ecc0ba759fbec23f4f","sign":"****","auth_id":"***"}';
    paymentService.requestPayment(this.context, orderStr)
      .then(() => {
        // succeeded in paying
        console.info('succeeded in paying');
      })
      .catch((error: BusinessError) => {
        // failed to pay
        console.error(`failed to pay, error.code: ${error.code}, error.message: ${error.message}`);
      });
  }

  requestPaymentCallBack() {
    // use your own orderStr
    const orderStr = '{"app_id":"***","merc_no":"***","prepay_id":"xxx","timestamp":"1680259863114","noncestr":"1487b8a60ed9f9ecc0ba759fbec23f4f","sign":"****","auth_id":"***"}';
    paymentService.requestPayment(this.context, orderStr, (error: BusinessError) => {
      if (error) {
        // failed to pay
        console.error(`failed to pay, error.code: ${error.code}, error.message: ${error.message}`);
        return;
      }
      // succeeded in paying
      console.info('succeeded in paying');
    })
  }

  requestContractPromise() {
    // use your own contractStr
    const contractStr = '{"appId":"***","preSignNo":"***"}';
    paymentService.requestContract(this.context, contractStr)
      .then(() => {
        // succeed in signing
        console.log('succeeded in signing');
      })
      .catch((error: BusinessError) => {
        // failed to sign
        console.error(`failed to sign, error.code: ${error.code}, error.message: ${error.message}`);
      });
  }

  requestContractCallBack() {
    // use your own contractStr
    const contractStr = '{"appId":"***","preSignNo":"***"}';
    paymentService.requestContract(this.context, contractStr, (error: BusinessError) => {
      if (error) {
        // failed to sign
        console.error(`failed to sign, error.code: ${error.code}, error.message: ${error.message}`);
        return;
      }
      // succeed in signing
      console.info('succeeded in signing');
    })
  }

  build() {
    Column() {
      Button('requestPaymentPromise')
        .type(ButtonType.Capsule)
        .width('50%')
        .margin(20)
        .onClick(() => {
          this.requestPaymentPromise();
        })
      Button('requestPaymentCallBack')
        .type(ButtonType.Capsule)
        .width('50%')
        .margin(20)
        .onClick(() => {
          this.requestPaymentCallBack();
        })
      Button('requestContractPromise')
        .type(ButtonType.Capsule)
        .width('50%')
        .margin(20)
        .onClick(() => {
          this.requestContractPromise();
        })
      Button('requestContractCallBack')
        .type(ButtonType.Capsule)
        .width('50%')
        .margin(20)
        .onClick(() => {
          this.requestContractCallBack();
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

依赖

  1. AppScope/app.json5下"bundleName"配置需要与您在[AppGallery Connect]中[创建应用]时的包名保持一致。

  2. 您需要更新entry/src/main/module.json5文件中的[module -> metadata]配置项:

    • 其中app_id的"value"的值为开发者的APP ID(在AppGallery Connect网站点击"我的项目",在项目列表中找到您的项目,在"项目设置 > 常规"页面的"应用"区域获取"APP ID"的值),详见下图的标号1处。
    • 其中client_id的"value"的值为开发者的OAuth 2.0客户端ID(在AppGallery Connect网站点击"我的项目",在项目列表中找到您的项目,在"项目设置 > 常规"页面的"应用"区域获取"OAuth 2.0客户端ID(凭据):Client ID"的值),详见下图的标号2处。

AppGallery Connect 应用页面

配置内容为:

```
{
    "module": {
        // ...
        "metadata": [
            {
                "name": "app_id",
                "value": "***"
            },
            {
                "name": "client_id",
                "value": "***"
            }
       ]
    }
}
```
  1. Index组件中的orderStr需要替换成自己的订单数据,contractStr需要替换成自己的签约信息数据。
相关推荐
繁依Fanyi3 小时前
828 华为云征文|华为 Flexus 云服务器搭建 PicGo 图床
服务器·华为·华为云
SuperHeroWu74 小时前
【HarmonyOS】Beta最新对外版本IDE下载和环境配置
ide·华为·harmonyos
沉迷单车的追风少年5 小时前
腾讯百度阿里华为常见算法面试题TOP100(3):链表、栈、特殊技巧
百度·华为·腾讯·阿里
SunriseSurfer5 小时前
华为发布大容量128TB SSD:空间利用率提升10倍
经验分享·华为
xq9527--6 小时前
鸿蒙next web组件和h5 交互实战来了
华为·harmonyos
PlumCarefree15 小时前
基于鸿蒙API10的RTSP播放器(八:音量和亮度调节功能的整合)
华为·ffmpeg·音视频·harmonyos
Android技术栈17 小时前
鸿蒙开发(NEXT/API 12)【使用fetchsync发送同步网络请求 (C/C++)】 远场通信服务
c语言·网络·c++·信息与通信·harmonyos·鸿蒙系统·openharmony
OH五星上将1 天前
OpenHarmony(鸿蒙南向开发)——标准系统移植指南(一)
harmonyos·移植·openharmony·鸿蒙开发·鸿蒙内核·子系统
OH五星上将1 天前
OpenHarmony(鸿蒙南向开发)——标准系统移植指南(二)Linux内核
linux·驱动开发·嵌入式硬件·移动开发·harmonyos·鸿蒙开发·鸿蒙内核
cdblh2 天前
【时间盒子】-【6.任务页面】在同一个页面新建、编辑任务
华为·鸿蒙·deveco studio·harmonyos next·harmony os