# Create a Billing Form

**URL:** <https://discourse.sst.dev/t/create-a-billing-form/186>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 11:22pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186 "2018-05-09T23:22:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [May 9, 2018, 11:22pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/1 "2018-05-09T23:22:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ryanauj](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/ryanauj/32/838_2.png) [@ryanauj](https://discourse.sst.dev/u/ryanauj)\
**Post date:** [April 24, 2020, 7:51am UTC](https://discourse.sst.dev/t/create-a-billing-form/186/2 "2020-04-24T07:51:42Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 25, 2020, 5:19pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/3 "2020-04-25T17:19:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![huntzinger92](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/huntzinger92/32/1039_2.png) [@huntzinger92](https://discourse.sst.dev/u/huntzinger92)\
**Post date:** [December 14, 2020, 3:13pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/4 "2020-12-14T15:13:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [January 3, 2021, 12:46am UTC](https://discourse.sst.dev/t/create-a-billing-form/186/5 "2021-01-03T00:46:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smoq](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/smoq/32/1163_2.png) [@smoq](https://discourse.sst.dev/u/smoq)\
**Post date:** [April 21, 2021, 12:27pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/6 "2021-04-21T12:27:35Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![smoq](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/smoq/32/1163_2.png) [@smoq](https://discourse.sst.dev/u/smoq)\
**Post date:** [April 21, 2021, 1:26pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/7 "2021-04-21T13:26:35Z")

</div>

@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 🙂 )

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 🙂

Cheers

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 21, 2021, 5:53pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/8 "2021-04-21T17:53:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![smoq](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/smoq/32/1163_2.png) [@smoq](https://discourse.sst.dev/u/smoq)\
**Post date:** [April 21, 2021, 6:22pm UTC](https://discourse.sst.dev/t/create-a-billing-form/186/9 "2021-04-21T18:22:58Z")

</div>

sure thing sorry I forgot to paste it 🙂

> <https://github.com/stripe/react-stripe-js/blob/master/docs/migrating.md>