Integration with Stripe Customer Portal

API & Customization Ask Developers
1

Anybody is using or want to use the Stripe Customer Portal with Knack, and save a lot of time in billing management?

Integrating the customer portal

Protect Stripe Customer Portal API

2

Hi Michael,

Yes I’ve integrated it. Do you have any questions or need help integrating it in your app? Happy to help.

Ian
www.knackpros.com

1 Like
3

Fantastic!! Yes please.

my actual situation:
Plans with button to Stripe payment. Works nicely.

4

Great!

To integrate the Stripe Customer Portal, it requires custom JS on the frontend and backend.

The steps are:

  1. Create a Stripe Customer for each Knack account. To do this, trigger an Integromat scenario when the Knack acccount is created, and make an HTTP request to the Create Stripe Customer endpoint. Then save the Stripe Customer ID as a field in the Knack account. You can skip Step 1 if you already create Stripe Customer IDs for your Knack accounts.

  2. Create an endpoint on your backend (see code here). Let’s name this endpoint Create Portal Session. This endpoint receives a Stripe Customer ID and a return URL, then creates a Portal Session, then returns that Portal Session URL to the frontend.

  3. Create a button to Manage Subscription. For example, add this to your frontend html:
    <button id="manage-subscription" class="kn-button">Manage Subscription</button>

  4. In your frontend JS, call your endpoint when the user clicks the Manage Subscription button.

$('button#manage-subscription').on('click', async () => {
  $('button#manage-subscription').addClass('is-loading')
  const returnUrl = encodeURIComponent(location.href)
  const stripeCustomerId = Knack.getUserAttributes().values.field_123;
  const url = `https://example.com/.netlify/functions/create-portal-session?return_url=${returnUrl}&stripe_customer_id=${stripeCustomerId}`;
  const data = await callEndpoint(url);
  window.location.href = data.portalSession.url;
})

This should get you started. In a production app, you’d want to add error handling and authorization logic.

Hope this helps!

Ian
Knack Pros

2 Likes
5

Hi Ian, great! I’ll try that as soon as I can.

Step1: Indeed I can skip it.

Step2: Should I copy this code for example in a new page of my website?

6

Step2: Should I copy this code for example in a new page of my website?

Nope, this code cannot run on a page on your website. This code must run inside a Server-Side environment, for example Node JS.

To give you some background—JavaScript can run in the browser (client-side) or on a server (server-side). Knack allows us to add client side Javascript, but not server side Javascript.

If you’re interested in running server-side Javascript, I recommend learning about Lambda Functions offered by Netlify Functions and AWS, for example. Lambda Functions allow you to run code on a server, without managing the server yourself.

Cheers,

Ian
Knack Pros

1 Like
7

Interesting. Very well explained Ian.
I had no idea about that. Probably why I couldn’t manage to make it work.

Ok, I will learn on Lambda Functions and keep you posted.

8

Hi guys,

After a long and tedious search for different method to implement this very useful functionality, I am very happy to give back to the whole Knack community.

This is a simple plugin for WordPress that allows an existing customer to connect to the Stripe Customer Portal to do by himself:

  • change suscription
  • cancel
  • change paiement method and address
  • see billing history.

I use Stripe checkout from my web site (WordPress) for suscription ecommerce, and only link clients in my Knack App with their Stripe Customer ID.

This plugin is free and ultra easy to install.
I put a link in my Knack App to my web page “Plans” to buy a Plan or manage it through the Customer Portal. The client receive an email with a link to open directly a Customer Portal session. Easier you die.

So this solution might no be called “an integration” with Knack, but sure is ultra efficient and does the job.

9

For those looking for real integration anywhere (?) and know how to code, on top of the code Ian shared above specificaly for Knack, I found this material very clear and detailed:

10

I have been working with byteline.io to get both Stripe Customer Portal integration as well as subscriptions all from inside Knack. Portal is working, finishing up Membership/Subscription integration as we speak. Will post more videos soon. Loom | Free Screen & Video Recording Software

1 Like
11

Very nice Dean! Obviously better UX this way.