stripe
前端（不用写代码，拿url地址即可）---获取对应的plan_id，传给后端，后端返回url地址，跳出去进行支付，后端返回回调定位回前端地址，根据返回参数判断是否支付成功即可
paypal
相关文档
PayPal
需要切换PayPalScriptProvider -option配置
需要再PayPalButtons 在延迟展示（等PayPalScriptProvider 更新完成）
否则会导致按钮无法展示
查看更新验证
ts
// nextjs 简单示例
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
const Plans: React.FC = () => {
// 控制支付按钮刷新--显示
const [showpaypalbutton, setShowpaypalbutton] = useState(true);
const [initOptions, setInitOptions] = useState({
clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID as string,
vault: true, // false
intent: "subscription", // capture - subscription
})
return (
<PayPalScriptProvider
key={`paypal-provider-${paypalInfo.plan_type}`}
options={initOptions}
>
{showpaypalbutton && mode === "subscription" && (<div>
<PayPalButtons
style={{
layout: "vertical",
}}
onCancel={async (data) => {
const result = await client_request("/subscription_cancel", "POST", {
...data,
})
messageApi.warning("Payment Cancelled. Thank you for trying!");
console.log("onCancel", result);
}}
createSubscription={async () => {
const result = await client_request("/create_subscribe", "POST", { plan: 1 })
const _res = result.data as {
subscription_id: string
approve_url: string
}
console.log("create_order_createSubscription", _res.subscription_id);
subscriptionId.current = _res.subscription_id
return _res.subscription_id
}}
onApprove={async (data, actions) => {
console.log("onApprove", data);
const result = await client_request("/subscription_confirm", "POST", {
...data,
status: "success"
})
if (result.code === 0) {
getPlans()
}
messageApi.success(
"Payment Successful! All videos are now unlocked. Enjoy!"
);
return Promise.resolve();
}}
onError={async (err) => {
console.log("onError", err);
messageApi.error(
"Payment Failed. Something went wrong. Please try again."
);
}}
/>
</div>)}
{showpaypalbutton && mode === "one-time" && (<div>
<PayPalButtons
style={{
layout: "vertical",
}}
onCancel={async (data) => {
console.log("onCancel", data);
const result = await client_request("/subscription_cancel", "POST", {
...data,
status: "cancel"
})
messageApi.warning("Payment Cancelled. Thank you for trying!");
console.log("onCancel", result);
}}
createOrder={async (data, actions) => {
const result = await client_request("/create_order", "POST", { ...data })
const _res = result.data as {
order_id: string
approve_url: string
}
subscriptionId.current = _res.order_id
// if (_res.approve_url) {
// window.open(_res.approve_url, '_blank');
// }
return _res.order_id
}}
onApprove={async (data, actions) => {
console.log("create_order_onApprove=====", data);
const result = await client_request("/order_return", "POST", {
...data,
status: "success"
})
if (result.code === 0) {
getPlans()
}
console.log("create_order", result);
messageApi.success(
"Payment Successful! All videos are now unlocked. Enjoy!"
);
return Promise.resolve();
}}
onError={async (err) => {
console.log("onError", err);
messageApi.error(
"Payment Failed. Something went wrong. Please try again."
);
}}
/>
</div>)}
</PayPalScriptProvider>
)
};
export default Plans;