只提供微信小程序端代码:

 var app = getApp();
Page({
data: {},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
//登陆获取code
wx.login({
success: function (res) {
console.log(res.code)
//获取openid
that.getOpenId(res.code)
}
});
},
getOpenId: function (code) {
var that = this;
wx.request({
url: "https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code=" + code + "&grant_type=authorization_code",
data: {},
method: 'GET',
success: function (res) {
that.generateOrder(res.data.openid)
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
/**生成商户订单 */
generateOrder: function (openid) {
var that = this
//统一支付
wx.request({
url: '后台路径',
method: 'GET',
data: {
gfee: '商品价钱',
gname: '商品名称',
openId:openid
(商品价钱和商品名称根据自身需要是否传值,openid为必传)
},
success: function (res) {
var pay = res.data
//发起支付
var timeStamp = pay[0].timeStamp;
var packages = pay[0].package;
var paySign = pay[0].paySign;
var nonceStr = pay[0].nonceStr;
var param = { "timeStamp": timeStamp, "package": packages, "paySign": paySign, "signType": "MD5", "nonceStr": nonceStr };
that.pay(param)
},
})
}, /* 支付 */
pay: function (param) {
console.log("支付")
console.log(param)
wx.requestPayment({
timeStamp: param.timeStamp,
nonceStr: param.nonceStr,
package: param.package,
signType: param.signType,
paySign: param.paySign,
success: function (res) {
// success
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
success: function (res) {
wx.showToast({
title: '支付成功',
icon: 'success',
duration: 2000
})
},
fail: function () {
// fail },
complete: function () {
// complete
}
})
},
fail: function (res) {
// fail
},
complete: function () {
// complete
}
})
}
})

微信小程序 支付功能(前端)的实现的更多相关文章

  1. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  2. 微信小程序支付功能 C# .NET开发

    微信小程序支付功能的开发的时候坑比较多,不过对于钱的事谨慎也是好事.网上关于小程序支付的实例很多,但是大多多少有些问题,C#开发的更少.此篇文档的目的是讲开发过程中遇到的问题做一个备注,也方便其他开发 ...

  3. 微信小程序支付功能讲解(1)

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  4. 微信小程序支付功能讲解

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  5. Python实现微信小程序支付功能

    由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 当然具体的参数配置可以参考官 ...

  6. 微信小程序支付功能讲解(2)

    小程序支付 业务流程时序图 官方文档 步骤: 1. Openid 在小程序初次加载的时候就已经获取(详情见 小程序登录) 2. 生成商户订单 1.商品信息由小程序端提供 2.提供支付统一下单接口所需参 ...

  7. 微信小程序 支付功能 服务器端(TP5.1)实现

    首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下 在使用SDK之前我们需要对 WxPay.Config.php 进行配置 <?php n ...

  8. 微信小程序支付功能完整流程

    支付流程 整个支付流程分为四个步骤: 获取令牌token 创建订单 预支付,获取支付参数对象pay 发起微信支付 收尾工作.跳转到订单页面,删除购物车中已购买的商品 请求方式:POST 整个支付过程中 ...

  9. 微信小程序支付功能

    API:wx.requestPayment() { } https://blog.csdn.net/qishubiao/article/details/80804052

随机推荐

  1. java中使用net.sf.json对json进行解析

    net.sf.json依赖的包很多. 有commons-collections,commons-beanutils.jar,commons-httpclient.jar,commons-lang.ja ...

  2. XStream的使用

    一:功能 可以将JavaBean转换(序列化)成XMl 二:依赖jar包 xstream.jar xpp3_min.jar(xml pull parser)xml解析器 三:使用步骤 XStream ...

  3. phpcms后台管理

    phpcms从网上下载就好了,记住这个要安装在Wamp中的www文件下 从网页输入网址进入后台控制 输入密码账号,即进入后台控制界面: 后台管理有自带的网页模板把他换成自己的模板: 修改站点:   把 ...

  4. easyUI中datagrid的使用

    easyUI中的datagrid数据表格经常被用到,结合项目中的使用情况,总结一下datagrid使用中需要注意的一些问题.使用datagrid展示数据,需要在html.css.js中都要编写代码,h ...

  5. [周译见] C# 7 中的模范和实践

    原文地址:https://www.infoq.com/articles/Patterns-Practices-CSharp-7 关键点 遵循 .NET Framework 设计指南,时至今日,仍像十年 ...

  6. Servlet实现简单的登录页面

    package emp; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; imp ...

  7. 在Debian 8 上安装自动化工具Ansible

    如果你是新手,就不要犹豫了,ansible是你最好的选择,本人菜鸟一个.废话少说,开始安装! 实验环境: 192.168.3.190 192.168.3.191 192.168.3.192 192.1 ...

  8. 数据库之Oracle(一)

    前段时间项目中需要做数据管理和迁移的工作,于是又重新拾起了数据库,在javaEE阶段,我们对于数据库的使用仅限于DML(insert,update,delete,select).数据库的使用也比较狭隘 ...

  9. ACE框架 同步原语设计

    ACE框架常用的同步机制设计成统一的原语接口.同步原语使用系统平台(操作系统,多线程库)提供的同步原语,并为系统平台不提供的同步原语提供模拟实现.ACE框架使用了外观模式和适配器分两层,将同步原语统一 ...

  10. Layout基本属性总结

    在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),GridLayout(网格布局),RelativeLayout(相对布局),T ...