How to show a CSS class of a contribution form based on Stripe iFrame element via jquery?

Question

I would like to add a jquery in my extension, as I enter the card details on the stripe, the submit button should show, otherwise hide. Since the new stripe element is served on an iFrame, I am struggling to figure it out, although I have targeted the parent class, still no avail... Can anyone help please? Here's my code..

CRM_Core_Resources::singleton()->addScript("
  CRM.$(function($) {
    showSubmit();
    $('div#billing-payment-block div#card-element .__PrivateStripeElement input.__PrivateStripeElement-input').bind('change keyup click blur', showSubmit);
    function showSubmit() {
        let cardValue = $('div#billing-payment-block div#card-element .__PrivateStripeElement input.__PrivateStripeElement-input').val();
    if (cardValue.length> 0) {
        $('span.crm-button.crm-button-type-upload.crm-button_qf_Main_upload.crm-i-button').show('slow');
      }
      else {
        $('span.crm-button.crm-button-type-upload.crm-button_qf_Main_upload.crm-i-button').slideUp('slow');
      }
    }
  });
");

Answer 1

You can use the Stripe element events to trigger something - see https://stripe.com/docs/js/element/events

We do that in the Stripe extension here: https://lab.civicrm.org/extensions/stripe/-/blob/master/js/civicrm_stripe.js#L281

There are some useful CiviCRM/Stripe extension events which help with frontend integrations and we are open to adding more: https://docs.civicrm.org/stripe/en/latest/events/