stripe-react-serverless-42.tsx

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY || '');

const Plan = () => {
  const [cardInformation, setCardInformation] = useState<{
    type: string;
    digits: string;
  }>();
  const [subscription, setSubscription] = useState<IStripeSubscription>();
    
  const fetchCardInformation = async () => {
    try {
      const info = await StripeManager.retreivePaymentInfo(user.paymentMethodID);
      if (info) {
        setCardInformation(info);
      }
    } catch (error) {
      // Let the user know that something went wrong here...
    }
  };
    
  const fetchSubscription = async () => {
    try {
      const sub = await StripeManager.retrieveSubscription(user.subscriptionID);
      if (sub) {
        setSubscription(sub);
      }
    
    } catch (error) {
      // Let the user know that something went wrong here...
    }
  };
    
  useEffect(() => {
    fetchSubscription();
    fetchCardInformation();
  }, []);
    
  const handleCancelSubscription = (end: boolean) => async () => {
    // Not implemented yet
  };
    
  const expirationDate = new Date(subscription.current_period_end * 1000).toDateString();
  const subscriptionWillEnd = subscription.cancel_at_period_end;
    
  return (
    <div>
      <div>The plan will expire on: {expirationDate}</div>
      <div>Card: {cardInformation.type}</div>
      <div>**** **** **** {cardInformation.digits}</div>
      <Elements stripe={stripePromise}>
        <UpdateForm />
      </Elements>
      <button onClick={handleCancelSubscription(!subscriptionWillEnd)}>
        {subscriptionWillEnd ? 'Continue' : 'Cancel'}
      </button>
    </div>
  );
};
    
const UpdateForm = () => {
  // Not implemented yet
};
    
export default Plan;