import React from 'react' import { Elements, StripeProvider, CardElement, injectStripe } from 'react-stripe-elements' import { useAsyncCallback } from 'actionsack' import Button from './Button' import Input from './Input' import { useAuth } from './AuthContext' import LoginButton from './LoginButton' import { COLORS } from '../lib/constants' const X = ( ) function Billing(props) { const user = useAuth() const [submit, { error, loading, data: success }] = useAsyncCallback(async e => { e.preventDefault() const name = e.target.name.value.trim() const res = await props.stripe.createToken({ name }) if (res.error) { throw res.error.message } return {} }) if (!user) { return (
) } return (
{success ? (

Thank you for supporting Carbon!

However, Carbon Diamond is not quite ready yet.
Your card has not been charged or saved today.
We greatly appreciate your support, and will contact you when these premium features launch!

— the Carbon Team{' '} 💛🖤

) : (

Upgrade to Diamond
($5.00 / month)

Please enter a credit or debit card:


(By clicking subscribe, you are accepting the{' '} terms and conditions)
{X} {error}
)}
) } const BillingWithStripe = injectStripe(Billing) export default function BillingPage() { const [stripe, setStripe] = React.useState(null) React.useEffect(() => { setStripe(window.Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY)) }, []) return ( ) }