Vue Apple Pay

第一步 Apple 账号生成如下文件放到项目/public/.well-known/ 下

apple-developer-merchantid-domain-association.txt

第二步 检测当前环境是否支持 Apple Pay

const canMakeApplePay = () => {
  nextTick(() => {
    if (
      window["ApplePaySession"] &&
      window["ApplePaySession"]?.canMakePayments
    ) {
      HTMLCollection.prototype[Symbol.iterator] =
        Array.prototype[Symbol.iterator];
      const buttons: any = document.getElementsByClassName("apple-pay-button");
      for (let button of buttons) {
        button.className += " visible";
      }
    }
  });

      // 判断是否可用 Apple Pay CARD
      // if (window['ApplePaySession']) {
      //     let merchantIdentifier = 'merchant.com.xxxxxx';
      //     let promise = window['ApplePaySession']?.canMakePaymentsWithActiveCard(merchantIdentifier);
      //     promise.then((canMakePayments: any) => {
      //         checkPayStore.setApplePayState(!!canMakePayments);
      //         if (canMakePayments) {
      //             HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
      //             const buttons: any = document.getElementsByClassName("apple-pay-button");
      //             for (let button of buttons) {
      //                 button.className += " visible";
      //             }
      //         }
      //     });
      // }
};

第三步 开始支付操作

const onApplePayClick = () => {
  if (!import.meta.env.SSR) {
    const paymentRequest = {
      countryCode: "US",
      currencyCode: "USD",
      supportedNetworks: ['amex', 'discover', 'masterCard', 'visa', 'chinaUnionPay'],
      merchantCapabilities: ['supports3DS', 'supportsDebit', 'supportsCredit'],
      total: {
        label: "Safe Insurance Co",
        type: "final",
        amount: "123.45",
      },
    };
    const session = new window["ApplePaySession"](3, paymentRequest);
    session.onvalidatemerchant = (event: any) => {
      const validationURL = event?.validationURL;
      getApplePaySession({ validationUrl: validationURL }).then((res: any) => {
        try {
          session?.completeMerchantValidation(res);
        } catch (err) {}
      });
    };

    session.onpaymentauthorized = (event: any) => {
      const payment = event?.payment;
      let cartTypeStr = payment?.token?.paymentMethod?.displayName?.split(" ")[0] || payment?.token?.paymentMethod?.network || "";
      let payParme = { appleParam: { token: payment?.token, cartType: cartTypeStr }};
      processPayment(payParme);
    };
    session.oncancel = () => {};
    session.begin();
  }
};

const processPayment = (payParme: any) => {
  try {
    let parmes = { orderNumber: "orderNumber", currency: "USD", ...payParme };
    orderPayment(parmes).then((res: any) => {  // 自己都端接口
      if (res?.success && res?.data) {
        router.push(`/pay/paySuccess`);
      }
    });
  } catch (error) {}
};

第四步 增加页面元素

<div class="apple-pay-button" @click="onApplePayClick" />

.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: buy;
  visibility: hidden;
  display: inline-block;
  width: 100%;
  margin-left: 12px;
  margin-right: 12px;
  min-height: 52px;
  border: 1px solid black;
  background-image: -webkit-named-image(apple-pay-logo-black);
  background-size: 100% calc(60% + 2px);
  background-repeat: no-repeat;
  background-color: white;
  background-position: 50% 50%;
  border-radius: 5px;
  padding: 0px;
  margin: 5px auto;
  transition: background-color 0.15s;
}

.apple-pay-button.visible {
  visibility: visible;
}

.apple-pay-button:active {
  background-color: rgb(152, 152, 152);
}

第五步 证书配置好后校验一下