Initial support for drupal webform (does not submit properly yet)

CRM/Core/Payment/Stripe.php

@@ -319,13 +319,18 @@ class CRM_Core_Payment_Stripe extends CRM_Core_Payment {
       'jsDebug' => TRUE,
     ];
     \Civi::resources()->addVars(E::SHORT_NAME, $jsVars);
+    // Assign to smarty so we can add via Card.tpl for drupal webform because addVars doesn't work in that context
+    $form->assign('stripeJSVars', $jsVars);
 
     // Add help and javascript
     CRM_Core_Region::instance('billing-block')->add(
       ['template' => 'CRM/Core/Payment/Stripe/Card.tpl', 'weight' => -1]);
-    \Civi::resources()
-      ->addStyleFile(E::LONG_NAME, 'css/elements.css', 0, 'page-header')
-      ->addScriptFile('com.drastikbydesign.stripe', 'js/civicrm_stripe.js');
+    // Add CSS via region (it won't load on drupal webform if added via \Civi::resources()->addStyleFile)
+    CRM_Core_Region::instance('billing-block')->add([
+      'styleUrl' => \Civi::resources()->getUrl(E::LONG_NAME, 'css/elements.css'),
+      'weight' => -1,
+    ]);
+    \Civi::resources()->addScriptFile(E::LONG_NAME, 'js/civicrm_stripe.js');
   }
 
   /**

js/civicrm_stripe.js

@@ -94,7 +94,7 @@ CRM.$(function($) {
     window.onbeforeunload = null;
 
     // Load Stripe onto the form.
-    loadStripeBillingBlock();
+    checkAndLoad();
 
     // Store and remove any onclick Action currently assigned to the form.
     // We will re-add it if the transaction goes through.
@@ -156,21 +156,35 @@ CRM.$(function($) {
                 CRM.vars.stripe.publishableKey = null;
               }
               // Now reload the billing block.
-              loadStripeBillingBlock();
+              checkAndLoad();
             });
           });
         }
       }
-      loadStripeBillingBlock();
+      checkAndLoad();
     }
   });
 
-  function loadStripeBillingBlock() {
-    // Setup Stripe.Js
+  function checkAndLoad() {
     if (typeof CRM.vars.stripe === 'undefined') {
+      debugging('CRM.vars.stripe not defined!');
       return;
     }
 
+    if (typeof Stripe === 'undefined') {
+      debugging('Stripe.js is not loaded!');
+
+      $.getScript("https://js.stripe.com/v3", function () {
+        debugging("Script loaded and executed.");
+        loadStripeBillingBlock();
+      });
+    }
+    else {
+      loadStripeBillingBlock();
+    }
+  }
+
+  function loadStripeBillingBlock() {
     stripe = Stripe(CRM.vars.stripe.publishableKey);
     var elements = stripe.elements();
 
@@ -237,12 +251,13 @@ CRM.$(function($) {
         $('#action').val(this.value);
       });
       // If enter pressed, use our submit function
-      form.keypress(function(event) {
-        if (event.which === 13) {
+      form.addEventListener('keydown', function (e) {
+        if (e.keyCode === 13) {
           $('#action').val(this.value);
           submit(event);
         }
       });
+
       $('#billingcheckbox:input').hide();
       $('label[for="billingcheckbox"]').hide();
     }
@@ -376,7 +391,7 @@ CRM.$(function($) {
     var submit = null;
     if (getIsDrupalWebform()) {
       submit = form.querySelector('[type="submit"].webform-submit');
-      if (!submit.length) {
+      if (!submit) {
         // drupal 8 webform
         submit = form.querySelector('[type="submit"].webform-button--submit');
       }
@@ -388,13 +403,19 @@ CRM.$(function($) {
   }
 
   function getTotalAmount() {
-    // This is ONLY triggered in the following circumstances on a CiviCRM contribution page:
-    // - With a priceset that allows a 0 amount to be selected.
-    // - When Stripe is the ONLY payment processor configured on the page.
     var totalFee = null;
     if (typeof calculateTotalFee == 'function') {
+      // This is ONLY triggered in the following circumstances on a CiviCRM contribution page:
+      // - With a priceset that allows a 0 amount to be selected.
+      // - When Stripe is the ONLY payment processor configured on the page.
       totalFee = calculateTotalFee();
     }
+    else if (getIsDrupalWebform()) {
+      // This is how webform civicrm calculates the amount in webform_civicrm_payment.js
+      $('.line-item:visible', '#wf-crm-billing-items').each(function() {
+        totalFee += parseFloat($(this).data('amount'));
+      });
+    }
     return totalFee;
   }
 
@@ -421,7 +442,7 @@ CRM.$(function($) {
 
   function debugging (errorCode) {
     // Uncomment the following to debug unexpected returns.
-    if (CRM.vars.stripe.jsDebug === true) {
+    if ((typeof(CRM.vars.stripe) === 'undefined') || (Boolean(CRM.vars.stripe.jsDebug) === true)) {
       console.log(new Date().toISOString() + ' civicrm_stripe.js: ' + errorCode);
     }
   }

stripe.php

@@ -137,8 +137,7 @@ function stripe_civicrm_alterContent( &$content, $context, $tplName, &$object )
   if (($context == 'form' && !empty($object->_paymentProcessor['class_name']))
     || (($context == 'page') && !empty($object->_isPaymentProcessor))) {
     if (!isset(\Civi::$statics[E::LONG_NAME]['stripeJSLoaded']) || $object instanceof CRM_Financial_Form_Payment) {
-      $stripeJSURL = CRM_Core_Resources::singleton()
-        ->getUrl('com.drastikbydesign.stripe', 'js/civicrm_stripe.js');
+      $stripeJSURL = \Civi::resources()->getUrl(E::LONG_NAME, 'js/civicrm_stripe.js');
       $content .= "<script src='{$stripeJSURL}'></script>";
       \Civi::$statics[E::LONG_NAME]['stripeJSLoaded'] = TRUE;
     }

templates/CRM/Core/Payment/Stripe/Card.tpl

 {* https://civicrm.org/licensing *}
 
-<label for="card-element">
-  <legend>Credit or debit card</legend>
-</label>
-<div id="card-element">
-  <!-- a Stripe Element will be inserted here. -->
-</div>
+{* Manually create the CRM.vars.stripe here for drupal webform because \Civi::resources()->addVars() does not work in this context *}
+{literal}
+<script type="text/javascript">
+  CRM.$(function($) {
+    $(document).ready(function() {
+      if (typeof CRM.vars.stripe === 'undefined') {
+        var stripe = {{/literal}{foreach from=$stripeJSVars key=arrayKey item=arrayValue}{$arrayKey}:'{$arrayValue}',{/foreach}{literal}};
+        CRM.vars.stripe = stripe;
+      }
+    });
+  });
+</script>
+{/literal}
+
+{* Add the components required for a Stripe card element *}
+<label for="card-element"><legend>Credit or debit card</legend></label>
+<div id="card-element"></div>
 {* Area for Stripe to report errors *}
 <div id="card-errors" role="alert" class="alert alert-danger"></div>

[vakeesan26]

I am getting following error in webform

[vakeesan26]

Also submit button not being disabled after one click, like in CiviCRM pages...