Using `checkoutUrl` on button's `to` attribute does not work on thank-you page

After obtaining checkoutUrl from cartCreate storefront mutation, if I use in button’s to attribute, it redirects me to thank-you page instead of going to the new checkout page.

To reproduce,

  1. Get checkoutUrl using cartCreate mutation
  2. Set checkoutUrl to to attribute
  3. Click the button

@abid_hasan I just tried the button, and I have successfully redirected to the checkout page instead of the thank you page.

import { useEffect, useState, useCallback } from 'react';
import { useApi, reactExtension, Button, Link, Text } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <Extension />);

function Extension() {
  const { query } = useApi();
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const createCart = useCallback(async () => {
    try {
      const { data, errors } = await query(
        `mutation cartCreate($input: CartInput) {
          cartCreate(input: $input) {
            cart {
              id
              checkoutUrl
            }
            userErrors {
              field
              message
            }
          }
        }`,
        {
          variables: {
            input: {
              lines: [
                {
                  merchandiseId: 'gid://shopify/ProductVariant/12345678900',
                  quantity: 5,
                },
              ],
            },
          },
        }
      );

      if (data?.cartCreate?.cart) {
        setUrl(data.cartCreate.cart.checkoutUrl);
      } else if (errors) {
        setError(errors);
      }
    } catch (err) {
      console.error(err);
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [query]);

  useEffect(() => {
    createCart();
  }, [createCart]);

  if (loading) return <Text>Loading....</Text>;
  if (error) return <Text>Error: {error.message}</Text>;
  if (!url) return <Text>No checkout URL available</Text>;

  return (
    <Link external to={url}>
      <Button >Checkout URL</Button>
    </Link>
  );
}
1 Like