One-click Buy Now implementation for 1 Wix Store item

Ask the community
, , , ,
1

Q: How to make a ‘Buy Now’ button for 1 digital product instead of the “Add to Cart” btn?

Goal: On a custom page, I want customers to click “Buy Now” & directly go to checkout without going through the cart. For an instant purchase without extra steps.

Attempts: -The only available native buttons linked to Wix Stores are inside widgets, which can’t be accessed straightforwardly. Only add to cart buttons are available. I haven’t found a ‘Buy Now’ button

This seems like a good approach for me. How do I implement this in Wix Editor? Is there a nocode/native solution? I tried different approaches using velo too, none has worked yet. I get different versions of failed checkout pages. Maybe the new Wix stores/wix ecom doesn’t the foll code? Or sdk is better? Hope it can be done with simple page code before trying with backend
Approach 1)

import wixLocation from 'wix-location';

$w.onReady(() => {
    const STORE_URL = "https://www.openrescue.com"; //I also tried the product pg
    const PRODUCT_ID = "1782649327875000"; //also tried inventory id

    $w("#buyNowButton").onClick(() => {
        const checkoutUrl =
            `${STORE_URL}/checkout?items=${PRODUCT_ID}:1`;

        wixLocation.to(checkoutUrl);
    });
});

Approach 2)

import { cart } from 'wix-stores-frontend';
import wixLocation from 'wix-location';

$w.onReady(() => {
    $w("#buyNowButton").onClick(async () => {
          await cart.addProducts([
              {
                  productId: "1782649327875000",
                  quantity: 1
              }
          ]);
          wixLocation.to("/checkout");
    });
});

Working in Wix Editor
Related post Buy now button instead of add to cart

2

There isn’t really a clean no-code/native solution for placing a custom “Buy Now” button anywhere on a custom page. The native Buy Now button is available on the Wix Product Page, but a standalone custom button needs Velo.

The issue with your first approach is that Wix checkout does not reliably work from a manually built URL like /checkout?items=PRODUCT_ID:1. Checkout needs to be created from an actual cart/checkout session.

Also, your second approach uses the older wix-stores-frontend cart API, which is now deprecated. I’d use the newer Wix eCom/currentCart flow instead: add the product to the visitor’s current cart, create a checkout from that cart, then navigate to that checkout.

something like this should work. Just make sure PRODUCT_ID is the actual Wix Stores product ID, not the inventory ID.

import { currentCart } from 'wix-ecom-backend';
import { navigateToCheckoutPage } from 'wix-ecom-frontend';

const WIX_STORES_APP_ID = '215238eb-22a5-4c36-9e7b-e7c08025e04e';
const PRODUCT_ID = '1782649327875000';

$w.onReady(function () {
    $w('#buyNowButton').onClick(async () => {
        try {
            $w('#buyNowButton').disable();

            await currentCart.addToCurrentCart({
                lineItems: [
                    {
                        quantity: 1,
                        catalogReference: {
                            appId: WIX_STORES_APP_ID,
                            catalogItemId: PRODUCT_ID
                        }
                    }
                ]
            });

            const checkoutId = await currentCart.createCheckoutFromCurrentCart({
                channelType: 'WEB'
            });

            await navigateToCheckoutPage(checkoutId);

        } catch (error) {
            console.error('Buy Now error:', error);
            $w('#buyNowButton').enable();
        }
    });
});
3

Hey Dan, hope you’re well. Many thanks for that detailed response.
The issues with the 2 approaches you pointed out were exactly in line gpt’s earlier diagnoses.

I tried your code & got 2 red underlines in it
Under ‘channelType’: Type ‘“WEB”’ is not assignable to type ‘ChannelType$3’.
Under ‘checkoutId’: Argument of type ‘CreateCheckoutResponse’ is not assignable to parameter of type ‘string’.

After a lot of back & forth with gpt from then, I got no where. Here are some further attempts;
As it instructed, above errors were cleared with the following changes;
1.

import { currentCart, ChannelType } from 'wix-ecom-backend';

(but that created a red underline under the import line’s ChannelType
2)

const checkout = await currentCart.createCheckoutFromCurrentCart({
    channelType: ChannelType.WEB
});
await navigateToCheckoutPage(checkout.checkoutId);

It also said there may be an issue with the product id format? That it may need some GUID like this?1a2d7e83-4bef-31d5-09e1-3326ee271c09
The ID I always used was the numericId . It’s right, right?

4

A broader Q I’ve had for a while: I’ve used this GPT (ChatGPT - W Epic Solutions) so far to aid me code. But I think it’s limited to Velo & older infrastructure.. How can update this/modify a gpt/other llm to respond more accurately from updated API refs & SDK?
I’m not a dev, am a rookie coder building & coding myself & learn with tutorials & ai as much as I can before asking for people’s help. So I don’t wanna be take your time unless I’ve tried a lot/made sufficient findings to add value here.