how to add or change TextInput in checkout section

[beratucgul]

Hey. How can I add an additional input in shipping, billing, etc. in the checkout section?

For example: I want to change Company input in Billing Address with different label or different TextInput

[witoszekdev]

Hi @beratucgul, in general our storefront is a starter-kit and making substantial changes will require forking it and adjusting the project to your needs.

How can I add an additional input in shipping, billing, etc. in the checkout section?

Except the fields that are available on AddressInput in checkoutCreate and checkoutShippingAddressUpdate mutations you could add additional data from your customers in the checkout metadata, it will be then moved to order’s metadata once the orderCreateFromCheckout mutation is run by saleor-app-checkout on checkout completion.

I want to change Company input in Billing Address with different label or different TextInput

To change labels, you’d need to fork this project and change messages for address fields in: packages/checkout-storefront/src/components/AddressForm/messages.ts. Same with changing TextInput to a different component, you’d need to edit the code in that folder (packages/checkout-storefront/src/components/AddressForm)

[beratucgul]

Thank you for your answer and time. I will try to do that

[beratucgul]

@witoszekdev hello again. Sorry for disturbing. I cant change the input fields label in packages/checkout-storefront/src/components/AddressForm/messages.ts.
The fields are below.

And i think you mentioned here. But i cant find the firstName, lastName, company etc. input

Again thank you for your answer and time and sorry for disturbing

[typeofweb]

https://github.com/saleor/react-storefront/blob/b0401fcfce364c4438cb5ee59f125209e7e53bed/packages/checkout-storefront/content/locales/en-US.json#L18-L21

You need to edit this file or create a new one if you're translating to another language.

[beratucgul]

Thank you for your answer @mmiszy Sorry for disturbing