通过前面两节，我们把小程序支付的基本工作给完成了，现在我们如何在前端调用我们的接口呢，今天本章就是跟大家谈论一下。我们先看一下效果图

在线付款

付款界面

wxml代码

<view class="container">
    <view class="orders">
        <navigator url="../orderdetail/orderdetail?id={{item.g_id}}"  class="order" wx:for="{{orderList}}" wx:key="{{item.g_id}}">
            <view class="h">
                <view class="l">订单编号：{{item.g_uuid}}</view>
                <view class="r" wx:if="{{item.g_state == 1}}" ><text style='color:#EC2C2F'>待付款</text></view>
                <view class="r" wx:elif="{{item.g_state == 2}}" ><text style='color:green'>已付款</text></view>
                <view class="r" wx:elif="{{item.g_state == 3}}" ><text style='color:#ff5600'>已发货</text></view>
                <view class="r" wx:elif="{{item.g_state == 4}}" ><text style='color:#333333'>订单取消</text></view>
                <view class="r" wx:elif="{{item.g_state == 5}}" ><text style='color:green'>交易成功</text></view>
            </view>
            <view wx:for="{{item.child}}" wx:key="{{gitem.p_id}}" wx:for-item="gitem">
            <view class="goods" >
                <view class="img">
                    <image src="{{image_url}}{{gitem.p_img}}"></image>
                </view>
                <view class="info">
                    <text class="name">{{gitem.p_name}}</text>
                    <text class="number">共{{gitem.p_num}}件商品</text>
                </view>
                <view class="status" wx:if="{{gitem.msgcount <= 0 && item.g_state == 5}}">
                <text class="pingjia" data-product-name="{{gitem.p_name}}" data-order-id="{{item.g_uuid}}" data-product-id="{{gitem.p_id}}" bindtap='comment'>评价</text>
                </view>
            </view>
            </view>
            <view class="b">
                <view class="l">实付：<text class="txt">￥{{item.g_money}}</text> </view>
                 <view class="r" wx:if="{{item.g_state ==1}}">
           <button class="btn_cancel" data-order-index="{{item.g_id}}" catchtap="cancelOrder">删除订单</button>
                </view>
                <view class="r" wx:if="{{item.g_state ==1}}">
           <button class="btn" data-order-index="{{item.g_uuid}}" data-order-money="{{item.g_money}}" catchtap="payOrder">去付款</button>
                </view>
            </view>
        </navigator>
    </view>
    <view wx:if="{{orderList.length>6}}" class="loadmore">
      <block wx:if="{{nomore}}">
        <text>{{nomoreText}}</text>
      </block>
      <block wx:else>
        <text class="iconfont icon-loading loading" space="nbsp"></text>
        <text> {{loadmoreText}}</text>
      </block>
    </view>
     <view class="no-cart" wx:if="{{orderList.length <= 0}}">
      <view class="c">
        <view class="title-box">暂时没有订单信息～</view>
        <view class="to-index-btn" bindtap="toIndexPage">去逛逛</view> 
      </view>
      </view>
</view>

wxss代码

page{
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.orders{
    height: auto;
    width: 100%;
    overflow: hidden;
}

.order{
    margin-top: 20rpx;
    background: #fff;
}

.order .h{
    height: 83.3rpx;
    line-height: 83.3rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .h .l{
    float: left;
}

.order .h .r{
    float: right;
    color: #b4282d;
    font-size: 24rpx;
}

.order .goods{
    display: flex;
    align-items: center;
    height: 199rpx;
    margin-left: 31.25rpx;width:100%;
}

.order .goods .img{
    height:145.83rpx;
    width:145.83rpx;
    background: #f4f4f4;
}

.order .goods .img image{
    height:145.83rpx;
    width:145.83rpx;
}

.order .goods .info{
    height: 145.83rpx;
    flex: 1;
    padding-left: 20rpx;
}

.order .goods .name{
    margin-top: 30rpx;
    display: block;
    height: 44rpx;
    line-height: 44rpx;
    color: #333;
    font-size: 30rpx;
}

.order .goods .number{
    display: block;
    height: 37rpx;
    line-height: 37rpx;
    color: #666;
    font-size: 25rpx;
}

.order .goods .status{
   /* width:105rpx;*/
    color: #b4282d;
    font-size: 25rpx;margin-right:60rpx;
}

.order .b{
    height: 103rpx;
    line-height: 103rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .b .l{
    float: left;
}

.order .b .r{
    float: right;
}

.order .b .btn{
    margin-top: 19rpx;
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 26rpx;
    color: #fff;
    background: #b4282d;
}

.order .b .btn_cancel{
    margin-top: 19rpx; margin-left: 19rpx;
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 26rpx;
    color: #333333;
    border:#CCCCCC 1px solid;
}

.loadmore {
  height: 100rpx;
  width: 100%;
  line-height: 80rpx;
  text-align: center;
  margin-top: 0rpx;
}

.loadmore text {
  color: #999;
}

@keyframes loading {
  0% {transform: rotate(0deg)}
  50% {transform: rotate(180deg)}
  100% {transform: rotate(360deg)}
}

.loading {
  display: inline-block;
  transform-origin: 50% 50%;
  animation: loading 1s linear infinite;
}

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1520838078027'); /* IE9*/
  src: url('iconfont.eot?t=1520838078027#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWkAAsAAAAACCgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kuaY21hcAAAAYAAAAB6AAAByKkz+SxnbHlmAAAB/AAAAYYAAAGYdRuBnWhlYWQAAAOEAAAALwAAADYQt9FAaGhlYQAAA7QAAAAcAAAAJAfeA4dobXR4AAAD0AAAABMAAAAYF+kAAGxvY2EAAAPkAAAADgAAAA4B4AE4bWF4cAAAA/QAAAAfAAAAIAEVAF1uYW1lAAAEFAAAAUUAAAJtPlT+fXBvc3QAAAVcAAAASAAAAFncWPV6eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sM4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLxcw9zwv4EhhrmBoQEozAiSAwAxqA0feJzFkbENhTAMRJ8hfCHEKEyCmOeLgp6egilYzFPAOYGCCbjoRbmTFUcx0AC1GEQCWzBCf6WW85ou54lRvqel0nn21Tff/ThPpW/3yFT9rHCV7krR0X58Jvuu9Vt93qfbxRzmGz3R14L+DN8KMSffCzErPwo0FyyDIOcAAHicJY+7SgNREIZnzsleotmNe99sks1lkxwlGjBZEy+YiNgoFoKVYKEPoI2FIBZpBAtBwdJKCWgrKFj4ABbWgoKFFxArWxFZ3ejwNwPffD8DHMDPE72mNmjQD8MwAwsAyJcxL5M05phfIWU0cpxh6TJlHssJXr5CJ9HK87pZrfslixf4OMroYi1XrbMKYTjiN8kEVs00YiLpLKrFlEoPsMdm7k4wR07QyHipeHMomB1s6dWsJm7GVDWhqnsiz3EiIZG4jGuWGeWiPXzQ4eKOcZ0ZIBmMJZgzvyRlk+rqrr+eLlpRxHYbtWRWPm0pjhJm2zE1NSH0SaLtSF5Bx83XXluLpUsvEA6Gv+6TDzoKfLhYAlM8hRgPxcsajTwULr7v6FmXAaBbpN1lisiiKCBuECET2MGni6VlwruBjaIb3P/5DolJ/S7LsYal1BR8vi9c1sZCHfW+V+Dfh29hpwTQqOBIExuGjIJuWjfN6cj7+dEtnayPT3WWrr5kX3o8Xjyohxe/NMZLegAAeJxjYGRgYADi0vZZW+P5bb4ycLMwgMC1M277EPT/fhYGZgsgl4OBCSQKAEcNCx8AeJxjYGRgYG7438AQw8IAAkCSkQEVsAEARwwCb3icY2FgYGB+ycDAwoCKARKfAQEAAAAAAAB2AIgAngCwAMwAAHicY2BkYGBgYwhkYGUAASYg5gJCBob/YD4DABFIAXMAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAjZGJkZmRhZGVkY2RnYGxgqsoNSc1sThVt7SAIzk/tyAntSSVs6A0J0c3Jb88jz0nPzElMy+dgQEARPMOmw==') format('woff'),
  url('iconfont.ttf?t=1520838078027') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1520838078027#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-release-up:before { content: "\e987"; }

.icon-complete:before { content: "\e992"; }

.icon-pull-down:before { content: "\e996"; }

.icon-loading:before { content: "\e9ac"; }

/* 没有任何评价对象*/
.no-cart{width: 100%;height: auto; margin: 0 auto;background-color:#ffffff;}

.no-cart .c{ width: 100%; height: auto;}

.no-cart .c image{ margin: 0 auto; display: block; text-align: center;  width: 258rpx;height: 258rpx;}

.no-cart .c text{ margin: 0 auto;display: block; width: 258rpx; height: 29rpx; line-height: 29rpx; text-align: center; font-size: 29rpx;color: #999;}
.title-box{
    width: 100%; padding-top: 330rpx;text-align: center;font-size:28rpx;color:#999;
    background: url(http://login.pink333.com/uploads/20181026/cf3265d5f592acc4c214ec9de060cc0a.png) no-repeat center 205rpx;
    background-size: 100rpx auto;
    margin-bottom: 50rpx;
}
.to-index-btn{ color:#fff;background:#e64340; border-radius:6px; width:300rpx; height: auto;line-height: 70rpx;  text-align: center; font-size:28rpx;margin: 0 auto; display: block;}

.pingjia{ color:#fff;background:#e64340; border-radius:6px; width:100rpx; height: auto;line-height: 70rpx;  text-align: center; font-size:28rpx;margin: 0 auto; display: block;}

JS代码

const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    orderList: [],
    pageNum: 1,
    pageSize: 20,
    loadmoreText: '正在加载更多数据',
    nomoreText: '全部加载完成',
    nomore: false,
    hasMoreData: true,
    image_url: app.globalData.image_url,
    g_state:0
  },

  toIndexPage: function() {
    wx.switchTab({
      url: '/pages/mall/index/index',
    })
  },

/**
 * 评价
 */
  comment: function(event) {
    let that = this;
    let p_uuid = event.currentTarget.dataset.orderId; //获取订单编号
    let s_id = event.currentTarget.dataset.productId; //产品ID
    let s_title = event.currentTarget.dataset.productName;
    wx.navigateTo({
      url: '/pages/ucenter/comment/comment?p_uuid=' + p_uuid + '&s_id=' + s_id +'&s_title=' + s_title,
    })
  },
  /**
 * 取消订单
 */
  cancelOrder: function (event) {
    let that = this;
    let orderIndex = event.currentTarget.dataset.orderIndex; //获取订单编号
    console.log(orderIndex);
    wx.showModal({
      title: '提示',
      content: '确定要取消此订单？',
      success: function (res) {
        console.log(res);
        if (res.confirm) {
          //用户确认删除
          util.request(api.deleteOrder, { id: orderIndex }, 'POST').then(rs => {
            that.getOrderList();
            if (rs.errCode == 200) {
              wx.showModal({
                title: '提示',
                content: rs.errMsg,
                showCancel: false,
                confirmText: '继续',
                success: function (rss) {
                  
                }
              })
            }
          });
         
        }
      }
    })
  },


/**
 * 去付款
 */
  payOrder: function(event) {
    let that = this;
    let orderIndex = event.currentTarget.dataset.orderIndex; //获取订单编号
    let orderMOney = event.currentTarget.dataset.orderMoney; //订单金额
    let user = wx.getStorageSync('userInfo');
    util.request(api.PayPrepayId, { orderId: orderIndex, openid: user.m_openid, m_id: user.m_id }, 'POST').then(res => {
      if (res.errMsg.state == 1) {
        const payParam = res.errMsg;
        wx.requestPayment({
          'timeStamp': payParam.timeStamp+'',
          'nonceStr': payParam.nonceStr,
          'package': payParam.package,
          'signType': payParam.signType,
          'paySign': payParam.paySign,
          'success': function (res) {
            console.log(res);
          },
          'fail': function (res) {
            console.log(res);
          }
        });
      } else {
        wx.showModal({
          title: '提示',
          content: res.errMsg.RETURN_MSG,
          showCancel: false,
          success: function (rs) { }
        })
      }
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中...',
      success: function () {
      }
    });
    this.setData({
      g_state: options.g_state
    });
    this.getOrderList();
  },

  /**
  * 显示订单列表
  */
  getOrderList: function (message) {
    var that = this;
    let user = wx.getStorageSync('userInfo');
  var http_pay='付款接口'; //上一章我们写的付款接口
    util.request(, { g_state: that.data.g_state, pageNum: that.data.pageNum, pageSize: that.data.pageSize, m_id: user.m_id}, "POST").then(res => {
      var contentlistTem = that.data.orderList;
      if (res.errCode == 200) {
        if (res.errMsg.pageNum == 1) {
          contentlistTem = [];
        }
        var contentlist = res.errMsg.list;
        if (that.data.pageNum >= res.errMsg.pageCount) {
          that.setData({
            orderList: contentlistTem.concat(contentlist),
            hasMoreData: false
          });
        } else {
          that.setData({
            orderList: contentlistTem.concat(contentlist),
            hasMoreData: true,
            pageNum: that.data.pageNum + 1
          });
        }
        wx.hideLoading();
      }
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getOrderList();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getOrderList();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
备注：请大家具体看看 payOrder函数，其他的函数可以不用管它。
顺便说一下，支付功能请用真机测试，否则你会发现意想不到的问题，具体会出现什么问题，大家可以尝试看看。在此不再熬述。

以上就是小程序支付的所有内容，希望对大家有帮助。如果还有不明白的同学可以给我留言。
相关章节：
小程序在线支付教程一
小程序在线支付教程二