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 learn
Anchor link to section titled "What you'll learn"After you finish this tutorial, you'll know how to do the following:
Use the
cartCreatemutation to create a new cart for a product purchaseAdd Buy Now buttons that redirect buyers to a merchant's checkout
Requirements
Anchor link to section titled "Requirements"You've completed the tutorial for adding product description pages.
You're familiar with managing a cart using the Storefront API.
Step 1: Add a cartCreate mutation
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.
Add a cartCreate mutation that accepts an input parameter to hold cart information.
Step 2: Add a Buy Now button
Anchor 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.
Learn how to surface a shop's policies in the context of a marketplace.
Share feedback on Marketplace Kit.