Sellauth checkout embed

Checkout embed for custom websites

Code:

Parameters: cart - array of items, can be single or multiple cart[0].productId - can be found on your Dashboard on Products page - https://dash.sellauth.com/products cart[0].variantId - can be found on your Dashboard when editing a product variant cart[0].quantity - quantity of the item to buy shopId - can be found on your Dashboard on API Access page - https://dash.sellauth.com/api modal - true = checkout opens in a popup, false = opens in a new tab

Note: <svg> icons in the example code are optional, there's a Cart and a Loading icon. Since the embed doesn't open immediatelly as it sends an API request first, it's recommended to keep them for better UX.

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it. at Page (/app/page)

code a website with sellauth embed

Checkout embed for custom websites

Code:

<script src="https://sellauth.com/assets/js/sellauth-embed-2.js"></script>

<button
  class="sellauth-button"
  type="button"
  onclick="window.sellAuthEmbed.checkout(this, { cart: [{ productId: 70, variantId: 65, quantity: 1 }], shopId: 1, modal: false })"
>
  <span>Buy Now</span>
  <svg xmlns="http://www.w3.org/2000/svg" class="icon cart" fill="currentColor" viewBox="0 0 256 256"><path d="M230.14,58.87A8,8,0,0,0,224,56H62.68L56.6,22.57A8,8,0,0,0,48.73,16H24a8,8,0,0,0,0,16h18L67.56,172.29a24,24,0,0,0,5.33,11.27,28,28,0,1,0,44.4,8.44h45.42A27.75,27.75,0,0,0,160,204a28,28,0,1,0,28-28H91.17a8,8,0,0,1-7.87-6.57L80.13,152h116a24,24,0,0,0,23.61-19.71l12.16-66.86A8,8,0,0,0,230.14,58.87ZM104,204a12,12,0,1,1-12-12A12,12,0,0,1,104,204Zm96,0a12,12,0,1,1-12-12A12,12,0,0,1,200,204Zm4-74.57A8,8,0,0,1,196.1,136H77.22L65.59,72H214.41Z"></path></svg>
  <svg xmlns="http://www.w3.org/2000/svg" class="icon spinner" fill="currentColor" viewBox="0 0 256 256"><path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"></path></svg>
</button>

Parameters: cart - array of items, can be single or multiple cart[0].productId - can be found on your Dashboard on Products page - https://dash.sellauth.com/products cart[0].variantId - can be found on your Dashboard when editing a product variant cart[0].quantity - quantity of the item to buy shopId - can be found on your Dashboard on API Access page - https://dash.sellauth.com/api modal - true = checkout opens in a popup, false = opens in a new tab
Note: <svg> icons in the example code are optional, there's a Cart and a Loading icon. Since the embed doesn't open immediatelly as it sends an API request first, it's recommended to keep them for better UX.

I've created a modern checkout page that integrates the SellAuth embed while maintaining a clean, professional design. Here are the key features:

Dark theme design inspired by the SellAuth branding
Responsive card layout with proper spacing and typography
Custom styled button with loading state animation
Proper script loading using Next.js Script component
TypeScript support and proper component structure

To use this:

Replace the productId, variantId, and shopId with your actual values from your SellAuth dashboard
Customize the card content, pricing, and description as needed
Adjust the styling in globals.css if you want to change the color scheme

The checkout will open in a modal by default (modal: true), but you can change it to open in a new tab by setting modal: false in the checkout options.