移动端实现微信支付功能

目录

移动端微信支付有以下好处:

1.前端实现

2.后端实现


移动端微信支付有以下好处:

  1. 方便快捷:用户只需要打开微信,扫码或输入商家提供的支付金额,即可完成支付。

  2. 安全可靠:微信支付采用高级加密技术,确保用户支付信息的安全性。

  3. 全天候服务:微信支付支持24小时不间断的支付服务,用户可以随时随地进行付款。

  4. 适用范围广:微信支付已经覆盖了众多消费场合,包括线上购物、线下实体店铺、公共交通等。

  5. 管理简单:商家可以通过微信支付后台管理系统轻松管理支付,包括查询交易记录、退款等操作。

总之,移动端微信支付方便快捷、安全可靠,是一种用户体验良好的支付方式

这是一个简单的Java + Vue实现移动端微信支付的例子:

1.前端实现

在Vue项目中添加一个支付页面,用户可选择支付金额,点击支付按钮后调用后端接口获取微信支付参数,并使用WeixinJSBridge调起微信支付。

<template>
  <div>
    <h2>支付页面</h2>
    <div>
      <label>支付金额:</label>
      <select v-model="amount">
        <option value="1">1元</option>
        <option value="10">10元</option>
        <option value="100">100元</option>
      </select>
    </div>
    <br>
    <div>
      <button @click="pay">支付</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayPage',

  data() {
    return {
      amount: '1'
    }
  },

  methods: {
    // 调用后端接口获取微信支付参数
    getPayParams() {
      return this.$axios.get('/api/pay/params', {
        params: {
          amount: this.amount
        }
      })
    },

    // 调起微信支付
    callWeixinPay(payParams) {
      return new Promise((resolve, reject) => {
        if (typeof WeixinJSBridge == "undefined") {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
        } else {
          onBridgeReady(payParams);
        }

        function onBridgeReady(payParams) {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": payParams.appId, // 公众号名称,由商户传入
              "timeStamp": payParams.timestamp, // 时间戳,自1970年以来的秒数
              "nonceStr": payParams.nonceStr, // 随机串
              "package": payParams.package, // 微信规定格式的订单详情扩展字符串,固定值"prepay_id="加微信订单号
              "signType": "MD5", // 微信签名方式:
              "paySign": payParams.paySign // 微信支付签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                resolve();
              } else {
                reject(res.err_desc || "支付失败");
              }
            }
          );
        }
      })
    },

    // 支付按钮点击事件
    pay() {
      // 调用后端接口获取微信支付参数
      this.getPayParams().then((response) => {
        // 调起微信支付
        this.callWeixinPay(response.data).then(() => {
          this.$router.push('/pay-success')
        }).catch((error) => {
          alert(error)
        })
      }).catch((error) => {
        alert(error)
      })
    }
  }
}
</script>

2.后端实现

在Spring Boot项目中添加一个支付接口,用户传递支付金额,后端使用微信官方提供的统一下单API生成预支付订单,返回给前端支付参数。

@RestController
@RequestMapping("/api/pay")
public class PaymentController {

    @Autowired
    private WxConfig wxConfig;

    /**
     * 获取微信支付参数
     */
    @GetMapping("/params")
    public ResultData<Map<String, String>> getPayParams(@RequestParam int amount) {
        try {
            String nonceStr = UUID.randomUUID().toString().replace("-", "");
            String outTradeNo = UUID.randomUUID().toString().replace("-", "");

            // 组装请求参数
            Map<String, String> data = new HashMap<>();
            data.put("appid", wxConfig.getAppId());
            data.put("mch_id", wxConfig.getMchId());
            data.put("nonce_str", nonceStr);
            data.put("body", "测试支付");
            data.put("out_trade_no", outTradeNo);
            data.put("total_fee", String.valueOf(amount));
            data.put("spbill_create_ip", "127.0.0.1");
            data.put("notify_url", "http://localhost:8080/api/pay/notify");
            data.put("trade_type", "APP");

            // 签名
            String sign = WxPayUtil.generateSignature(data, wxConfig.getMchKey());
            data.put("sign", sign);

            // 统一下单
            String xml = WxPayUtil.mapToXml(data); // 将请求参数转换为XML格式
            String responseXml = HttpUtil.post("https://api.mch.weixin.qq.com/pay/unifiedorder", xml); // 发送POST请求
            Map<String, String> responseMap = WxPayUtil.xmlToMap(responseXml); // 转换为Map格式

            // 组装支付参数
            Map<String, String> payParams = new HashMap<>();
            payParams.put("appId", wxConfig.getAppId());
            payParams.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
            payParams.put("nonceStr", UUID.randomUUID().toString().replace("-", ""));
            payParams.put("package", "prepay_id=" + responseMap.get("prepay_id"));
            payParams.put("signType", "MD5");
            payParams.put("paySign", WxPayUtil.generateSignature(payParams, wxConfig.getMchKey()));

            return ResultData.success(payParams);
        } catch (Exception e) {
            e.printStackTrace();
            return ResultData.error(ResultCode.FAIL, "获取支付参数失败");
        }
    }

    /**
     * 支付结果通知接口
     */
    @PostMapping("/notify")
    public String payNotify(HttpServletRequest request) {
        try {
            String xml = HttpUtil.readData(request.getInputStream());
            Map<String, String> data = WxPayUtil.xmlToMap(xml);
            if (WxPayUtil.isSignatureValid(data, wxConfig.getMchKey())) {
                if (data.get("return_code").equals("SUCCESS") && data.get("result_code").equals("SUCCESS")) {
                    // 支付成功,业务处理
                    // ...

                    // 返回通知结果
                    Map<String, String> resultMap = new HashMap<>();
                    resultMap.put("return_code", "SUCCESS");
                    resultMap.put("return_msg", "OK");
                    return WxPayUtil.mapToXml(resultMap);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        // 返回通知结果
        Map<String, String> resultMap = new HashMap<>();
        resultMap.put("return_code", "FAIL");
        resultMap.put("return_msg", "ERROR");
        return WxPayUtil.mapToXml(resultMap);
    }
}

以上是一个简单的Java + Vue实现移动端微信支付的例子

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
移动端H5调用微信支付宝支付是一种简单方便的支付方式。用户在网页中选择微信或支付宝支付后,会被引导到微信或支付宝的支付页面,输入支付密码或确认支付即可完成支付。对于商家来说,只需在网页中添加相应的支付接口和配置相关信息,就可以实现H5调用微信支付宝支付功能。这种支付方式适用于各类移动端应用,如电商平台、小程序、线下商户等。 在实现H5调用微信支付宝支付的过程中,需要注意保障支付安全和用户隐私。商家需要通过微信支付宝的官方平台获得相关权限和密钥,确保支付接口的可信性和安全性。同时,还需要遵守相关的法律法规和隐私政策,保护用户的个人信息和支付数据。另外,商家还可以通过设置不同的支付方式、优惠券等方式来吸引用户,提高支付转化率和用户满意度。 在移动端H5调用微信支付宝支付的过程中,还需要考虑支付的实时性和用户体验。商家需要保证支付的及时性和可靠性,避免因网络延迟或其他原因导致支付失败或出现异常情况。同时,还需要考虑用户的支付习惯和支付环境,提供简洁明了的支付流程和友好的界面设计,提高用户支付的便捷性和舒适度。通过合理规划和技术实现移动端H5调用微信支付宝支付可以成为一种便捷、安全、高效的支付方式,为用户和商家带来更好的支付体验和商业价值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只java小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值