checkout and pricing #153
checkout and pricing #153
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/eggheadio/egghead-io-nextjs/n4styzys7 |
| const stripeCheckoutRedirect = async (priceId: string, email: string) => { | ||
| return await axios | ||
| .post( | ||
| `${process.env.NEXT_PUBLIC_AUTH_DOMAIN}/api/v1/stripe/subscription`, |
There was a problem hiding this comment.
loads a checkout session from backend with the configured price ID
| stripePromise.then((stripe: any) => { | ||
| if (!stripe) throw new Error('Stripe not loaded 😭') | ||
| stripe | ||
| .redirectToCheckout({ |
There was a problem hiding this comment.
send us to Stripe if all looks good!
|
|
||
| console.log(isPro) | ||
|
|
||
| if (isPro) { |
There was a problem hiding this comment.
this is a quick and dirty lookup to see if we already have a subscription on this particular email
not great UX
| ) | ||
| } else { | ||
| setIsError(false) | ||
| stripeCheckoutRedirect(priceId, email) |
There was a problem hiding this comment.
no sub? let's fix that quick.
| } | ||
|
|
||
| return ( | ||
| <div className="text-text w-full mx-auto flex flex-col justify-center sm:mt-24 mt-5"> |
There was a problem hiding this comment.
I just reused the login form here 😅
| export async function loadPrice(priceId: string) { | ||
| const price = await stripe.prices.retrieve(priceId) | ||
|
|
||
| return price |
There was a problem hiding this comment.
this is a Stripe Price object
| @@ -0,0 +1,15 @@ | |||
| import Stripe from 'stripe' | |||
|
|
|||
| if (!process.env.STRIPE_SECRET_KEY) { | |||
There was a problem hiding this comment.
this is a concern with this because technically it could be imported into a frontend file and exposed, where currently it's being used in a SSR method, and doesn't expose it.
Alternative would be to be more explicit and migrate to a /src/pages/api function where it might be more clear it's not meant to be used in the UI. 🤔
| } | ||
| } | ||
|
|
||
| const Pricing: FunctionComponent<PricingProps> = ({annualPrice}) => { |
There was a problem hiding this comment.
modestly sloppy UX that could probably use a little state machine...
| }) | ||
| .then(({data}) => data) | ||
|
|
||
| res.status(200).json(!isEmpty(eggheadUser.subscription)) |
There was a problem hiding this comment.
we are checking if the user has a subscription, which is probably not a sufficient check but will at least prevent a double subscription for now
Co-authored-by: Ian Jones <jones58ian@gmail.com>
Co-authored-by: Ian Jones <jones58ian@gmail.com>
This adds checkout flow.
Requires this to be merged on the backend: https://github.com/eggheadio/egghead-rails/pull/4155