Skip to main content

支付宝支付页面实现

本文介绍如何在前端页面实现支付宝支付功能。

前期准备​

在开始实践前，需要先准备好后端接口，并确保接口已就绪。

前端页面操作​

  1. 进入"members card"页面。
  2. 点击"购买"按钮，触发pay函数。
  3. pay函数发送get请求，请求后端接口api/alipay，并传递card id作为参数。
  4. 获取后端接口的响应response。
  5. 打印response.data查看返回的数据。
  6. 根据返回的数据进行相关处理，例如跳转到支付宝支付页面。

调用支付接口发送请求​

在会员卡列表页面，点击“购买”按钮，执行pay()函数，调用支付宝支付接口，代码如下：

frontend/src/views/MemberCard.vue
<template>
  <button
    v-on:click="pay(card)"
    data-pay_type="alipay"
    class="card w-24 rounded-3xl bg-purple-600 text-white text-lg p-2 mx-8 my-2"
  >
    购买
  </button>
          
  methods: {
    get_card_info() {
      axios.get("/api/cards/").then((response) => {
        this.info = response.data;
      });
    },
    pay(card) {
      axios.get("/api/alipay/?card_id=" + card.id).then((response) => {
        window.location.href = response.data;
      });
    },
  },

</template>

在处理完接口响应后，使用window.location.href跳转到支付宝支付页面。

window.location.href = response.data;

注意事项

  1. card id可能未传递正确，需要在前端打印出card.id进行调试。
  2. 确保后端接口中的参数设置正确，特别是传递给支付接口的参数应为字符串形式。
  3. 使用沙箱买家用户进行支付测试。

图71-会员卡列表页面

图71-支付登录页面

图71-确认支付

图71-支付成功

本节课重点介绍了前端页面如何实现支付宝支付功能，并给出了相应的代码示例和调试建议。在实践中，我们需要注意参数传递和跳转路径的正确性，并使用沙箱买家用户进行支付测试。下节课将进一步介绍支付完成后的回调功能。

注意

支付成功后，页面并不会跳转，这是因为现在我们还没有设置回调地址。下节课我们再来实现这个功能。