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.

​
Integrating the Wingback Self-Serve Billing Portal

​
1. Create a Billing Portal Endpoint in your application

Add an endpoint to your application through which your customer will access their billing portal. Link to it to your settings page.

settings.html
<ul>
    <!-- this could be your side bar -->
    <li>
        <a href="/billing" target="_blank">Billing & Payment</a>
    </li>
</ul>

​
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
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.

Integrating Wingback into your Signup FlowAdding a Dynamic Pricing Page to Your Website