vue实现apply pay支付功能

官方文档

1. 引入显示Apple Pay按钮

       1.1  index.html

<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>

       1.2  index.vue

// showApplePay判断用户是否是ios设备
<apple-pay-button v-if="showApplePay" @click="btn" buttonstyle="black" type="plain" locale="zh-CN"></apple-pay-button>

// 判断用户是否是ios设备
mounted() {
    window.ApplePaySession === undefined ? (this.showApplePay = false) : (this.showApplePay  = true);
  },

// css样式
apple-pay-button {
  --apple-pay-button-width: 142px;
  --apple-pay-button-height: 42px;
  --apple-pay-button-border-radius: 7px;
  --apple-pay-button-padding: 0px 0px;
  --apple-pay-button-box-sizing: border-box;
  margin-left: 20px;
  display: block;
}

2. 支付参数配置

    // 苹果支付按钮
    async onApplePayButtonClickedJapan() {
      // 获取订单总价
      let strTotal = this.param.totalPrice;
      strTotal = strTotal.toString();

      // 判断设备
      if (!PaymentRequest) {
        return;
      }

      const paymentMethodData = [
        {
          supportedMethods: "https://apple.com/apple-pay", // 如果以后有更改 去  https://applepaydemo.apple.com/ 下面的show source查看更改 一般不需要改
          data: {
            version: 3,
            merchantIdentifier: "merchant.com.moominvalleypark-booking", // 在 AppStore开发者里面看,一般不用换
            merchantCapabilities: ["supports3DS"],
            supportedNetworks: [
              //支持卡类型
              "amex",
              "discover",
              "masterCard",
              "visa",
            ],
            countryCode: "JP", //国家代号
          },
        },
      ];
      // 订单详情
      const paymentDetails = {
        total: {
          //总价格
          label: "JTRWeb LTD.", //店铺名字
          amount: {
            value: strTotal, //总价格
            currency: "JPY", //货币
          },
        },
        
        // displayItems为商品信息. 封装方法setApplePayOrderDesc处理所需的商品数据格式
        // 格式为:
        // "displayItems":  [
        //     {
        //         "label": "Tax",
        //         "amount": {
        //             "value": "2.50",// 单价
        //             "currency": "USD" // 货币
        //         }
        //     },
        // ],
        displayItems: this.setApplePayOrderDesc(),
        modifiers: [
          {
            supportedMethods: "https://apple.com/apple-pay", // 如果以后有更改 去https://applepaydemo.apple.com/ 下面的show source查看更改 一般不需要改
            data: {
              paymentMethodType: "debit",
            },
            total: {
              label: "JTRWeb LTD.",
              amount: {
                value: strTotal, //总价格
                currency: "JPY", //货币
              },
            },
          },
        ],
      };
      //是否需要在Apple Pay填写资料
      const paymentOptions = {
        requestPayerName: false,
        requestBillingAddress: false,
        requestPayerEmail: false, //是否需要填写邮箱
        requestPayerPhone: false, //是否需要填写电话
        requestShipping: false,
        shippingType: "shipping",
      };

      // Create PaymentRequest
      const request = new PaymentRequest(
        paymentMethodData,
        paymentDetails,
        paymentOptions
      );
      request.onmerchantvalidation = async (event) => {
        // 请求后端,获取新的merchant session.
        const merchantSessionPromise = await post_orderTopay({
          id: this.id,
          pay_type: this.paymentWay,
        });
        console.log("merchantSessionPromise", merchantSessionPromise);

        event.complete(merchantSessionPromise.data.data.content);
      };

      request.onpaymentmethodchange = (event) => {
        // Define PaymentDetailsUpdate based on the selected payment method.
        // No updates or errors needed, pass an object with the same total.
        const paymentDetailsUpdate = {
          total: paymentDetails.total,
        };
        event.updateWith(paymentDetailsUpdate);
      };

      request.onshippingoptionchange = (event) => {
        // Define PaymentDetailsUpdate based on the selected shipping option.
        // No updates or errors needed, pass an object with the same total.
        const paymentDetailsUpdate = {
          total: paymentDetails.total,
        };
        event.updateWith(paymentDetailsUpdate);
      };

      request.onshippingaddresschange = (event) => {
        // Define PaymentDetailsUpdate based on a shipping address change.
        const paymentDetailsUpdate = {
          total: {
            label: "JTRWeb LTD.",
            amount: {
              value: strTotal,
              currency: "JPY",
            },
          },
        };
        event.updateWith(paymentDetailsUpdate);
      };

      // 请求结果
      let response = await request.show();
      this.paymentData = JSON.stringify(response.details.token.paymentData);

      const status = "success";
      await response.complete(status);

      console.log(response);

      // 发送后端添判断成功与否
      let resPay = await post_orderPayresult(this.id, response);

      if (resPay.data.status == 302) {
        this.$router.push(resPay.data.data);
      }
      console.log(resPay);
    },