PayPal 支付信用卡业务

Question

我想直接在自己的页面上，默认加载的时候就显示信用卡支付的业务
如下：

根据要求不能自己写输入框
现在就要在加载页面的时候自动内嵌 paypal 的信用卡业务页面

import { loadScript } from '@paypal/paypal-js';
const clientId = 'xxxxxxxxxxxx'
const orderID = ref('xxxxxxxxx'); // 后端生成的paypal订单id

const initializePaypalFields = async () => {
  if (!orderID.value) return;  // 确保已经有订单号

  try {
    // 加载 PayPal SDK
    const paypal = await loadScript({
      "client-id": clientId,  // 替换为你的 PayPal 客户端 ID
      components: "hosted-fields",    // 只加载 hosted-fields 组件
      authorization: '123'
    });

    if (paypal && paypal.HostedFields) {
      // 渲染 Hosted Fields
      await paypal.HostedFields.render({
        createOrder: async (data, actions) => {
          // 使用后端生成的订单号来发起支付
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: '10.00',  // 支付金额
                currency_code: 'USD',  // 支付货币类型
              },
              invoice_id: orderID.value  // 使用已知的订单号
            }]
          });
        },
        onApprove: async (data, actions) => {
          // 
        }
      }, '#paypal-card-fields');
    }
  } catch (error) {
    console.error('Error loading PayPal script:', error);
  }
};

onMounted(() => {
  initializePaypalFields(); // 初始化 PayPal Hosted Fields
});

现在的问题是不加 authorization
报错：options.authorization is required when instantiating a client.

加了：SDK Validation error: 'Disallowed query param: authorization

现在是用美国沙盒商户 开了 PayPal Payments Pro

这种情况需要开PayPal Payments Pro吗？
或者开了，为什么会出现前面的错误？

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从你提供的代码和描述来看，你正在尝试使用PayPal的Hosted Fields功能来在网页上嵌入信用卡支付表单。关于你的问题，我会分两部分来解答：

1. 关于options.authorization is required when instantiating a client的错误：

这个错误提示你在初始化PayPal客户端时需要提供authorization参数。但在你的代码中，你似乎尝试使用了一个硬编码的授权值'123'，这可能是不正确的。对于PayPal的API，你需要使用一个有效的OAuth令牌（通常是一个从PayPal生成的访问令牌）。如果你正在使用沙盒环境进行测试，你需要从PayPal开发者账户获取一个沙盒模式的客户端ID和秘密，并使用这些凭据来生成一个正确的OAuth令牌。

对于你的问题“这种情况需要开PayPal Payments Pro吗？”：

不一定。你可以使用PayPal的“Checkout API”或“Payments API”来实现信用卡支付功能，而不需要开启PayPal Payments Pro。你的代码示例中使用的Hosted Fields就是属于Checkout API的一部分。

至于你遇到的错误“SDK Validation error: 'Disallowed query param: authorization'”，这可能是因为你在请求中使用了不正确的authorization参数值或格式。在使用PayPal API时，你应该遵循其官方文档中的指导来构造请求和传递参数。

为了解决这个问题，你应该按照以下步骤操作：

1. 从PayPal开发者账户获取正确的沙盒模式的客户端ID和秘密。
2. 使用这些凭据生成一个OAuth令牌。
3. 在初始化PayPal客户端时，使用正确的OAuth令牌作为authorization参数的值。

如果你遵循上述步骤仍然遇到问题，建议查阅PayPal的官方文档或联系其技术支持以获得更具体的帮助。