How to Change “Processing Payment” Spinner Text in Funnelish (Custom JS Fix)

Hey everyone :waving_hand:

Got a question about customizing the spinner text during payment processing — like showing a message such as:
:backhand_index_pointing_right: “Please wait, do not refresh the page”

By default, Funnelish shows a loading spinner, but you can add your own message using a small JS snippet.


:white_check_mark: Use Case

This is useful if you want to:

  • Reduce users refreshing the page during checkout

  • Improve trust during payment processing

  • Add clarity (especially for slower gateways)


:light_bulb: Solution (Custom JS)

Add this script inside your Page → Custom Code → Body:

<script>
const spinner = document.querySelector('.payment-form .spinner');
if (spinner) {
  const span = document.createElement('span');
  span.textContent = 'Please wait, do not refresh the page';
  span.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translateX(-50%); color:#000; font-size:14px;';
  spinner.appendChild(span);
}
</script>

cc: Bianca


:gear: How It Works

  • Targets the payment spinner element

  • Injects a text message dynamically

  • Positions it centered over the spinner


:pencil: Customization Ideas

You can easily tweak:

  • Text → “Processing your order…” / “Securing your payment…”

  • Color → match your brand

  • Font size → make it more visible

Example:

span.textContent = 'Processing your order securely...';


:warning: Notes

  • This works on pages using the native Funnelish payment form

  • Make sure the script is placed in the Body section

  • If you have heavy custom code, test once to confirm it loads properly


:pushpin: Pro Tip

Combine this with:

  • Clear CTA copy

  • Trust badges

  • Fast checkout flow

…and you’ll reduce drop-offs during payment :ok_hand:


If you want help styling it to match your design or making it mobile-friendly, drop your page link and I’ll help :+1: