Answers.Body: <p>You can use the Stripe element events to trigger something - see <a href="https://stripe.com/docs/js/element/events" rel="nofollow noreferrer">https://stripe.com/docs/js/element/events</a></p>
  
  <p>We do that in the Stripe extension here: <a href="https://lab.civicrm.org/extensions/stripe/-/blob/master/js/civicrm_stripe.js#L281" rel="nofollow noreferrer">https://lab.civicrm.org/extensions/stripe/-/blob/master/js/civicrm_stripe.js#L281</a></p>
  
  <p>There are some useful CiviCRM/Stripe extension events which help with frontend integrations and we are open to adding more: <a href="https://docs.civicrm.org/stripe/en/latest/events/" rel="nofollow noreferrer">https://docs.civicrm.org/stripe/en/latest/events/</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-13T22:14:12.417Z
Answers.LastActivityDate: 2020-05-13T22:14:12.417Z
Answers.UserDisplayName: Matthew Wire
Body: <p>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..</p>
  
  <pre><code>CRM_Core_Resources::singleton()-&gt;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&gt; 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');
        }
      }
    });
  ");
  </code></pre>
  
Tags: <extension><stripe><jquery><user-experience>
Title: How to show a CSS class of a contribution form based on Stripe iFrame element via jquery?
ThreadText: # How to show a CSS class of a contribution form based on Stripe iFrame element via jquery?
  
  (Asked by: username_0 on 2020-05-12)
  
  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');
        }
      }
    });
  ");
  
  **Tags:** extension, stripe, jquery, user-experience
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-05-13. Score: 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/>
  
  
  ---
  
  