useSquareCheckout

this page's documentation only applies to chord's next js starter prior to the release of the react docid\ ewxkrz0jhh0zpphikkcri the next js starter now uses the react sdk and does not use the methods documented on this page check out the react sdk reference for complete documentation, and the react sdk migration guide docid\ qmilhjfpz9wbjyzbe50ku for details on how to upgrade the usesquarecheckout hook allows to checkout using square example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { getuserwallet } = usesquarecheckout() } returns the usesquarecheckout hook returns an object with these properties property description getstates a function to retrieve information about countries and states available in the system getuserwallet a function that loads information about the current user wallet updateorderaddresses a function used to update the order's ship address updateorderdelivery a function that allows choosing the shipping option for the current order updateorderpayment a function that allows completing the payment step of the checkout finalizecheckout a function that complete the order with square typical flow the typical flow is create a cart and add items into it with the usecart module attach an email address to the order using modifycart({ email "your\@email com" }) this is only needed for guest checkouts, if the user is logged in, this is not needed and the user's email will be used add a shipping address to the order using the updateorderaddresses() function pick a delivery method using the updateorderdelivery() function attempt a payment via square using the updateorderpayment() function after retrieving the square token client side, using the square web payment sdk finalize the order with finalizecheckout() functions getstates the getstates function is used to retrieve information about countries and states available in the system to be used when we need to update the order's address it takes the iso code https //en wikipedia org/wiki/iso 3166 1 alpha 2 of the country and returns the list of states along with other information related to the country itself arguments getstates(iso) argument type description iso string iso code of the country returns promise<{ states string | state\[]; state required boolean }> state argument type description abbr string country abbreviation name string country name id number record id country id number country id example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { getstates } = usesquarecheckout() } getuserwallet the getuserwallet function is used to retrieve information about the user's wallet arguments none returns todo example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { getuserwallet } = usesquarecheckout() } updateorderaddresses the updateorderaddresses function is used to update the order's ship address a valid ship address has the following format arguments updateorderaddresses(options) argument type description options name string the user's name and surname options address1 string the user's address options address2? string (optional) the user's secondary address options city string city name options country id number country id options state id number state id options zipcode string zipcode options phone string the user's mobile phone options company string the name of the company returns promise\<void> a promise that resolves when the order object has been updated in redux example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { updateorderaddresses } = usesquarecheckout() const shipaddressattributes = { name 'jane doe', address1 '2191 calico drive', city 'phoenix', country id 233, state id 3438, zipcode '85022', phone '509 644 9988', company 'acme inc ' } useeffect(() => { updateorderaddresses(shipaddressattributes) }, \[]) } updateorderdelivery the updateorderdelivery() function allows choosing the shipping option for the current order at the moment we do not support multiple delivery options, so this function is only needed to move the checkout from the delivery step to the payment step during this process, shipping costs and taxes will be added to the order this function should be called only when the order is in the delivery state, meaning that a valid address has been added to the order previously this way it will be able to correctly pick the right delivery option based on the shipping address and correctly compute taxes based on the shipment route arguments updateorderdelivery(options) argument type description options payment method type string the payment method type in this case it will be 'square' options source attributes nonce string your token returns promise\<void> a promise that resolves when the order object has been updated in redux example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { updateorderpayment } = usesquarecheckout() const paymentattributes = { payment method type 'square', source attributes { nonce 'your token' } } useeffect(() => { updateorderaddresses(paymentattributes) }, \[]) } updateorderpayment the updateorderpayment() function allows completing the payment step of the checkout before using this function, the client should retrieve a token using the web payments sdk https //developer squareup com/docs/web payments/overview provided by square when the order is successfully completed, the payment source will be added to the user's wallet (for authenticated users only), allowing to re use the payment token later, without having to input the credit card information again this function should be called only when the order is in the payment state, meaning that a valid delivery option has been added to the order previously at this stage the order is updated with shipping costs and taxes, allowing to complete the payment with the right amount for now, this endpoint doesn't support the ability to pay with an existing token in the future we will provide this support, allowing to re use a previously saved credit card from the user wallets arguments updateorderdelivery(options) argument type description options payment method type string the payment method type in this case it will be 'square' options source attributes nonce string your token returns promise\<void> a promise that resolves when the order object has been updated in redux example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { updateorderpayment } = usesquarecheckout() const paymentattributes = { payment method type 'square', source attributes { nonce 'your token' } } useeffect(() => { updateorderpayment(paymentattributes) }, \[]) } finalizecheckout finalizecheckout() is the last method that needs to be called to complete the order with square call this method when you want to move the user to the thank you page and let them start a new order arguments none returns promise\<void> example import { usesquarecheckout } from ' /hooks/actions' export default () => { const { finalizecheckout } = usesquarecheckout() useeffect(() => { finalizecheckout() }, \[]) } this function should be called only when the order is in the "confirm" state, meaning that a valid payment has been added to the order already