Create a Billing Form

Chapter Comments
1

Link to chapter - https://serverless-stack.com/chapters/create-a-billing-form.html

2

What is the purpose of the statement
isLoading = isProcessing || isLoading;
in the BillingForm function body

function BillingForm({ isLoading, onSubmit, ...props }) {
  const [fields, handleFieldChange] = useFormFields({
    name: "",
    storage: ""
  });
  const [isProcessing, setIsProcessing] = useState(false);
  const [isCardComplete, setIsCardComplete] = useState(false);

  isLoading = isProcessing || isLoading;

Won’t this always just result in isLoading = isLoading?
Or do react state hook initializations get skipped when functional components re-render?

3

Well we call setIsProcessing later on in the guide. That’ll cause the isProcessing flag to change.

1 Like
4

Don’t know if anyone else has experienced this issue, but the react-stripe-elements package would not install for me as of 12/14/2020.

After running npm install --save react-stripe-elements, I get an error that says “npm integrity validation failed”, and the library will not install. I tried this on multiple days, so it doesn’t seem to be a temporary problem with the npm package, and I don’t think it’s npm’s servers or something on my end because I can install other npm packages just fine.

I also checked the npm page for react-stripe-elements, and it seems to be deprecated (although it is still downloaded frequently).

For now, I’m going to try and complete the tutorial without the Stripe stuff, but not sure how possible that’s going to be. Thank you for a well-written and clear tutorial otherwise, though!

1 Like
5

Yup we’ll be upgrading this soon. It’s a bit surprising that they deprecated it so soon.

6

@jayair any updates on this one?
I can see that I could try force installation of stripe elements but am not sure if I should go with this one.

7

@jayair @huntzinger92 so I found this repo with instruction how to switch from react-stripe-elements to react-stripe-js. I think it would be good to mention it in the guide (or even update the guide with the new library :slight_smile: )

On the other hand I did install react-stripe-elements with --force switch
npm install --save react-stripe-elements --force
now I get this ugly warn in browsers console
Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.
Please update the following components: CardElement, Elements, InjectStripe(BillingForm), Provider
Learn more about this warning here: https://reactjs.org/link/legacy-context

Seems its working fine :slightly_smiling_face:

Cheers

8

Can you share that repo with instructions on how to switch? I’ll update the guide with it.

9

sure thing sorry I forgot to paste it :slight_smile:

1 Like