如何在React应用中实现PayPal订阅暂停功能？

你可以用React中常用的原生fetch API或者axios库来实现PayPal订阅暂停的功能，以下是对应转换后的代码：

方式一：使用原生fetch #

const pausePayPalSubscription = async (subscriptionId, accessToken) => {
  try {
    const response = await fetch(`https://api-m.sandbox.paypal.com/v1/billing/subscriptions/${subscriptionId}/suspend`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${accessToken}`
      },
      body: JSON.stringify({
        reason: "Customer-requested pause"
      })
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`暂停失败：${errorData.message || '未知错误'}`);
    }

    const result = await response.json();
    console.log('订阅暂停成功', result);
    // 这里可以添加成功后的逻辑，比如更新UI、提示用户等
    return result;
  } catch (error) {
    console.error('订阅暂停出错', error);
    // 这里可以添加错误处理逻辑，比如提示用户
    throw error;
  }
};

// 调用示例（替换成实际的订阅ID和Access Token）
// pausePayPalSubscription("你的订阅ID", "你的Access Token");

方式二：使用axios #

如果你的项目已经安装了axios，可以用以下代码：

import axios from 'axios';

const pausePayPalSubscription = async (subscriptionId, accessToken) => {
  try {
    const response = await axios.post(
      `https://api-m.sandbox.paypal.com/v1/billing/subscriptions/${subscriptionId}/suspend`,
      { reason: "Customer-requested pause" },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${accessToken}`
        }
      }
    );

    console.log('订阅暂停成功', response.data);
    // 成功后的逻辑
    return response.data;
  } catch (error) {
    console.error('订阅暂停出错', error.response?.data || error.message);
    // 错误处理逻辑
    throw error;
  }
};

// 调用示例
// pausePayPalSubscription("你的订阅ID", "你的Access Token");

重要注意事项 #

• 安全警告：绝对不要在前端代码中直接硬编码Access Token，这会导致敏感信息泄露。正确的做法是通过你的后端服务来代理这个请求，前端调用自己的后端接口，由后端添加Access Token后再请求PayPal API。
• 环境切换：上线时需要把API域名从sandbox.paypal.com改成paypal.com（生产环境地址）。
• 订阅ID：subscriptionId需要从用户的订阅数据中获取，比如你之前集成订阅功能时保存的用户订阅ID。

内容的提问来源于stack exchange，提问作者Peter Bonnebaigt