Giter Club home page Giter Club logo

pingpp-js's Introduction

Pingpp HTML5 SDK

目录

使用 Ping++ SDK 标准版

支持的渠道

  • 手机网页支付

    1. 支付宝手机网页支付(alipay_wap)
    2. 百度钱包手机网页支付(bfb_wap)
    3. 银联全渠道手机网页支付(upacp_wap)
    4. 微信WAP支付(wx_wap)
    5. 微信小程序支付(wx_lite)
    6. 易宝手机网页支付(yeepay_wap)
    7. 京东手机网页支付(jdpay_wap)
    8. 招行一网通支付(cmb_wallet)
  • PC 网页支付

    1. 支付宝电脑网站支付 (alipay_pc_direct)
    2. 银联网关支付 (upacp_pc)
    3. 银联企业网银支付 (cp_b2b)
    4. 拉卡拉网联B2C/B2B支付
  • 微信公众账号支付(wx_pub)

  • QQ 公众号支付 (qpay_pub)

  • 支付宝口碑 (alipay_qr)

  • 线下扫码支付(isv_wap)

  • 线下小程序支付(isv_lite)

如何构建

dist 目录下提供了已经构建好的 SDK,使用的命令是 gulp build --alipay_in_weixin --agreement

全局安装 gulp

npm install -g gulp

默认构建

默认会包含所有渠道

npm run build

自定义构建

安装依赖

npm install
--channels

选择渠道,渠道字段用空格或者英文逗号分割,例:

gulp build --channels="alipay_wap wx_pub upacp_wap"

可选的渠道模块请查看 src/channels 目录下的文件名

wx_lite

因为微信小程序中 不能使用其他支付渠道,构建时请添加该参数

gulp build --channels=wx_lite
--name

设置对象变量名

gulp build --name="pingppPc" --channels="alipay_pc_direct upacp_pc"
--alipay_in_weixin

如果要在微信内使用支付宝手机网页支付,请添加该参数

gulp build --alipay_in_weixin

同时,将 alipay_in_weixin 目录下的 pay.htm 放于你服务器可访问的路径下,如下两种方法:

pingpp.setAPURL('http://localhost/your/custom/url');

该文件(pay.htm)内的 CURRENT_PAGE_URL 变量也设置为相同的值。

--wx_jssdk

如果想使用微信的 JS-SDK 来调起支付,请添加该参数

gulp build --wx_jssdk
--agreement

如果需要使用签约接口,请添加该参数

gulp build --agreement

使用说明

引入 JS 文件

  • Browserify 打包方式

    首先使用 npm 下载

    npm install pingpp-js

    使用

    var pingpp = require('pingpp-js');
  • script 标签方式

    <script src="/path/to/pingpp.js"></script>

使用服务端创建的 charge 调用接口

// 参数一:支付参数 charge/order/recharge
// 参数二:支付结果回调
pingpp.createPayment(data, function(result, err) {
  if (result == "success") {
    // 只有微信公众账号 (wx_pub)、微信小程序 (wx_lite)、QQ 公众号 (qpay_pub)、支付宝口碑 (alipay_qr)
    // 支付成功的结果会在这里返回,其他的支付结果都会跳转到 extra 中对应的 URL。
  } else if (result == "fail") {
    // data 不正确或者微信公众账号/微信小程序/QQ 公众号/支付宝口碑支付失败时会在此处返回
  } else if (result == "cancel") {
    // 微信公众账号、微信小程序、QQ 公众号、支付宝口碑支付取消支付
  }
});

如果 charge 正确的话,会跳转到相应的支付页面,要求用户进行付款。

用户支付成功后,会跳转到创建 charge 时定义的 result_url 或者 success_url。如果用户取消支付,则会跳转到 result_url 或者 cancel_url(具体情况根据渠道不同会有所变化)。

如果不想直接跳转到支付页面,而是获取支付页面地址

在调用 pingpp.createPayment 之前,调用

pingpp.setUrlReturnCallback(callback, channels);
参数 callback

回调函数

  • 第一个参数接受错误信息,没有错误时为 null。
  • 第二个参数为支付界面地址的值。
参数 channels

需要启用该功能的渠道列表,类型为 array。默认值为 ['alipay_pc_direct']

示例
pingpp.setUrlReturnCallback(function (err, url) {
  // 自行处理跳转或者另外打开支付页面地址(url)
  // window.location.href = url;
}, ['alipay_pc_direct', 'alipay_wap']);

调用签约接口

从服务端获取 agreement 对象之后,调用

pingpp.signAgreement(agreement, callback);

签约接口在对象不正确等情况下,会回调 callback

如果对象正确,则会跳转到相应的签约页面,签约结果不会callback 返回,需要商户自己调用服务端接口查询 agreement 状态。

微信公众号接入注意事项

以下示例中,Server-SDK 以 php 为例,其他语言请参考各语言 SDK 的文档或者示例

关于 open_id

用 Server-SDK 取得 open_id(微信公众号授权用户唯一标识)。

先跳转到微信获取授权 code,地址由下方代码生成,$wx_app_id 是你的微信公众号应用唯一标识$redirect_url 是用户确认授权后跳转的地址,用来接收 code

<?php
$url = \Pingpp\WxpubOAuth::createOauthUrlForCode($wx_app_id, $redirect_url);
header('Location: ' . $url);

用户确认授权后,使用 code 获取 open_id,其中 $wx_app_secret 是你的微信公众号应用密钥

<?php
$code = $_GET['code'];
$open_id = \Pingpp\WxpubOAuth::getOpenid($wx_app_id, $wx_app_secret, $code);
open_id 作为创建 charge 时的 extra 参数,具体方法参考技术文档,例:
{
  "order_no":  "1234567890",
  "app":       {"id": "app_1234567890abcDEF"},
  "channel":   "wx_pub",
  "amount":    100,
  "client_ip": "127.0.0.1",
  "currency":  "cny",
  "subject":   "Your Subject",
  "body":      "Your Body",
  "extra": {
    "open_id": open_id
  }
}
得到 charge 后,在页面中引用 pingpp.js,调用 pingpp.createPayment,结果会直接在 callback 中返回。
pingpp.createPayment(charge, function(result, err) {
  if (result=="success") {
    // payment succeeded
  } else {
    console.log(result+" "+err.msg+" "+err.extra);
  }
});

微信小程序接入注意事项

以下示例中,Server-SDK 以 php 为例,其他语言请参考各语言 SDK 的文档或者示例

关于 open_id

小程序的 code 获取跟公众号的有些不同,小程序是有自己的 API 可以在客户端直接获取 code
wx.login({
  success: function(res) {
    if(res.code){
      console.log('code = ' + res.code);
    }else{
     console.log('获取用户登录态失败!' + res.errMsg);
    }
  }
});
得到 code 之后 以 GET的方式,请求你自己的服务端。然后在服务端使用 code 来获取 open_id,其中 $wx_app_id 是你的微信AppID(小程序ID) $wx_app_secret 是你的微信小程序密钥
<?php
$code = $_GET['code'];
$open_id = \Pingpp\WxpubOAuth::getOpenid($wx_app_id, $wx_app_secret, $code);
open_id 作为创建 charge 时的 extra 参数,具体方法参考技术文档,例:
{
  "order_no":  "1234567890",
  "app":       {"id": "app_1234567890abcDEF"},
  "channel":   "wx_lite",
  "amount":    100,
  "client_ip": "127.0.0.1",
  "currency":  "cny",
  "subject":   "Your Subject",
  "body":      "Your Body",
  "extra": {
    "open_id": open_id
  }
}
得到 charge 后,在页面中引用 pingpp.js ,调用 pingpp.createPayment,结果会直接在 callback 中返回。
pingpp.createPayment(charge, function(result, err) {
  if (result=="success") {
    // payment succeeded
  } else {
    console.log(result+" "+err.msg+" "+err.extra);
  }
});

常见问题

问题一: H5 页面微信公众号支付调用 Ping++ 提示失败 (来源:工单)

返回结果: get_brand_wcpay_request: fail

  • 报错原因:微信授权目录填写错误。
  • 解决方案:详见帮助中心

问题二:微信内调用支付宝没出现引导界面,只有复制链接到浏览器

  • 报错原因:pay.htm 路径出错
  • 解决方案:
    1. 默认情况下,访问该文件的 URL 需要与你的支付页面时同级的。例:
      支付页面 URL:http://localhost/project/payment?a=b&c=d
      该文件 URL:http://localhost/project/pay.htm

    2. 你也可以调用 setAPURL 方法来自定义该文件 URL。

      pingpp.setAPURL('http://localhost/your/custom/url');

      该文件(pay.htm)内的 CURRENT_PAGE_URL 变量也设置为相同的值。

问题三:调不起支付,返回报错信息 json_decode_fail

  • 报错原因:传入的参数不是正确的 JSON 字符串或者 JSON 对象
  • 解决方案:客户端调用 SDK 时,确认服务端输出到客户端时,数据的正确性。

pingpp-js's People

Contributors

afonio avatar dong11 avatar hophacker avatar ouzhenkun avatar rd avatar samurai00 avatar yulitao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pingpp-js's Issues

在微信浏览器中无法发起支付

我查了一下,是XMLHttpRequest没有定义, 可能是ajax同源策略造成的

request: function(url, method, requestData,
    successCallback, errorCallback, headers) {
    if (typeof XMLHttpRequest !== 'function') {
      alert('Function XMLHttpRequest is undefined.');
      return;
    }
    var xhr = new XMLHttpRequest();
    if (typeof xhr.timeout !== 'undefined') {
      xhr.timeout = 6000;
    }

调用ping++公众号支付

请问调用pingpp.createPayment之前,还需要先集成wx-jssdk并且调用wx.config配置微信sdk吗?

怎么集成?

我刚开始弄这个东西,我们用React做,文档不是很详细,完全不知道怎么开始啊!

Channel wx_pub_qr is invalid是什么原因啊?

gulp build --channels="alipay_pc_direct wx_pub wx_pub_qr"
时提示
Channel wx_pub_qr is invalid. The channels you can use: alipay_pc_direct,alipay_qr,alipay_wap,bfb_wap,cb_alipay_pc_direct,cb_alipay_wap,cb_wx_pub,cmb_pc_qr,cmb_wallet,cp_b2b,fqlpay_qr,fqlpay_wap,isv_wap,jdpay_wap,paypal,qpay_pub,upacp_b2b,upacp_pc,upacp_wap,upmp_wap,wx_lite,wx_pub,wx_wap,yeepay_wap.

紧急求助pingpp.js不支持ie8吗

pingpp.js不支持ie8吗,有什么办法解决吗,爆js错误:

网页错误详细信息

用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
时间戳: Wed, 12 Oct 2016 05:00:17 UTC

消息: 'document.body' 为空或不是对象
行: 1
字符: 11017
代码: 0
URI: http://127.0.0.1:8080/yangbanjian/web/js/pingpp.js

2.1.10版bug

channel为alipay_pc_direct时,支付宝gateway页面缺少_input_charset参数,导致签名错误,报错ILLEGAL_SIGN。

IE总是跳出来提示

提示信息:您是要打开还是保存来自cookie.pingxx.com的cookie_ping_com?这个提示每次刷新页面都会出现。
2017-02-24 9 04 54

wx_pub_qr需要调用pingpp.createPayment吗?

微信扫码支付,从charge中拿到了二维码地址,所以不需要调用pingpp.createPayment?
但生成二维码并支付后,并没有支付成功或失败的callback
如果调用了pingpp.createPayment会直接报错channel module "wx_pub_qr" is undefined

iOS 10 下无法支付

环境:

  • iOS 10
  • pingpp-js 2.2.18(使用 gulp 构建了一份不含 alipay_in_weixin 的版本)

暂时降级到了 2.2.1

setUrlReturnCallback 设置后无效, 仍然会跳转到新页面

调用代码如下:

  handleClick = () => {
    pingpp.setUrlReturnCallback((err, url) => {
      console.log(url)
    })
    pingpp.createPayment(pingppObject, (result, err) => {
      // 可按需使用 alert 方法弹出 log
      console.log(result)
      console.log(err.msg)
      console.log(err.extra)
    })
  }

从标准版转到广告版相关问题

由于业务原因,需要从标准版转到广告版,
旧项目中的客户端原本调用的代码如下
3

现在将标准版代码改成如下代码
4

但是支付成功后并没有出现广告,请问是哪个地方的代码出了问题。官网api文档更新了,旧版本的ping++接口和新版广告这边的升级问题没有想过描述,所以更新过程中不知道怎么弄了

react native支持吗?

在看你们官网上有说支持RN,不清楚还在维护没,我可能会先用RN开发,所以问下

paypal 渠道 setUrlReturnCallback 无效

// in channels/paypal.js
var utils = require('../utils');

module.exports = {
  handleCharge: function(charge) {
    var credential = charge.credential[charge.channel];
    utils.redirectTo(credential, ??);
  }
};

redirectTo 方法缺失 channel 参数

使用wx_wap支付后,获取支付结果有延迟

app中加载网页使用wx_wap调起微信客户端支付。
支付成功后,返回成功的url链接。
但是此时查询pingpp的订单结果,却显示未支付,延迟几秒后查询,返回正确的支付结果。
这种情况会导致用户看到的信息和后台数据对不上,如何解决下?客户端直接调用客户端的sdk就没有这个问题。

a.error is not a function

pingpp.js:1 Uncaught TypeError: a.error is not a function
at Object.init (pingpp.js:1)
at PingppSDK.createPayment (pingpp.js:1)
at XMLHttpRequest.xhr.onreadystatechange (wap.html:62)

手机端微信调用支付宝网页支付,没有反应

Add a way to allow initialization when needed

Currently this package initialize automatically when app starts, it slows down the initial page loading time.
it would be great to allow initialize it only when Pingpp payment process starts.

Uncaught TypeError in main.js

line 43: typeof payment_elements.app.id === 'string')
Uncaught TypeError: Cannot read property 'id' of null
app is null~!!
why..

在微信中使用支付宝 H5 支付时,setUrlReturnCallback 无效

由于我们使用 react ,想通过 setUrlReturnCallback 在拿到支付 url 之后自己做引导页面(不想用 pay.htm)。可否加一个判断,在微信中如果进行支付宝 H5 支付,不直接跳转到 pay.htm,而是看看回调函数是否有设置,如果有就用开发者自定义的。

版本:npm 完整版 2.2.18
错误代码:

        pingpp.setUrlReturnCallback(function (err, url) {
          if (isInWechat) {
            browserHistory.push(`/payment-guide/?to=${btoa(url)}&uuid=${payment_uuid}`);

            return;
          }
          window.location.href = url;
        }, ['alipay_wap']);
        pingpp.createPayment(charge);

编译出错

编译时候出现这个错误:

/root/pingpp-js-master/node_modules/gulp-sourcemaps/node_modules/strip-bom/index.js:2
module.exports = x => {
^
SyntaxError: Unexpected token >
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/root/pingpp-js-master/node_modules/gulp-sourcemaps/src/init/index.internals.js:7:16)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)

怎么解决呢?

模拟付款返回401

确定模拟付款后,请求是有发出去的,但是返回401.
经过排查,是没有Authentication造成的。
同样的请求用postman加Authentication就正常执行,返回success字样。

看源代码中发模拟付款的部分,没有看到加Authentication的地方。
但印象中,以前用同一套代码是可以执行模拟付款的。

pingpp.js 版本 2.0.7

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.