公衆號支付-從服務號申請到支付調用爬坑

時間  2019-11-06
標籤 公衆號 支付 服務 申請 調用 简体版
原文   原文鏈接

一、申請

須要準備的材料css

  • 認證的服務號，300塊一年認證費用
  • 營業執照
  • 公司對公銀行帳號

一、先申請服務號
二、經過後，申請微信支付
微信支付不一樣行業須要收手續費，通常0.6%html

二、配置

以前沒有接觸過，看官網文檔調用的圖也是一臉懵，只知道有個預下單的操做獲取prepay_id，用戶支付完成以後，有微信回調的操做。 前端

image

公衆號和商戶平臺須要配置項
  • 支付須要獲取用戶的openid，所以在公衆號設置-功能設置-網頁受權域名中加入域名

加入域名時，須要將下載的文件放到項目中，使填寫的域名能訪問到。我是放到了靜態資源中，沒有寫其餘目錄，直接使用域名就可訪問。 jquery

image

  • 商戶平臺中公衆號支付須要配置域名,產品中心-開發配置-支付配置

image

  • 商戶平臺中須要設置API密鑰和API證書，由於是第一次設置，因此須要按照提示操做，若已經有了密鑰和證書，那就不要設置了。

image

三、開發

流程：
用戶--->>打開頁面確認受權獲取CODE--->>跳轉到訂單頁面--->>點擊支付--->>將CODE發送到後臺獲取openid,拼裝商品參數，調用微信預下單，獲取到prepay_id,並將prepay_id發送到前端--->>獲取prepay_id拉起支付界面，輸入密碼--->>支付成功，微信回調接口，並通知微信交易成功，中止微信回調。git

後臺配置
  • 一、須要將商戶平臺配置的證書文件和公衆號設置的受權文件，放到項目中

image

  • 二、配置公衆號相關信息

image

後臺代碼

關鍵後臺代碼github

@Autowired
    private BestPayServiceImpl bestPayService;

    private static final String get_openid="https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";

    @Autowired
    private WechatAccountConfig accountConfig;

    /**
     * 受權獲取CODE
     * @return
     */
    @GetMapping(value = "/pay")
    public ModelAndView pay() {
        return new ModelAndView("authon.html");
    }

    /**
     * 發起支付
     * 經過code, 獲取openid,
     */
    @GetMapping(value = "/goodspay")
    public ModelAndView goodspay(@RequestParam("code") String code,String money,
                            Map<String, Object> map) {
        String uri=String.format(get_openid,accountConfig.getMpAppId(),accountConfig.getSecret(),code);
        log.info("【獲取openid】request={}", uri);
        String json=HttpUtil.get(uri);
        log.info("【獲取openid】request={}", json);
        JSONObject jsonobj=JSONObject.parseObject(json);
        log.info("openid={}",jsonobj.get("openid"));
        String openid= (String) jsonobj.get("openid");
        return pay(openid,money,map);
    }


    /**
     * 發起支付
     */
    public ModelAndView pay(String openid,String money,
                            Map<String, Object> map) {
        PayRequest request = new PayRequest();
        Random random = new Random();

        //支付請求參數
        request.setPayTypeEnum(BestPayTypeEnum.WXPAY_H5);
        request.setOrderId(String.valueOf(random.nextInt(1000000000)));
        if(StringUtils.isNotEmpty(money)){
            request.setOrderAmount(new Double(money));
        }else{
            request.setOrderAmount(0.01);
        }
        request.setOrderName("支付測試");
        request.setOpenid(openid);
        log.info("【發起支付】request={}", JsonUtil.toJson(request));

        PayResponse payResponse = bestPayService.pay(request);
        log.info("【發起支付】response={}", JsonUtil.toJson(payResponse));

        map.put("payResponse", payResponse);

        return new ModelAndView("pay/create", map);
    }

    /**
     * 異步回調
     */
    @PostMapping(value = "/notify")
    public ModelAndView notify(@RequestBody String notifyData) throws Exception {
        log.info("【異步回調】request={}", notifyData);
        PayResponse response = bestPayService.asyncNotify(notifyData);
        log.info("【異步回調】response={}", JsonUtil.toJson(response));

        return new ModelAndView("pay/success");
    }


複製代碼

前端代碼

獲取用戶受權頁面正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受權跳轉中....</title>
</head>
<script>
    var appid = "wxdaa292459af12ea1";
    var redirect_uri = encodeURIComponent("http://ixq66a.natappfree.cc/goods.html");
    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"
</script>
<body>

</body>
</html>
複製代碼

點擊支付頁面json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轉帳</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
</head>
<body>

    <form action="/goodspay" method="get">
        <input  value="" id="code1" name="code" hidden/>

        <fieldset class="layui-elem-field site-demo-button" style="margin-top: 20%;margin-bottom: -30%;">
            <legend style="font-size: 50px;">下單支付0.01元</legend>
            <div style="margin-top: 70px;margin-left: 20px;margin-right: 20px;margin-bottom: 30px;">
                <button class="layui-btn layui-btn-primary" style="width: 100%;height: auto;background-color: #36e0d2; font-size: 100px;">微信支付</button>
            </div>
        </fieldset>
    </form>

    <form action="/goodspay" method="get" style="padding-top: 15%;">
        <input  value="" id="code2" name="code" hidden/>

        <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30%;margin-bottom: -30%;">
            <legend style="font-size: 50px;">輸入金額下單支付</legend>
            <input  value="" id="money" name="money" style="width: 50%;height: 100px;font-size: 100px;"   placeholder="輸入金額"/>
            <div style="margin-top: 70px;margin-left: 20px;margin-right: 20px;margin-bottom: 30px;">
                <button class="layui-btn layui-btn-primary" style="width: 100%;height: auto;background-color: #36e0d2; font-size: 100px;">微信支付</button>
            </div>
        </fieldset>
    </form>


<script>
    //轉碼
    function parse_url(url) { //定義函數
        var pattern = /(\w+)=(\w+)/ig; //定義正則表達式
        var parames = {}; //定義數組
        url.replace(pattern, function (a, b, c) {
            parames[b] = c;
        });
        return parames; //返回這個數組.
    }
    //獲取當前url   取到code
    var url = window.location.href;
    var params = parse_url(url);
    $("#code1").val(params.code);
    $("#code2").val(params.code);

</script>
</body>

</html>
複製代碼

拉起支付頁面api

<script>
    function onBridgeReady(){
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":"${payResponse.appId}",     //公衆號名稱，由商戶傳入
                    "timeStamp":"${payResponse.timeStamp}",         //時間戳，自1970年以來的秒數
                    "nonceStr":"${payResponse.nonceStr}", //隨機串
                    "package":"${payResponse.packAge}",
                    "signType":"MD5",         //微信簽名方式：
                    "paySign":"${payResponse.paySign}" //微信簽名
                },
                function(res){
                    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                        alert('支付成功');
                    }else if(res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('支付過程當中用戶取消');
                    }else if(res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失敗');
                    }else {
                        alert('未知異常');
                    }
                    WeixinJSBridge.call('closeWindow');
                }
        );
    }
    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();
    }
</script>
複製代碼

GIT地址

因項目是創建在別人項目基礎上更改的，因此保留了原做者。 github.com/litblank/Wx…數組

參考連接

juejin.im/post/5becf8… www.cnblogs.com/yimiyan/p/5…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程