Build checkout experiences using only digital wallets to boost online sales
Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog
Cyber Monday 2018, the busiest day for online shopping, hit new highs in 2018 with $7.9 billion in sales. Mobile devices (phones and tablets) accounted for more than 57% of the traffic but only for 39% of the sales. This is because conversion rates are typically lower on mobile devices compared to desktops.
A great way to increase mobile conversion is to use digital wallets like Apple Pay and Google Pay. They work because they reduce the friction to pay. A popular way of using these digital wallets is to add them to the product detail pages without the credit card forms. This approach allows buyers to skip the cart and checkout pages and quickly purchase a single item, increasing the likelihood of impulse purchases.
Today, we are delighted to announce an update to the Square Payment Form that will allow you to build express checkout experiences with digital wallets in your product detail pages.
Step 1: Add a placeholder for the digital wallet.
Step 2: Initialize the digital wallet in the Square Payment Form.
Step 3: Show the digital wallet’s placeholder if it is available for the buyer.
At this point, the buyer should be able to see the Apple Pay and Google Pay buttons if they are enabled.
Step 4: Create a PaymentRequest object with the order information. This callback is triggered when the digital Pay button is clicked.
Step 5: Once the buyer completes the payment, Square will tokenize the card and give you back a nonce through the cardNonceResponseReceived callback. You can then send the nonce to your server to charge the customer.
You can learn more about how to add these digital wallets to your product detail pages in our documentation. To learn more about Square’s developer platform, visit https://squareup.com/developers or join our community at squ.re/slack.
Note: Square supports Apple Pay, Google Pay, and Masterpass only for USD transactions.
Additional Reading
- Integrate with SqPaymentForm
- Integrate with Checkout API
Want more? Sign up for our monthly developer newsletter or come hang out with us in the Square Dev Slack channel! You can also follow us on Twitter at @SquareDev.
