Demo Store Template: ShopPayButton seems to be inert

[mw10013]

What is the location of your example repository?

pnpm create @shopify/hydrogen@latest with Demo Store template

What version of Hydrogen are you using?

2023.1.2

What version of Remix are you using?

1.12.0

Steps to Reproduce

• pnpm create @shopify/hydrogen@latest with Demo Store template
• navigate to a product page in browser (eg /products/snowboard)
• click on Shop Pay button

Expected Behavior

Clicking on Shop Pay button navigates to Shopify's pay page.

Actual Behavior

Clicking on Shop Pay button seems to do nothing and stays on the product page.

Dev Tools console contains message: [Shop Pay] Store URL (test) is not valid TypeError: Failed to construct 'URL': Invalid URL

ShopPayButton.d.ts in @shopify/hydrogen-react has comment indicating that is needed.

/**
 * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
 * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
 * It relies on the `<ShopProvider>` context provider.
 */
export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }: ShopPayButtonProps): JSX.Element;

looks like a typo and probably should be . Either way, it is not in the component tree. While @shopify/hydrogen seems to export ShopPayButton, but not ShopifyProvider from @shopify/hydrogen-react.

[wizardlyhel]

Mmm yes - that is a typo. That should be ShopifyProvider.

@frehner Maybe a better path is to not rely on useShop and allow storeDomain to be passed in as props?

[frehner]

@wizardlyhel tracking that here #629 🙂

[frehner]

This was fixed in #645