如何为Stripe NextJS与Firebase扩展生成计费门户链接?

Question

我正在使用Firebase中的Stripe扩展来在NextJS web应用程序中创建订阅。

我的目标是为返回用户创建一个链接来编辑他们在Stripe中的支付，而无需再次进行身份验证(他们已经在我的web应用程序和Firebase识别了身份验证)。

我使用的是Stripe的测试模式，我有一个测试客户和测试产品。

我试过

• Firebase Stripe扩展库没有任何可以返回计费门户链接的功能:https://github.com/stripe/stripe-firebase-extensions/blob/next/firestore-stripe-web-sdk/markdown/firestore-stripe-payments.md

• 使用NextJS在这个Vercel博客中推荐的Stripe导入

  首先我设置了Stripe-JS的导入:https://github.com/vercel/next.js/blob/758990dc06da4c2913f42fdfdacfe53e29e56593/examples/with-stripe-typescript/utils/get-stripejs.ts

  export default function Settings() {
  import stripe from "../../stripe_utils/get_stripejs"
  async function editDashboard() {
  const dashboardLink = await stripe.billingPortal.sessions.create({
  customer: "cus_XXX",
  })
  }
  console.log(dashboardLink.url)  
  return (
  <Button
  onClick={() => editDashboard()}>
  DEBUG: See payments
  </Button>
  )
  }
  

  这将导致错误:

  TypeError: Cannot read properties of undefined (reading 'sessions')
  

• 使用stripe库。这似乎是最有前途的解决方案，但据我所知，这是一个后端库，虽然我试图在前端使用。这种方法没有错误，但我认为它挂在await

  上

  import Stripe from "stripe"
  const stripe = new Stripe(process.env.STRIPE_SECRET)
  ... 
  const session = await stripe.billingPortal.sessions.create({
  customer: 'cus_XXX',
  return_url: 'https://example.com/account',
  })
  console.log(session.url)  // Does not reach here 
  

• 使用预先制作的Stripe链接来重定向，但用户必须使用他们的电子邮件对Stripe进行身份验证(这是有效的，但我宁愿从Stripe获得一个短暂的链接)

  <Button component={Link} to={"https://billing.stripe.com/p/login/XXX"}>
  Edit payment info on Stripe
  </Button>
  

• 使用POST HTTPS API调用https://stripe.com/docs/api/authentication。与前面的选项不同，这个可选项将注册一个Stripe Dashboard Log事件。

  const response = await fetch("https://api.stripe.com/v1/billing_portal/sessions", {
  method: 'POST', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, *cors, same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  headers: {
  'Content-Type': 'application/json',
  'Authorization': 'bearer sk_test_XXX',
  'Content-Type': 'application/x-www-form-urlencoded',
  },
  redirect: 'follow', // manual, *follow, error
  referrerPolicy: 'no-referrer', // no-referrer, *client
  body: JSON.stringify(data), // body data type must match "Content-Type" header
  })
  

  错误是我缺少一些参数parameter_missing -customer。所以我更接近一个解决方案，但我觉得我应该仍然能够使上述解决方案工作。

Answer 1

您应该使用Stripe库来创建计费门户会话(您的第二种方法)，并且您可能希望检查您的Dashboard日志并将端点设置为/v1/billing_portal/sessions，以便您可以查看在门户会话创建期间是否有任何错误。

Answer 2

考虑到我的情况，我选择调用API本身，而不是调用提供的库:

export default async function Stripe(payload, stripeEndpoint) {
const _ENDPOINTS = [
"/v1/billing_portal/sessions",
"/v1/customers",
]
let contentTypeHeader = "application/json"
let body = JSON.stringify(payload)
if _ENDPOINTS.includes(stripeEndpoint)) {
contentTypeHeader = "application/x-www-form-urlencoded"
body = Object.keys(payload).map(
entry => entry + "=" + payload[entry]).join("&")
}
try {
// Default options are marked with *
const stripeResponse = await fetch("https://api.stripe.com" + stripeEndpoint, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
headers: {
"Authorization": "bearer " + STRIPE_PRIVATE_KEY,
"Content-Type": contentTypeHeader,
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *client
body: body, // body data type must match "Content-Type" header
})
return await stripeResponse.json()
} catch (err) {
console.error(err)
}
}