useSquareCheckout
The useSquareCheckout hook allows to checkout using Square.

Example

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { getUserWallet } = useSquareCheckout()
5
}
Copied!

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:

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

Returns:

Example:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { getStates } = useSquareCheckout()
5
}
Copied!

getUserWallet

The getUserWallet function is used to retrieve information about the user's wallet.

Arguments:

None

Returns:

TODO

Example:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { getUserWallet } = useSquareCheckout()
5
}
Copied!

updateOrderAddresses

The updateOrderAddresses function is used to update the order's ship address. A valid ship address has the following format:

Arguments:

updateOrderAdresses(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:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { updateOrderAddresses } = useSquareCheckout()
5
6
const shipAddressAttributes = {
7
name: 'Jane Doe',
8
address1: '2191 Calico Drive',
9
city: 'Phoenix',
10
country_id: 233,
11
state_id: 3438,
12
zipcode: '85022',
13
phone: '509-644-9988',
14
company: 'Acme Inc.'
15
}
16
17
useEffect(() => {
18
updateOrderAddresses(shipAddressAttributes)
19
}, [])
20
}
Copied!

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:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { updateOrderPayment } = useSquareCheckout()
5
6
const paymentAttributes = {
7
payment_method_type: 'square',
8
source_attributes: {
9
nonce: 'your-token'
10
}
11
}
12
13
useEffect(() => {
14
updateOrderAddresses(paymentAttributes)
15
}, [])
16
}
Copied!

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 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:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { updateOrderPayment } = useSquareCheckout()
5
6
const paymentAttributes = {
7
payment_method_type: 'square',
8
source_attributes: {
9
nonce: 'your-token'
10
}
11
}
12
13
useEffect(() => {
14
updateOrderPayment(paymentAttributes)
15
}, [])
16
}
Copied!

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:

1
import { useSquareCheckout } from '~/hooks/actions'
2
3
export default () => {
4
const { finalizeCheckout } = useSquareCheckout()
5
6
useEffect(() => {
7
finalizeCheckout()
8
}, [])
9
}
Copied!
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.