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

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4025
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4848
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2060
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4708
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

31710
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5456
来自专栏魂祭心

原 canvas绘制clock

4064

扫码关注云+社区