Checkout Countdown Timer

Shopify Apps

Topic summary

A developer created a countdown timer for Shopify checkout using Checkout UI Extensions and wants it to redirect users to the home page when the timer expires.

The Problem:

  • The applyRedirect method isn’t working as expected
  • After implementing suggested fixes, the checkout page remains stuck without redirecting

Current Status:

  • Another user (B2Bridge) provided updated code snippets attempting to resolve the redirect issue
  • The initial solution didn’t work, prompting a second code revision
  • The discussion remains ongoing as the developer tests the latest suggested code
  • No confirmed resolution yet

Technical Context:
The issue involves React-based Checkout UI Extensions, specifically the purchase.checkout.block.render extension point and redirect functionality within Shopify’s checkout environment.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I created a countdown timer app using Checkout UI Extensions. Once the timer finishes, I want it to redirect to the home page. However, I tried using applyRedirect, but it doesn’t seem to work.

Could you please check my code and help me fix it? Thanks!

import {
  reactExtension,
  Banner,
  Text,
  useApi,
  useTranslate,
} from "@shopify/ui-extensions-react/checkout";
import { useEffect, useState } from "react";

export default reactExtension("purchase.checkout.block.render", () => (
1 Like
2

Hi, @jdthann . Here is updated code:

import {
  reactExtension,
  Banner,
  Text,
  useApi,
  useTranslate,
} from "@shopify/ui-extensions-react/checkout";
import { useEffect, useState } from "react";

export default reactExtension("purchase.checkout.block.render", () => (
  

If this helpful, please give us a like and mark it as solution. Thanks you :heart_eyes:
3

Hi, @B2Bridge !
Thanks for the updated code. I tried updating mine, but it still gets stuck on the checkout page and does not redirect to the home page. Is there another solution?

1 Like
4

Try this and let me know if this work:

import {
  reactExtension,
  Banner,
  Text,
  useApi,
  useTranslate,
} from "@shopify/ui-extensions-react/checkout";
import { useEffect, useState } from "react";

export default reactExtension("purchase.checkout.block.render", () => (