The Self-Serve Billing Portal allows your customers to manage their own billing information and plans directly from your application. The portal provides your customers with the ability to:
View and change their current plan
View their payment history and download receipts
Securely update their payment details
Manage their billing information
By integrating the billing portal into your application, you can provide a seamless experience for your customers and reduce the need for customer support. Additionally, by using the billing portal, you can save development time by not having to build and maintain your own billing portal.
2. Validate that the customer is logged in and create a redirect URL (Backend)
Before redirecting the user to the billing portal, you’ll need to validate that the user is logged in to your application. This can be done by checking for a valid session or checking against your user database. Once you’ve confirmed that the user is logged in, you’ll need to create a redirect URL for the user to access the billing portal using the Authenticate endpoint. This can be done by setting the Location header to the redirect URL and returning a 302 status code.
The redirect url has a short validity. Never link it directly and always generate it on-demand.
express-server.js
Copy
app.get('/billing', async (req, res) => { // TODO: Ensure the customer is logged in if (!req.session.userid) { return res.status(401).json({error: 'Unauthorized'}); } // TODO: fetch wingback customer id for user account from database // you could also use the email or customer reference to // identify the customer for which you want to generate the redirect URL const wingbackCustomerId = "Cust_98672780-0099-4ec3-b13e-0716d1d38d02"; // Create the redirect URL try { const response = await fetch('https://api.wingback.com/v1/c/customer/authenticate', { method: 'POST', headers: { 'Content-Type': 'application/json', 'wb-key': 'YOUR_SECRET_API_KEY' }, body: JSON.stringify({ 'id': wingbackCustomerId }) }); const { url } = await response.json(); // Check if the response status is 201 if (response.status === 201) { // Extract the JSON data from the response const url = await response.text(); // Redirect using a 302 status and the URL from the fetch response res.status(302).location(url).send(); } else { // Handle non-201 response status codes here } } catch (error) { res.status(500).json({error}); }});
That’s it! Your user will now have access to their billing portal.