当前位置：首页 > news >正文

stripe/paypal

news 2025/10/21 9:17:44

stripe

前端（不用写代码，拿url地址即可）—获取对应的plan_id，传给后端，后端返回url地址，跳出去进行支付，后端返回回调定位回前端地址，根据返回参数判断是否支付成功即可

沙盒–支付卡号

paypal

react-paypal-js

相关文档
PayPal

需要切换PayPalScriptProvider -option配置
需要再PayPalButtons 在延迟展示（等PayPalScriptProvider 更新完成）
否则会导致按钮无法展示
在这里插入图片描述
查看更新验证

// 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, // falseintent: "subscription", // capture - subscription})return (
<PayPalScriptProviderkey={`paypal-provider-${paypalInfo.plan_type}`}options={initOptions}>{showpaypalbutton && mode === "subscription" && (<div><PayPalButtonsstyle={{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: stringapprove_url: string}console.log("create_order_createSubscription", _res.subscription_id);subscriptionId.current = _res.subscription_idreturn _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><PayPalButtonsstyle={{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: stringapprove_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;