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 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

爬虫技术的门道,这篇文章总结的最全

Web是一个开放的平台,这也奠定了Web从90年代初诞生直至今日将近30年来蓬勃的发展。然而,正所谓成也萧何败也萧何,开放的特型、搜索引擎以及简单易学的HTM...

3577
来自专栏SAP梦心的SAP分享

【SAP业务模式】之ICS(四):组织单元的配置

      SAP的ICS业务后台配置主要有以下几个配置点:       1、组织单元的配置(公司代码、销售组织、工厂、采购组织等);       2、主数据的...

19710
来自专栏Python爬虫与算法进阶

awesome_crawl(一):腾讯新闻

、项目地址:https://github.com/zhangslob/awesome_crawl

1073
来自专栏angularejs学习篇

angularjs小练习(分别通过ng-repeat和ng-option动态生成select下拉框)

681
来自专栏一“技”之长

iOS开发之AdSupport框架使用

    AdSupport从字面意思上理解是用来进行广告支持,这个框架十分简单,里面只有一个类,类中只有一个方法和两个属性。

572
来自专栏python学习指南

python爬虫(一)_爬虫原理和数据抓取

本篇将开始介绍Python原理,更多内容请参考:Python学习指南 为什么要做爬虫 著名的革命家、思想家、政治家、战略家、社会改革的主要领导人物马云曾经...

2846
来自专栏Crossin的编程教室

【Python 第43课】 查天气(1)

给大家看一个程序: ? 你输入一个城市的名称,就会告诉你这个城市现在的天气情况。接下来的几节课,我就说一下怎么实现这样一个小程序。 之所以能知道一个城市的天气,...

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

SAP最佳业务实践:FI–现金管理(160)-27现金集中-FF.D生成付款请求

4.8.2 FF.D生成付款请求 通过集中建议创建付款通知后,需要从付款通知中创建相应付款请求。付款请求在下一步通过付款程序读取并用于执行付款和创建付款文件。 ...

2717
来自专栏大数据挖掘DT机器学习

2分钟完成30*15页拉勾网职位需求关键词的抓取

不同的语言,有它们各自擅长的应用场景,选择一门适合自己的语言需要勇气与毅力。 而当你下定决心要在甄选的语言上一条道走到黑的时候,孰不知,选择才刚刚开始。 一门...

3255
来自专栏软件开发 -- 分享 互助 成长

职责链模式

一、简介 1、当客户提交一个请求时,请求沿着链传递直到有一个管理者对象处理它。 2、UML ? 3、所属类别:行为型 二、程序 1 // 职责链模式.cpp...

1817

扫码关注云+社区