--- title: Embed Checkout description: Learn how to complete buyer purchases using cart permalinks or Checkout Kit. source_url: html: 'https://shopify.dev/docs/agents/get-started/complete-checkout' md: 'https://shopify.dev/docs/agents/get-started/complete-checkout.md' --- ExpandOn this page * [What you'll learn](https://shopify.dev/docs/agents/get-started/complete-checkout.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/agents/get-started/complete-checkout.md#requirements) * [Step 1: Retrieve a checkout URL for the variant selection](https://shopify.dev/docs/agents/get-started/complete-checkout.md#step-1-retrieve-a-checkout-url-for-the-variant-selection) * [Step 2: Redirect to Shopify Checkout](https://shopify.dev/docs/agents/get-started/complete-checkout.md#step-2-redirect-to-shopify-checkout) * [Optional: Handle multiple shops](https://shopify.dev/docs/agents/get-started/complete-checkout.md#optional-handle-multiple-shops) * [Optional: Mobile checkout](https://shopify.dev/docs/agents/get-started/complete-checkout.md#optional-mobile-checkout) * [Next steps](https://shopify.dev/docs/agents/get-started/complete-checkout.md#next-steps) # Embed Checkout Early access Agentic commerce is rolling out to Dev Dashboard. [Sign up to be notified](https://docs.google.com/forms/d/e/1FAIpQLSe4DsRrfytH6CBrolSJdPKLyl-e-K2MEBDOjm-F-ZJpNy6Vtw/viewform). After buyers select products from the Catalog, they need to complete checkout to finalize their purchase. Using the checkout URL provided in the tool response, you can send buyers to Shopify's secure checkout. Shopify provides two paths for completing checkout: redirect to a checkout URL in a new tab, or embed checkout inline using Checkout Kit. *** ## What you'll learn In this tutorial, you'll learn how to do the following tasks: * Redirect buyers to Shopify Checkout in a new tab * Embed checkout inline using custom components * Use Checkout Kit SDKs for mobile apps *** ## Requirements * [Search the Catalog](https://shopify.dev/docs/agents/get-started/search-catalog): Complete the Catalog tutorial to get product variant IDs and shop domains. *** ## Step 1: Retrieve a checkout URL for the variant selection 1. Update your script to use the same response object to retrieve a `checkoutUrl` to direct the buyer to checkout with. ##### search-catalog.js ```javascript import 'dotenv/config'; const bearerToken = process.env.BEARER_TOKEN; fetch('https://discover.shopifyapps.com/global/mcp', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${bearerToken}` }, body: JSON.stringify({ jsonrpc: '2.0', method: 'tools/call', id: 1, params: { name: 'search_global_products', arguments: { query: 'vintage leather jacket', context: 'buyer looking for sustainable fashion', include_secondhand: true, max_price: 150, limit: 3 } } }) }) .then(res => res.json()) .then(data => { // Extract first offer ID and call get_global_product_details if (data.result && data.result.content && data.result.content[0]) { const textContent = JSON.parse(data.result.content[0].text); if (textContent.offers && textContent.offers.length > 0) { const fullId = textContent.offers[0].id; // Extract UPID from gid://shopify/p/{UPID} const upid = fullId.split('/p/')[1]; // Call get_global_product_details with the extracted ID return fetch('https://discover.shopifyapps.com/global/mcp', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${bearerToken}` }, body: JSON.stringify({ jsonrpc: '2.0', method: 'tools/call', id: 2, params: { name: 'get_global_product_details', arguments: { upid: upid, product_options: [{ key: 'Size', values: ['Large (L)'] }] } } }) }); } } }) .then(res => res ? res.json() : null) .then(data => { if (data) { // console.log(JSON.stringify(data, null, 2)); // Extract and print checkoutUrl if (data.result && data.result.content && data.result.content[0]) { const productData = JSON.parse(data.result.content[0].text); if (productData.product && productData.product.products && productData.product.products[0]) { const checkoutUrl = productData.product.products[0].checkoutUrl; console.log(checkoutUrl); } } } }) .catch(err => console.error('Request failed:', err)); ``` ##### {} Response ```bash https://mock.shop/cart/2000000000001:1?_gsid=abc123def456&payment=shop_pay ``` 2. To add multiple items from the same shop: ```bash https://mock.shop/cart/2000000000001:1,2000000000002:2?_gsid=abc123def456&payment=shop_pay ``` Info Cart permalinks work for products from a single shop. If a buyer selects products from multiple shops in the Catalog, create separate checkout URLs for each shop. 3. You can also optionally prefill buyer information in the checkout URL based on the conversation with the buyer: ```bash https://{shop_domain}/cart/{variant_id}:1?checkout[email]=buyer@example.com&checkout[shipping_address][city]=Chicago ``` Learn more about [cart permalinks](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks). *** ## Step 2: Redirect to Shopify Checkout The simplest approach is to redirect buyers directly to the checkout URL. This works for web, mobile, and any platform that can open URLs. 1. Create a link that opens checkout in a new tab: ```html Checkout at Mock Shop ``` 2. Or open the checkout URL programmatically: ```javascript window.open(checkoutUrl, "_blank"); ``` Buyers are taken to Shopify's hosted checkout page where they can review their order, enter payment details, and complete the purchase. ![Checkout permalink destination](https://shopify.dev/assets/assets/images/agents/checkout-permalink-CNlSiVFm.png) *** ## Optional: Handle multiple shops When buyers select products from multiple shops in the Catalog, you need to create a separate checkout for each shop. Group the selected products by shop domain and create checkout URLs for each: ```javascript // Group selected products by shop const productsByShop = {}; selectedProducts.forEach(product => { const shopDomain = new URL(product.shop.onlineStoreUrl).hostname; if (!productsByShop[shopDomain]) { productsByShop[shopDomain] = []; } productsByShop[shopDomain].push(product); }); // Create checkout URL for each shop Object.entries(productsByShop).forEach(([shopDomain, products]) => { const variantIds = products.map(p => { const id = p.selectedProductVariant.id.split('/').pop(); return `${id}:1`; }).join(','); const checkoutUrl = `https://${shopDomain}/cart/${variantIds}`; console.log(`Checkout for ${shopDomain}: ${checkoutUrl}`); }); ``` Display a checkout button for each shop so buyers can complete their purchases. *** ## Optional: Mobile checkout For mobile apps, use Checkout Kit's native SDKs for iOS, Android, or React Native. These provide a native checkout experience optimized for mobile devices. #### Android Import the `ShopifyCheckoutSheetKit` library and pass it a checkout URL: ```kotlin import com.shopify.checkoutsheetkit.ShopifyCheckoutSheetKit fun presentCheckout(variantId: String, shopDomain: String) { val checkoutUrl = "https://$shopDomain/cart/$variantId:1" ShopifyCheckoutSheetKit.present(checkoutUrl, context, checkoutEventProcessor) } ``` #### iOS Use the `ShopifyCheckoutSheetKit` package: ```swift import ShopifyCheckoutSheetKit func presentCheckout(variantId: String, shopDomain: String) { let checkoutURL = URL(string: "https://\(shopDomain)/cart/\(variantId):1")! ShopifyCheckoutSheetKit.present(checkout: checkoutURL, from: self, delegate: self) } ``` #### React Native Use the `checkout-sheet-kit` package: ```javascript import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit'; function CheckoutButton({ variantId, shopDomain }) { const shopifyCheckout = useShopifyCheckoutSheet(); const handleCheckout = () => { const checkoutUrl = `https://${shopDomain}/cart/${variantId}:1`; shopifyCheckout.present(checkoutUrl); }; return ; } ``` ![Checkout Kit overview](https://shopify.dev/assets/assets/images/agents/checkout-kit-CpXqOyTw.png) *** ## Next steps * [About Shopify Catalog](https://shopify.dev/docs/agents/catalog): Learn how Catalog search and lookup work across the Shopify ecosystem. * [Checkout for agents](https://shopify.dev/docs/agents/checkout): Learn how to embed checkout in agentic commerce apps. *** * [What you'll learn](https://shopify.dev/docs/agents/get-started/complete-checkout.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/agents/get-started/complete-checkout.md#requirements) * [Step 1: Retrieve a checkout URL for the variant selection](https://shopify.dev/docs/agents/get-started/complete-checkout.md#step-1-retrieve-a-checkout-url-for-the-variant-selection) * [Step 2: Redirect to Shopify Checkout](https://shopify.dev/docs/agents/get-started/complete-checkout.md#step-2-redirect-to-shopify-checkout) * [Optional: Handle multiple shops](https://shopify.dev/docs/agents/get-started/complete-checkout.md#optional-handle-multiple-shops) * [Optional: Mobile checkout](https://shopify.dev/docs/agents/get-started/complete-checkout.md#optional-mobile-checkout) * [Next steps](https://shopify.dev/docs/agents/get-started/complete-checkout.md#next-steps)