vue paypal 使用

第一步引入 paypal-js

安装依赖

npm install @paypal/paypal-js

package.json

"@paypal/paypal-js": "^7.0.3",

第二步页面引入

import { loadScript } from "@paypal/paypal-js";

第三步页面元素

<div id="pay-but-container" class="w-full mt-3 mx-3" :data-pp-amount="calcPriceUs"></div>

第四步配置参数

const loadPaypal = async () => {
  let paypalDom = document.getElementById("pay-but-container");
  if (paypalDom) {
    paypalDom.innerHTML = "";
  }
  let loadParmes = {
    clientId: "VITE_PAYPAL_KEY",
    currency: "USD",
    components: "messages,marks,buttons",
    "enable-funding": "paylater",
    "buyer-country": "US"
  };
  loadScript(loadParmes)
    .then((paypal: any) => {
      paypal.Messages({ buyerCountry: "US", style: { layout: "text", text: { align: "center" }}}).render("#pay-but-container");
      paypal.Buttons({
          buyerCountry: "US",
          style: { layout: "vertical", color: "gold", shape: "rect", label: "paypal" },
          createOrder: async (data: any) => {
            // 创建订单
            let parmes: any = { ... };
            let { data, success } = await orderCreate(parmes);
            if (success) {
              return data?.paySecret;
            }
          },
          onCancel: () => {
            // 取消支付
          },
          onError: (err: any) => {
            // 支付失败
          },
          onApprove: (data: any, actions: any) => {
            // 支付成功
            return actions.order.capture().then(() => {
              router.push(`/pay/paySuccess`);
            });
          },
        })
        .render("#pay-but-container");
    })
    .catch((err: any) => {
      Message({ type: "success", text: err });
    });
};