ShowEasyFrontEnd/FrontEnd/components/service/ecpay.vue

<template>
  <div>
    <div id="ECPayPayment"></div><br />
    <form action="" id="PayProcess" method="post">
      <div style="text-align: center;">
        <input id="PaymentType" name="PaymentType" type="hidden" value="" />
      </div>
    </form>
  </div>
</template>
<script>
export default {
  head() {
    return {
      script: this.script
    }
  },
  props: {
    method: {
      type: String,
    },
    orderNo: {
      type: String
    }
  },
  data() {
    return {
      script: [
        {
          src:
            "https://code.jquery.com/jquery-3.5.1.min.js",
          body: true,
          type: "text/javascript",
          async: true,
          onload: this.jqueryOnload()
        },
      ],
      devECPayUrl: 'https://dev-lambda.showeasy.com',
      token: '',
      payToken: '',
      once: false,
    }
  },
  created() {
    this.getToken();
  },
  mounted() {
    // this.$nextTick(function () {
    //   this.init();
    // })
  },
  methods: {
    getToken() {
      this.$axios
        .post(
          `${this.devECPayUrl}/payment/ecpay/token`, {
          payment_flow: "ecpay",
          product_order_no: this.orderNo,
          pay_price: 1200,
          prod_desc: "dev test",
          payer_email: "ss22333@gmail.com"
        }
        )
        .then((response) => {
          this.token = response.data.token;
        })
        .catch((error) => console.log(error));
    },
    init() {
      var vm = this;
      var Environment = 'STAGE'; //請設定要連線的環境: 測試 STAGE ,正式PROD
      var envi = vm.GetEnvi(Environment);
      var _token = vm.token; //請設定你取到的廠商驗證碼
      //初始化SDK畫面
      if (!vm.once) {
        ECPay.initialize(envi, 1, function (errMsg) {

          // if (_token === '') {
          //   _token = prompt('請填入Token: ');
          // }

          try {
            ECPay.createPayment(_token, ECPay.Language.zhTW, function (errMsg) {
              console.log('Callback Message: ' + errMsg);
              if (errMsg != null)
                vm.ErrHandle(errMsg);
            });
          } catch (err) {
            vm.ErrHandle(err);
          }
        });
        vm.once = true;
      }
    },
    GetEnvi(env) {
      var result = 'STAGE';
      switch (env) {

        case 'STAGE':
          result = 'Stage';
          break;
        case 'PROD':
          result = 'Prod';
          break;
      }
      return result;
    },
    ErrHandle(strErr) {
      if (strErr != null) {
        $('#ECPayPayment').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>');
        console.log(strErr);
      } else {
        $('#ECPayPayment').append('<div style="text-align: center;"><label style="color: red;">Token取得失敗</label></div>');
        console.log('Wrong');
      }

      //$('#btnPay').hide();
    },
    jqueryOnload() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.script.push({
            src:
              "https://cdn.jsdelivr.net/npm/node-forge@0.7.0/dist/forge.min.js",
            body: true,
            async: true,
            type: "text/javascript",
          }, {
            src:
              "https://ecpg.ecpay.com.tw/Scripts/sdk-1.0.0.js?t=20210121100116",
            body: true,
            async: true,
            type: "text/javascript",
          })
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.ecpay-pay-list-wrap) {
  background-color: transparent;
}

:deep(.ecpay-pay-list-wrap .ecpay-pay-list) {
  padding: 0;
  margin: 0 auto 0 0;
}
</style>