带订阅功能的 Paypal 定制信用卡表格 - NEXTJS

Question

我已经使用以下代码成功使用nodeJS创建了订阅：

const createSubscription = async () => {
  const accessToken = await getAccessToken();

  const response = await axios.post(
    `${PAYPAL_API}/v1/billing/subscriptions`,
    {
      plan_id: subscriptionPlanId,
      application_context: {
        brand_name: "test",
        locale: "en-US",
        user_action: "SUBSCRIBE_NOW",
        return_url: "https://test.test/",
        cancel_url: "https://test.test/",
        shipping_preference: "NO_SHIPPING",
      },
    },
    {
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
    }
  );

  return response.data;
};

这是我得到的回应：

{
  status: 'APPROVAL_PENDING',
  id: 'I-YUSWK0P891TV',
  create_time: '2024-02-03T15:03:29Z',
  links: [
    {
      href: 'https://www.sandbox.paypal.com/webapps/billing/subscriptions?ba_token=BA-97806019K4147340Y',
      rel: 'approve',
      method: 'GET'
    },
    {
      href: 'https://api.sandbox.paypal.com/v1/billing/subscriptions/I-YUSWK0P891TV',
      rel: 'edit',
      method: 'PATCH'
    },
    {
      href: 'https://api.sandbox.paypal.com/v1/billing/subscriptions/I-YUSWK0P891TV',
      rel: 'self',
      method: 'GET'
    }
  ]
}

我想要做的是能够自定义整个批准过程，而不使用生成的批准链接，paypal 允许我这样做吗？如果是的话任何方向都可以帮助我。 谢谢！

我尝试过使用paypalSDK：

import {
  PayPalScriptProvider,
  PayPalHostedFieldsProvider,
  PayPalHostedField,
  usePayPalHostedFields,
} from "@paypal/react-paypal-js";

但主要用于1次付款。

Answer 1

要批准订阅，您需要将付款人重定向到提供的“批准”URL，或使用 PayPal JS SDK（在您的情况下通过react-paypal-js）呈现订阅按钮，并带有

createSubscription 

返回创建的订阅 ID 以供批准的回调。

react-paypal-js 故事书有一个例子：

import { useEffect } from "react";
import {
    PayPalScriptProvider,
    PayPalButtons,
    usePayPalScriptReducer
} from "@paypal/react-paypal-js";

const ButtonWrapper = ({ type }) => {
    const [{ options }, dispatch] = usePayPalScriptReducer();

    useEffect(() => {
        dispatch({
            type: "resetOptions",
            value: {
                ...options,
                intent: "subscription",
            },
        });
    }, [type]);

    return (<PayPalButtons
        createSubscription={(data, actions) => {
            return actions.subscription
                .create({
                    plan_id: "P-3RX065706M3469222L5IFM4I",
                })
                .then((orderId) => {
                    // Your code here after create the order
                    return orderId;
                });
        }}
        style={{
            label: "subscribe",
        }}
    />);
}

export default function App() {
    return (
        <PayPalScriptProvider
            options={{
                clientId: "test",
                components: "buttons",
                intent: "subscription",
                vault: true,
            }}
        >
            <ButtonWrapper type="subscription" />
        </PayPalScriptProvider>
    );
}