React.js集成PayPal按钮无法识别描述、币种参数问题求助

商品描述不生效问题 #

你代码中purchase_units下的描述字段拼写错误，你写的desciption缺少字母r，正确字段名为description。PayPal接口会自动忽略不符合规范的字段，因此你设置的描述信息不会被系统记录。

币种设置后按钮失效问题 #

有两个常见触发原因：

• 字段放置位置错误：currency_code必须放在amount对象内部，直接放在purchase_units层级下会触发参数校验失败，导致按钮无法正常渲染。
• SDK配置币种与订单币种不匹配：你引入PayPal JS SDK时如果默认使用USD币种，创建订单时指定AUD会出现币种冲突报错，导致按钮失效。需要将SDK加载配置中的currency参数同步改为AUD。

import React from "react";
import ReactDOM from "react-dom"

const PayPalButton = window.paypal.Buttons.driver("react", { React, ReactDOM });

class YourComponent extends React.Component {
  createOrder(data, actions) {
    return actions.order.create({
      purchase_units: [
        {
          // 修正字段拼写错误
          description: "Two books",
          amount: {
            // 币种配置放在amount对象内部
            currency_code: "AUD",
            value: "999",
          },
          payee: {
            email_address: 'sb-xupnm6876262@business.example.com'
          }
        },
      ],
    });
  }

  onApprove(data, actions) {
    return actions.order.capture();
  }

  render() {
    return (
      <PayPalButton
        createOrder={(data, actions) => this.createOrder(data, actions)}
        onApprove={(data, actions) => this.onApprove(data, actions)}
      />
    );
  }
}

export default YourComponent;

SDK加载配置需要同步修改currency参数为AUD，示例如下：

<script src="https://www.paypal.com/sdk/js?client-id=你的客户端ID&currency=AUD"></script>

内容的提问来源于stack exchange，提问作者Kowsar Rahman