Adding Buy Now buttons
Your marketplace includes product description pages with sufficient details to drive purchases. You want an option on the page that directs buyers to checkout.
In this tutorial, you'll use the Storefront API's
cartCreate mutation to create a cart with a single variant. You'll embed a Buy Now button on product pages, which opens a new tab with the URL to the online store for checkout.
What you'll learnAnchor link to section titled "What you'll learn"
After you finish this tutorial, you'll know how to do the following:
cartCreatemutation to create a new cart for a product purchase
Add Buy Now buttons that redirect buyers to a merchant's checkout
RequirementsAnchor link to section titled "Requirements"
Step 1: Add a Anchor link to section titled "Step 1: Add a cartCreate mutation"
You'll use the Storefront API's
cartCreate mutation to create a cart with a single variant, and redirect the buyer to the cart's checkout URL. Since you're immediately redirecting to checkout, you'll only retrieve the
checkoutURL field for the cart.
cartCreate mutation that accepts an
input parameter to hold cart information.
Step 2: Add a Buy Now buttonAnchor link to section titled "Step 2: Add a Buy Now button"
You can now create a buy now button which calls the GraphQL function and redirects to the returned checkout URL.
Your product description page might now look something like the following, and clicking the Buy Now button should open the checkout in a new tab.