Add a phone number to the check out form

Support
,
#1

I need to capture the phone number of a customer to connect with them if I have any issues.

Upon search I go to this link. Order custom fields – Snipcart Documentation

which has billing component <billing section="bottom"> which gives me an error. seems like it’s not present.

how can I import it in order to get it working.

#2

The following snippet will add a phone number field to the checkout

<div id="snipcart" data-api-key="<api_key>" hidden>
    <address-fields section="top">
        <div>
            <snipcart-label for="phone">
                Phone number
            </snipcart-label>
            <snipcart-input name="phone">
            </snipcart-input>
        </div>
    </address-fields>
</div>
#3

Thanks for your reply.
I still have two questions. I am using GATSBY (react) for my frontend. as soon as i put code in it does not recognize the snipcart tags

  1. Api Key → will be the secret right?
  2. where should I add this code. should I add it to where my “Add to Cart” button is or is there a specific location to it.

Thanks.