What is the checkout experience like with WooCommerce Square payment gateway?

WooCommerce is powerful and allows you to customize your customer’s experience from beginning to end.

With the Square payment gateway, you have a couple of options available to you to help ensure that you are meeting your customers needs and increasing conversions. The main difference is whether or not the new checkout experience is currently enabled.

Accepted card logos

↑ Back to top

These card logos would show to the customers as accepted during the checkout.

Here’s what this setting looks like in the admin dashboard:

Here’s how the card logos would appear on the checkout page when using the checkout shortcode:

Customer profiles enabled

↑ Back to top

In Square for WooCommerce, enabling tokenization would allow customers to securely save their payment details for future checkout.

When this feature is enabled in admin settings under WooCommerce > Settings > Payments > Square, a checkbox will show under the credit card field area that customers can enable to securely save their card to Square. Once customers save their card, they can use it to make purchases without adding the card data again.

Here’s what this setting looks like in the admin dashboard:

And here’s what the option the customer would see looks like on the checkout page using the checkout shortcode:

And here’s what the option the customer would see looks like on the checkout page using block based checkout:

Paying with a saved card

↑ Back to top

Once customers save their payment information, they can used the saved payment information to pay for future purchases.

Here’s what the saved payment information would look like on the checkout page using the checkout shortcode:

And here’s what the saved payment information would look like on the checkout page using the block based checkout:

Digital wallets enabled

↑ Back to top

Digital wallets would allow customers to make payments on the store using Apple Pay and Google Pay.

Here’s what this setting looks like in the admin dashboard:

And when digital wallets are enabled, here’s what the option the customer would see looks like on the checkout page using the checkout shortcode:

And here’s what the option the customer would see looks like on the checkout page using block based checkout:

Digital wallets disabled

↑ Back to top

Digital wallets would allow customers to make payments on the store using Apple Pay and Google Pay. When this setting is disabled, customers won’t see the option to pay using Apple Pay or Google Pay.

In this case, the Apple Pay and Google Pay buttons shown in the two screenshots above won’t show on the checkout page.

Gift cards enabled

↑ Back to top

A customer can complete the payment entirely with a Gift Card if it has sufficient funds.

In a scenario where it has insufficient funds, the customer will be shown the Credit Card option under the Square payment method to pay for the remaining balance. For example, if the order total is $30 and the Gift Card has a balance of $5, the customer can split the payment and pay the remaining $25 with a credit card. Please note that when splitting the payment, all other payment methods except Square will be hidden.

Here’s what this setting looks like in the admin dashboard:

And here’s what the option the customer would see looks like on the checkout page using the checkout shortcode:

Paying entirely using gift card

↑ Back to top

If a customer’s gift card has sufficient balance to pay for the entire order, the credit cards field will be hidden after the gift card is applied. A notice box will appear indicating the amount from the gift card that will be used for the order, as well as the amount remaining in the gift card after placing the order.

Payments split between credit card and gift card

↑ Back to top

If the gift card doesn’t have sufficient amount to pay for the entire order, the payments can be split between gift card and credit card payments. Customers would see a section for payment split amounts, as well as a section mentioning they don’t have enough funds in the gift card to cover the entire order amount, and would need to be paid with a credit card.

Invalid gift card number

↑ Back to top

If a customer adds an invalid gift card number, the gift card number field will show a red border, and a notice will appear below it mentioning Enter a valid gift card number.