Code Monkey home page Code Monkey logo

pingpp-js's Introduction

Pingpp HTML5 SDK

如何构建

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

全局安装 gulp

npm install -g gulp

默认构建

默认会包含所有渠道

npm run build

自定义构建

安装依赖

npm install
--channels

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

gulp build --channels="alipay_wap wx_pub upacp_wap"

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

--name

设置对象变量名

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

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

gulp build --alipay_in_weixin

同时,将 alipay_in_weixin 目录下的 pay.htm 放于你服务器可访问的路径下。

默认情况下,访问该文件的 URL 需要与你的支付页面时同级的。例:
支付页面 URL:http://localhost/project/payment?a=b&c=d
该文件 URL:http://localhost/project/pay.htm

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

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

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

--wx_jssdk

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

gulp build --wx_jssdk

使用说明

引入 JS 文件

  • script 标签方式

    <script src="/path/to/pingpp.js"></script>
  • Browserify 打包方式

    首先使用 npm 下载

    npm install pingpp-js

    使用

    var pingpp = require('pingpp-js');

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

pingpp.createPayment(charge, function(result, err){
  if (result == "success") {
    // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回,其他的支付结果都会跳转到 extra 中对应的 URL。
  } else if (result == "fail") {
    // charge 不正确或者微信公众账号支付失败时会在此处返回
  } else if (result == "cancel") {
    // 微信公众账号支付取消支付
  }
});

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

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

微信公众号接入注意事项

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

关于 open_id

  1. 用 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);
  1. 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
  }
}
  1. 得到 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);
  }
});

pingpp-js's People

Contributors

samurai00 avatar

Watchers

James Cloos avatar  avatar

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.