vue2接入paypal支付

泠风lj發表於2024-03-09
Vue

paypal支付，官網

vue2接入paypal支付 vue2接入paypal支付vue2接入paypal支付

例項

引入cdn

在載入該元件時就讀取指令碼

data() {
    return {
      clientId:'AbJmdo6IqMHBMfgJVP-qWfFacVBBDOE45hOJGp8_XpZ1uq4ytOzOPDX4jw2p0pUTPmNptRA40BEqgdXf', // paypal客戶端id
    };
 },
mounted() {
    this.initScript()
  },
methods: {
    // 載入paypal指令碼
    initScript(){
      const setLoaded = ()=>{
      // console.log('初始化--載入script')
      }
      // 在頁面中建立script標籤
      const script = document.createElement("script");
      // 給script標籤加src 連結到paypal
      // script.src = "https://www.paypal.com/sdk/js?client-id=YOU_CLIENT_id";
      // 測試連線  沙盒
      // script.src = "https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks";
      script.src = `https://www.paypal.com/sdk/js?client-id=${this.clientId}`;
      script.addEventListener("load", setLoaded);
      document.body.appendChild(script);
    }
}

渲染生成元素元件

透過監聽變化，再初始化渲染元件

<div ref="paypalBtnBox"></div>
watch: {
    visible: {
      handler(val, oldVal) {
        this.popupStatus = val;
        if (val) {
          this.paypalResultStatus = false;
          if (window.paypal) {
            // console.log("已載入---");
            let _this = this;
            this.$nextTick(() => {
              _this.initPaypal(_this);
            });
          } else {
            // console.log("未載入---");
          }
        }
      },
      deep: true,
      immediate: true,
    },
},
methods: {
    // 初始化paypal元件
    async initPaypal(_this) {
      _this.$refs.paypalBtnBox.innerHTML = ''; // 清空元素內容
      window.paypal
        .Buttons({
          style: {
            layout: 'vertical',//按鈕樣式
            color: 'gold',//顏色
            shape: 'pill',//
            label: 'checkout',//按鈕文字
            tagline: false //
          },
          // locale: 'zh_CN',//按鈕的語言
          async createOrder() {
            // 建立
            try {
              //建立訂單xgemBuyPaypal
              const response = await xgemBuyPaypal(_this.paypalOrder)
                .then((resp) => {
                  _this.paypalRespond = resp?.data;
                  // console.log("--paypal---resp", _this.paypalRespond);
                  return _this.paypalRespond;
                })
                .catch((err) => {
                  _this.$notice.error(err);
                  return Promise.reject(err);
                });
              const orderData = await response;
              if (orderData?.payPalOrderId) {
                return orderData?.payPalOrderId;
              } else {
                const errorDetail = orderData?.details?.[0];
                const errorMessage = errorDetail
                  ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                  : JSON.stringify(orderData);
                throw new Error(errorMessage);
              }
            } catch (err) {
              _this.$notice.error(err);
            }
          },
          async onApprove(data, actions) {
            // 使用者支付回撥
            await actions.order.capture()
                  .then((details) => {
                    // 支付成功
                    let orderNumber,orderAmount;
                    // 訂單id
                    orderNumber = details.id;
                    //訂單支付的金額
                    orderAmount = details.purchase_units[0].amount.value;
                    _this.goResultPage(true)
                    // console.log('支付成功---1-',details, orderNumber,orderAmount);
                  }).catch((err)=>{
                    //支付失敗
                    _this.goResultPage(false)
                    // console.log('支付失敗----',err)
                  });
            _this.paypalApprove(_this,data,actions)

          },
          onCancel: function(data) {
            // 在付款取消時執行的操作
            // console.log('在付款取消時執行的操作---',data)
          },
          onClick: function(data) {
            // 在點選支付按鈕時執行的操作
            // console.log('在點選支付按鈕時執行的操作---',data)
          },

        })
        .render(_this.$refs.paypalBtnBox);
    },
}

完整程式碼

引用

<PaypalPop 
           :visible="PaypalPopupStatus" 
           :paypal-order="paypalOrderParams" 
           @closeEvent="showPaypalPopEvent" 
           @success="paymentSuccess">
</PaypalPop>

PaypalPop.vue

檢視程式碼 
 <template>
  <div>
    <Popup
      class="popup-paypal"
      :closeable="paypalResultStatus?false:true"
      v-model="popupStatus"
      get-container="body"
      :close-on-click-overlay="false"
      :position="bottomOrCenter"
      @click.stop
      @close="handleClose(1)"
    >
      <div class="paypal-button-container-box" v-if="!paypalResultStatus">
        <div ref="paypalBtnBox"></div>
      </div>
      <PaypalResult v-else :atype="paypalResultType" @closeEvent="handleClose(2)"></PaypalResult>
    </Popup>
  </div>
</template>

<script>
import { reportOrderNFTPaypal } from "@/api/http.account";
import { xgemBuyPaypal } from "@/api/nft/http.nft";
import { Popup } from "vant";
import PaypalResult from "@/components/PaypalResult.vue";
export default {
  name: "Paypal",
  components: {
    Popup,
    PaypalResult,
  },
  props: {
    paypalOrder: Object,
    visible: Boolean,
  },
  // paypalOrder
  data() {
    return {
      popupStatus: this.visible,
      paypalRespond: null, // paypal建立訂單後的回撥
      reportOrder: null, // 上報的訂單
      bottomOrCenter: "bottom",
      paypalResultStatus: false, // 是否顯示結果
      paypalResultType: false, // 結果狀態
      clientId:'AbJmdo6IqMHBMfgJVP-qWfFacVBBDOE45hOJGp8_XpZ1uq4ytOzOPDX4jw2p0pUTPmNptRA40BEqgdXf', // paypal客戶端id
    };
  },
  watch: {
    visible: {
      handler(val, oldVal) {
        this.popupStatus = val;
        if (val) {
          this.paypalResultStatus = false;
          if (window.paypal) {
            // console.log("已載入---");
            let _this = this;
            this.$nextTick(() => {
              _this.initPaypal(_this);
            });
          } else {
            this.$notice.error(this.$t('fomo.FOMO_EGAIN'));
            // console.log("未載入---");
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
  },
  mounted() {
    this.initScript()
  },
  methods: {
    //關閉當前彈窗,val:1為右上角的關閉 2為結果頁的關閉
    handleClose(val) {
      this.popupStatus = false;
      this.$emit("closeEvent", val); //傳送給子類 自定義方法
      return;
    },
    // 透過是判斷paypal支付結果
    // this.goResultPage(true)  this.goResultPage(false);
    goResultPage(_type) {
      this.paypalResultStatus = true;
      this.paypalResultType = _type;
    },
    // paypal結果上報
    async paypalReport(_this) {
      //上報介面引數
      const paramsReport = {
        id: _this.paypalRespond?.id, // 外部支付訂單ID
        payPalOrderId: _this.paypalRespond?.payPalOrderId, // PayPal Order ID
        result: _this.paypalResultType?1:2, // 支付結果：1-成功；2-取消
      };
      // console.log("上報的引數---", paramsReport);
      await reportOrderNFTPaypal(paramsReport)
        .then((resp) => {
          // console.log("上報結果--", resp);
          _this.reportOrder = resp?.data;
          _this.handleClose(2)
          _this.$emit('success');
          return _this.reportOrder;
        })
        .catch((err) => {
          //  this.$notice.error(_this.$t('order_paypal_Report_fail',{var1:'Paypal'}));
           this.$notice.error(_this.$t('account.order_payment_wait'));
        });
    },
    // 初始化paypal元件
    async initPaypal(_this) {
      _this.$refs.paypalBtnBox.innerHTML = ''; // 清空元素內容
      window.paypal
        .Buttons({
          style: {
            layout: 'vertical',//按鈕樣式
            color: 'gold',//顏色
            shape: 'pill',//
            label: 'checkout',//按鈕文字
            tagline: false //
          },
          // locale: 'zh_CN',//按鈕的語言
          async createOrder() {
            // 建立
            try {
              //建立訂單xgemBuyPaypal
              const response = await xgemBuyPaypal(_this.paypalOrder)
                .then((resp) => {
                  _this.paypalRespond = resp?.data;
                  // console.log("--paypal---resp", _this.paypalRespond);
                  return _this.paypalRespond;
                })
                .catch((err) => {
                  _this.$notice.error(err);
                  return Promise.reject(err);
                });
              const orderData = await response;
              if (orderData?.payPalOrderId) {
                return orderData?.payPalOrderId;
              } else {
                const errorDetail = orderData?.details?.[0];
                const errorMessage = errorDetail
                  ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                  : JSON.stringify(orderData);
                throw new Error(errorMessage);
              }
            } catch (err) {
              _this.$notice.error(err);
            }
          },
          async onApprove(data, actions) {
            // 使用者支付回撥
            await actions.order.capture()
                  .then((details) => {
                    // 支付成功
                    let orderNumber,orderAmount;
                    // 訂單id
                    orderNumber = details.id;
                    //訂單支付的金額
                    orderAmount = details.purchase_units[0].amount.value;
                    _this.goResultPage(true)
                    // console.log('支付成功---1-',details, orderNumber,orderAmount);
                  }).catch((err)=>{
                    //支付失敗
                    _this.goResultPage(false)
                    // console.log('支付失敗----',err)
                  });
            _this.paypalApprove(_this,data,actions)

          },
          onCancel: function(data) {
            // 在付款取消時執行的操作
            // console.log('在付款取消時執行的操作---',data)
          },
          onClick: function(data) {
            // 在點選支付按鈕時執行的操作
            // console.log('在點選支付按鈕時執行的操作---',data)
          },

        })
        .render(_this.$refs.paypalBtnBox);
    },
    // paypal支付狀態回撥
    async paypalApprove(_this,data,actions){
      // console.log("paypal回撥---", data, "-----", actions);
            try {
              const response = _this.paypalReport(_this);
              const orderData = await response;
            } catch (error) {
              console.error(error);
            }
    },
    // 載入paypal指令碼
    initScript(){
      const setLoaded = ()=>{
      // console.log('初始化--載入script')
      }
      // 在頁面中建立script標籤
      const script = document.createElement("script");
      // 給script標籤加src 連結到paypal
      // script.src = "https://www.paypal.com/sdk/js?client-id=YOU_CLIENT_id";
      // 測試連線  沙盒
      // script.src = "https://www.paypal.com/sdk/js?client-id=test&components=buttons,marks";
      script.src = `https://www.paypal.com/sdk/js?client-id=${this.clientId}`;
      script.addEventListener("load", setLoaded);
      document.body.appendChild(script);
    }
  },
};
</script>
<style lang="scss" scoped >
.popup-paypal{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
.paypal-button-container-box{
  width: 70%;
}
</style>

PaypalResult.vue

檢視程式碼 
 <template>
  <div>
    <div style="font-size: 20px; margin:60px 20px; text-align: center;">  
        <img v-if="showBtn" style="width:46px;" src="data:image/png;base64,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" alt="" />
        <img v-else style="width:46px;" src="data:image/png;base64,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" />
        <p style="font-size:20px;color:#3F3F3F;">{{showBtn?'Success':'Failed'}}</p>
        <ButtonAsync class="btn-hollow" :async="closeWindow"> {{ $t("common.message_done") }}</ButtonAsync>
    </div>
  </div>
</template>  
  
<script>
import ButtonAsync from "@/components/ButtonAsync";
export default {
  name: "PaypalResult",
  components: {
    ButtonAsync,
  },
  props: {
    atype: Boolean,
  },
  data() {
    return {
      showBtn: false,// 成功失敗
    };
  },
  watch: {
    atype: {
      handler(val, oldVal) {
        this.showBtn = val;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    
  },
  async mounted() {
  },
  methods: {
    closeWindow(){
      this.showBtn = false;
      this.$emit("closeEvent", this.showBtn); //傳送給子類 自定義方法
      return Promise.resolve();
    },
  },
};
</script>
<style lang="scss" scoped >
.btn-base{
  margin-top: 20px;
  width: 100%;
}
</style>

參考vue3接入paypal

https://perper.top/700/.html

相關文章