Shopify / Shopify/buy-button-js

Parameter Missing or Invalid: Required parameter missing or invalid: channel

Open
#930 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
260
Forks
122
Avg merge
5d 14h
Merged PRs (30d)
2

Description

We have a homepage where we integrate shopify using @shopify/buy-button-js this worked well until lately.

Out of the blue (no code or config change) we got the following error if a user tried to checkout:
Parameter Missing or Invalid: Required parameter missing or invalid: channel

The URL where the checkout redirected the user and where the error appeared was:
https://shop.myDomain.xx/cart/c/hWN3GVUNI6d0pgq3QFiiAnyA?key=someKey&channel=buy_button

Image

I saw that the cause was in @shopify/buy-button-js/dist/buybutton.js:15038

  /**
   * get params for online store URL.
   * @return {Object}
   */

}, {
  key: "onlineStoreParams",
  get: function get() {
    return {
      channel: '**buy_button**',
      referrer: encodeURIComponent(windowUtils.location()),
      variant: this.selectedVariant.id.split('/')[4]
    };
  }

I noticed that the checkout worked in case I completely removed the channel. (https://shop.myDomain.xx/cart/c/hWN3GVUNI6d0pgq3QFiiAnyA?key=someKey)

I go this to work with the

.createComponent('cart', {
 options: {
      "cart":  events: {
      beforeInit: (chart) => {
 cart.checkout.open = function(url: string): void {
    // open it in a new tab
    windowReference = window.open();
    windowReference!.location = url.replace('&channel=buy_button', '');
  }
},
    },

This workaround works but I would like to know how it come to that issue and my fix seams to be really dirty so what do I need to do to fix this properly?

Any input is appreciated.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the checkout redirect and inspect @shopify/buy-button-js/dist/buybutton.js:15038, especially the onlineStoreParams channel value. Compare checkout behavior with and without channel=buy_button; done means identifying a supported fix so checkout works without the caller's URL-replacement workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.