raae/pow-app

Stripe + Userbase = New Payment Flow

Closed this issue ยท 11 comments

raae commented

Not a priority yet.

I think Userbase is working on something that will do a lot of this for us, so let's wait and see.

I asked @userbaseHQ on twitter:

Looking forward to maybe testing out som beta payments integration stuff if you guys feel like it. ๐Ÿ˜ธ ๐Ÿ‘

I am a junior webdev working with
@raae
on the #usepowapp

Enjoy your weekend Smiling face with ๐Ÿ˜Ž

https://twitter.com/UserbaseHQ/status/1233809436461981696

stripe-userbase-new-payment-flow-#117

Ref: Docs : SDK : purchaseSubscription
purchaseSubscription redirects your users to a Stripe Checkout form. To call the purchaseSubscription function, you must first do the following:

  • Include the Stripe.js client in your web app. Does this mean stripe init und zu weiter?
  • How do I see the current paymentForm in localhost?
  • Should I just put the ... .purchaseSubscription({...right into PaymentForm.js?
  • Where do I put const { subscribe } = useAuthActions()
  • Connect a Stripe account to your Userbase admin account in the Account section in your Admin panel.
  • Create a new test subscription plan in your Stripe dashboard.
  • Set the test subscription plan ID on your app in your Admin panel and enable payments.
  • error handling

.default.purchaseSubscription
is not a function #117
c99b50a

POW-BRANCH_stripe _#117_is_not_a_function_8-230

RequestFailed: OpenDatabase
POW-BRANCH_stripe #117 RequestFailed_OpenDatabase_13-235

raae commented

You probably need to update the userbase package @olavea as this is new functionality for the first one. Do yarn upgrade userbase.

If the user has not paid through userbase then the user is not allowed to open its database so openDatabase should fail.

Hm...

raae commented

We need to wait until support for multible subscription, until then use my "good enough" approach. Since we are waiting for this we will not better out own payment solution. As of now cancelled subscriptions will still have access...

raae commented

We will have to change our onboarding some, we could maybe start on that work. We are now adding data to the settings database before collecting payments.

That would not work when moving to Userbase's payment solution. We could save it in local storage until the user is back from the payment redirect.

Or we could just collect payment first and then do the settings part.

A part of this work could also to have look at the onboarding with fresh eyes and do some user testing etc.

Do you want to start this work @olavea.

Stripe + Userbase = New Payment Flow

โ€“ This is what I did @raae

Ref: Docs : SDK : purchaseSubscription
purchaseSubscription redirects your users to a Stripe Checkout form. To call the purchaseSubscription function, you must first do the following:

  • Include the Stripe.js client in our POW! app.

  • Connect a Stripe account to your Userbase admin account in the Account section in your Admin panel.

  • Create a new test product in your Stripe dashboard.

  • Take note of the price ID in the Stripe dashboard (it starts with 'price_').

  • 1. I just put the userbase.purchaseSubscription({... right into PaymentForm.js

  • 2. Where in the Form do I put purchaseSubscription?
    -> Nowhere.

Questions:
A. Where is priceId coming from?
B. Should priceId "be" something? Like for example:
โ€“ priceId: "bleh bleh-blehBleh ",
Answer: no
C. use context for what? I will check the video at
โ€“ https://youtu.be/lc10pjc4Yoo?t=2705
Answer: We do not need context because we use redux toolkit.
D. should we keep all this error pending stuff?
E. Or is userbase + stripe fixing that for us?

It works locally and in netlify preview @raae

Here is the pull request:
#232

Screenshots:

Payment with stripe POW!-stripe-324

stripe checkout POW!-stripe-325