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,
Get checkoutUrl
using cartCreate
mutation
Set checkoutUrl
to to
attribute
Click the button
AMaL
January 26, 2025, 11:39am
2
@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