Skip to content

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

@DerBasler

Description

@DerBasler

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions