2018-06-14 支付处理器 API :将你的支付应用带到 Web 中来

什么是支付处理器 API ?

支付请求 API 为浏览器带来了一个开放的、标准化的用于处理支付请求的方式。通过一个简单、快捷的用户界面,即可采集到付款人的寄送信息、联系方式和支付凭据。

而支付处理器 API 则为支付方式提供商(译注:即支付类的应用)打开了一个全新的生态。它可以让那些基于 Web 的支付类应用(采用 service worker 支撑)通过支付请求 API 将自己作为一种支付方式整合到商家的网站中。

用户体验

从用户角度看,它带来的用户体验是这样子的:

视频演示:v.youku.com/v_show/id_X…

(译注:下面是操作流程)

  1. 用户决定好了购买一款商品,然后在商品详情页点击“Buy Now(立刻购买)”
  2. 弹出支付请求的表单界面
  3. 用户选择一种支付方式(支付方式提供商的 URL 会列在支付方式名称的下面)
  4. 打开一个新窗口进入支付应用,在那里用户完成认证和支付授权
  5. 支付请求受理成功,支付应用的窗口关闭
  6. 完成支付,支付请求的表单界面关闭
  7. 这个时候网站可以展示出订单已确认的信息

你可以用 Chrome 68 beta 版本在这里尝试下。

注意,整个流程涉及到的三方有:终端用户,商家网站,支付方式提供商。

商家开发者的体验

对于商家的网站来说,要将一个支付应用整合进来,只需在支付请求 API 的第一个参数中的 supportedMethods 中将其添加进去(支付方法 ID)即可,同时可以有选择性地携带一个 data 数据。例如,要添加一个名叫 BobPay,支付方式 ID 为https://bobpay.xyz/pay 的支付应用,其实现如下:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: ‘总额’,
    amount: { value: '10', currency: 'USD' }
  }
});

如果可以处理 BobPay 支付方式的 service worker 已经安装,那么这个支付应用就会出现在支付请求的界面中供用户选择。在某些情况下,Chrome 还会跳过跳转到支付处理商一块的操作步骤,以此带来一种轻快的支付体验。

Chrome 支持一个非标准的特性,我们称之为 just-in-time (JIT) 安装(译注:即时安装)。在我们的这个例子中,这个特性可以让 BobPay 信任的支付处理器进行即时安装,不需要用户在事先有对 BobPay 网站进行过访问。不过只有用户在支付请求界面中明确选择了 BobPay 作为支付方式时才会开始安装;而且一种支付方式只可以指定最多一个信任的支付处理方。

如何开发一个支付请求处理器

要开发一个支付请求处理器,我们需要在除了实现支付处理器 API 之外再做一点额外的工作。

安装一个 Service Worker 并添加支付指令

支付处理器 API 的关键点就是 Service Worker。你需要在你的支付应用网站上注册一个 Service Worker 并在 ServiceWorkerRegistration 对象下的 paymentManger 中将支付指令添加进去。

if ('serviceWorker' in navigator) {
  // 注册一个 service worker
  const registratoin = await navigator.serviceWorker.register(
    // service worker 是一个单独的 js 文件
    'service-worker.js'
  );
  // 检查支付处理器 API 是否可用
  if (!registration.paymentManager) return;

  registration.paymentManager.instruments.set(
    // 支付指令的 key 可是任意字符串
    "https://bobpay.xyz",
    // 支付指令的详情
    {
      name: '支付处理器示例',
      method: 'https://bobpay.xyz/pay'
    }
  )
}

监听 paymentrequest 事件来申请用户授权

要处理支付请求,需要对在 service worker 中对 paymentrequest 进行监听;然后当我们收到这样一个事件时,打开一个窗口并等待其在用户授权进行支付之后返回一个支付凭据。

const origin = 'https://bobpay.xyz';
const methodName = `${origin}/pay`;
const checkoutURL = `${origin}/checkout`;
let resolver;
let payment_request_event;

self.addEventListener('paymentrequest', e => {
  // 保存这个事件,以便之后使用
  payment_request_event = e;
  // 另外你还需要提供一个 `PromiseResolver` 垫片,
  // 因为目前 Chrome 还未实现
  resolver = new PromiseResolver();

  e.respondWith(resolver.promise);
  e.openWindow(checkoutURL).then(client => {
    if (client === null) {
      resolver.reject('Failed to open window');
    }
  }).catch(err => {
    resolver.reject(err);
  });
});

self.addEventListener('message', e => {
  console.log('A message received:', e);
  if (e.data === "payment_app_window_ready") {
    sendPaymentRequest();
    return;
  }

  if (e.data.methodName === methodName) {
    resolver.resolve(e.data);
  } else {
    resolver.reject(e.data);
  }
});

const sendPaymentRequest = () => {
  if (!payment_request_event) return;
  clients.matchAll({
    includeUncontrolled: false,
    type: 'window'
  }).then(clientList => {
    for (let client of clientList) {
      client.postMessage(payment_request_event.total);
    }
  });
}

支付方式举例

因为支付处理器 API 的设计理念就是保持最大的灵活性,以支持任意类型的支付方式,所以它所支持的包含了:

  • 银行
  • 加密数字货币
  • 电子货币
  • 运营商账单(译注:话费代扣)
  • 商家积分系统
  • 货到付款(商家的自助服务)

扩展链接

(译注:以下链接均需越墙)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

新勒索软件“Defray”可通过Microsoft Word文档传播

? 我们最初观察到该勒索病毒的命令和控制(C&C)服务器主机名为:“defrayable-listings[.]000webhostapp[.]com”。因此...

3557
来自专栏安恒信息

重磅 | 安恒信息“永恒之蓝”勒索病毒安全事件报告

1.背景 北京时间2017年05月12日,安恒信息监测到黑客利用NSA黑客武器库泄漏的“永恒之蓝”工具发起的网络攻击事件:大量服务器和个人PC感染病毒后被远程控...

3218
来自专栏SAP最佳业务实践

SAP最佳业务实践:FI–总账(156)-3记账

4 流程步骤 4.1 FB50过帐总帐会计科目凭证 您收到了必须在 SAP 系统中手动过帐的总帐科目凭证。 角色:总帐会计 会计核算 -财务会计 -总账 ...

41210
来自专栏小俊博客

VPS服务器性能测试脚本:ZBench,可导出结果

说明:本脚本作者为雨落大佬,将秋水的Bench.sh和Oldking的SuperBench结合了,然后加入Ping同路由测试,可以详细的测试出服务器系统信息,下...

5469
来自专栏二次元

程序员日常中病毒系列

事情是这样的,一朋友发来源码让我看下,手残不小心点到里头的一个exe文件,弹出联网请求,我便迅速关掉,之后发现同目录多了一个伪装成系统音乐文件夹的exe可执行...

1240
来自专栏FreeBuf

揭秘银行木马Chthonic:网银大盗ZeuS的最新变种

说到Zeus/Zbot,做安全多多少少都会有所了解。Zeus是对金融系统威胁最大的僵尸网络之一,控制者借助僵尸程序窃取账户登录信息和信用卡号码。Zbot往往通过...

1727
来自专栏java工会

数据库分库分表事务解决方案

随着时间和业务的发展,数据库中表的数据量会越来越大,相应地,数据操作,增删改查的开销也会越来越大。因此,把其中一些大表进行拆分到多个数据库中的多张表中。 另一方...

982
来自专栏安恒信息

IE10 0day漏洞被利用窃取军事情报

安全公司FireEye的研究人员发现了一个新的IE10 0day漏洞 (CVE-2014-0322) ,被攻击者利用发动偷渡下载攻击(Wateri...

2628
来自专栏安恒信息

干货 | GlobeImposter家族的勒索样本分析过程

概述 近日来,安恒安全人员频繁接到用户单位服务器受到勒索病毒攻击,其中某医疗机构出现几十台设备蓝屏和数台设备被感染。经过分析判定感染设备的勒索软件是Globe...

1.4K8
来自专栏腾讯云安全的专栏

刚需 |Wannacry 勒索蠕虫病毒用户修复指引

1895

扫码关注云+社区