0

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');
      }
    }
  });
");
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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.