Day22:22 - 結帳服務(6) - 前端 - 結帳 X PayPal付款 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 22

Modern Web

30天肝出購物網站系列第 22 篇

Day22:22 - 結帳服務(6) - 前端 - 結帳 X PayPal付款

13th鐵人賽 vue.js

charlieda

團隊達內四鍵客

2021-10-06 12:23:24

994 瀏覽

分享至

Helló，我是Charlie！
在Day21當中我們完成了後端的paypal sdk，在今天我們將完成前端結帳的部分。

================================◉‿◉=================================

首先是結帳的部分，在createOrder裡面的checkout新增導向approve link的程式碼：

checkout(){
  var username = window.localStorage.getItem("username")
  var token = window.localStorage.getItem("token")
  createOrderData(username,token).then((response) => {
    if(response.data.code == STATUS_OK){
      window.localStorage.setItem('orderID',response.data.data.orderid)
      window.location.href = response.data.link.approve
    }else{
      this.$fire({type:"error",text:response.data.data})
    }
  })
},

接著創立兩個vue：orderCreated跟orderCanceled，並且設立路由：

  {
    path: "/orderCreated",
    name:"createPaypalPage",
    component: orderCreated,
    meta: {
      title: "付款建立"
    }
  },
  {
    path: "/orderCanceled",
    name: "cancalOrderPage",
    component: orderCanceled,
    meta: {
      title: "付款取消"
    }
  }

接著在order.js當中，新增打capture order的API：

export function captureOrder(orderID,token){
  return axios.post(`http://${host()}:${port()}/userorder/capture/${orderID}`,{
    headers:{
      "AUTHORIZATION":token
    }
  })
}

接著修改orderCreated.vue，讓這個vue顯示付款成功或者付款失敗：

<template>
	<html lang="zh-Hant-TW">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" type="image/x-con" href="@/assets/favicon.ico">
		<div id="app">
			<headerComponent></headerComponent>
			<div class="info" style="margin:0 auto;width: 50%;height: 50%;text-align: center;">
				<img :src="successImage" alt="" style="width:300px;height: 300px;">
				<h4>{{ successText }}</h4>
			</div>
		</div>
	</html>
</template>

<script>
  import { captureOrder } from '@/apis/order.js'
  import { STATUS_OK } from '@/apis/constant.js'
  export default{
    name: "orderCreated",
    components:{
      'headerComponent':() => import('@/components/header.vue')
    },
    data(){
      return {
        successImage:"",
        successText: ""
      }
    },
    created(){
      var orderid = window.localStorage.getItem("orderID")
      console.log(orderid)
      var token = window.localStorage.getItem("token")
      captureOrder(orderid,token).then((response) => {
        console.log(response)
        if(response.status == STATUS_OK){
          this.successImage = "https://i.imgur.com/mBolVrx.jpg"
          this.successText = "付款成功"
        }else{
          this.successImage = "https://i.imgur.com/EJjpUGf.png"
          this.successText = "付款失敗"
        }
      })
    }
  }
</script>

cancel的話就是固定頁面，這裡就不贅述了。

接著便可測試是否能結帳成功：

Imgur

================================◉‿◉=================================

Day22結束了！在今天我們完成了前端的付款，而明天我們將實作訂單API的部分，See ya next day！