Skip to main content
Prevent users from clicking buttons outside the checkout while payment is being processed.

​
Recipe

const submitButton = document.getElementById('external-submit');

checkout.addEventListener('primer:state-change', (event) => {
  submitButton.disabled = event.detail.isProcessing;
});

​
How it works

  1. Get a reference to your external button(s)
  2. Listen for the primer:state-change event
  3. Set the button’s disabled property based on isProcessing

​
Variations

​
Disable multiple buttons

const buttons = document.querySelectorAll('.checkout-action');

checkout.addEventListener('primer:state-change', (event) => {
  buttons.forEach((button) => {
    button.disabled = event.detail.isProcessing;
  });
});

​
Add visual feedback

const submitButton = document.getElementById('external-submit');

checkout.addEventListener('primer:state-change', (event) => {
  const { isProcessing } = event.detail;

  submitButton.disabled = isProcessing;
  submitButton.textContent = isProcessing ? 'Processing...' : 'Pay Now';
  submitButton.classList.toggle('loading', isProcessing);
});

checkout.addEventListener('primer:state-change', (event) => {
  const { isProcessing } = event.detail;

  // Prevent navigation during payment
  document.querySelectorAll('a').forEach((link) => {
    if (isProcessing) {
      link.dataset.originalHref = link.href;
      link.removeAttribute('href');
      link.style.pointerEvents = 'none';
    } else if (link.dataset.originalHref) {
      link.href = link.dataset.originalHref;
      link.style.pointerEvents = '';
    }
  });
});

​
See also