Skip to content
Snippets Groups Projects
Commit 85aac1ef authored by mattwire's avatar mattwire
Browse files

Add jquery form event 'crmBillingFormReloadComplete' and document jquery events

parent 489a9819
No related branches found
No related tags found
1 merge request!1096.4
Hide whitespace changes
Inline Side-by-side
docs/events.md 0 → 100644
+ 23
− 0
View file @ 85aac1ef
# Events (jQuery)
Most of the functionality to take card details, validate the form etc. happens on the javascript/jquery side before the form is submitted.
If you are customising the frontend form you may need to respond to events triggered by the Stripe extension.
## Available Events
### crmBillingFormNotValid
This event is triggered when the form has been submitted but fails because of a validation error on the form.
It is most useful for re-enabling form elements that were disabled during submission.
Example code:
```javascript
$form.on('crmBillingFormNotValid', e => {
console.log("resetting submit button as form not submitted");
$customSubmitButton.prop('disabled', false).text($customSubmitButton.data('text'));
});
```
### crmBillingFormReloadComplete
This event is triggered when the form has completed reloading and is ready for use (Stripe element visible etc.).
It is useful for clearing any "loading" indicators and unfreezing form elements.
js/civicrm_stripe.js
+ 2
− 0
View file @ 85aac1ef
......@@ -35,6 +35,8 @@ CRM.$(function($) {
checkAndLoad();
}
}
debugging('reload completed.');
$(form).trigger('crmBillingFormReloadComplete');
};
// On initial run we need to call this now.
window.civicrmStripeHandleReload();
......
js/civicrm_stripe.min.js
+ 1
− 1
View file @ 85aac1ef
CRM.$(function(d){g("civicrm_stripe loaded, dom-ready function firing.");if(window.civicrmStripeHandleReload){g("calling existing civicrmStripeHandleReload.");window.civicrmStripeHandleReload();return}var s;var b;var c;var w;var q=false;window.onbeforeunload=null;window.civicrmStripeHandleReload=function(){g("civicrmStripeHandleReload");var D=document.getElementById("card-element");if((typeof D!=="undefined")&&(D)){if(!D.children.length){g("checkAndLoad from document.ready");o()}}};window.civicrmStripeHandleReload();function x(F,D){g(F+": success - submitting form");var E=document.createElement("input");E.setAttribute("type","hidden");E.setAttribute("name",F);E.setAttribute("value",D.id);c.appendChild(E);c.submit()}function r(){for(i=0;i<w.length;++i){w[i].setAttribute("disabled",true)}return c.submit()}function j(E){g("error: "+E.message);var D=document.getElementById("card-errors");D.style.display="block";D.textContent=E.message;document.querySelector("#billing-payment-block").scrollIntoView();window.scrollBy(0,-50);c.dataset.submitted=false;for(i=0;i<w.length;++i){w[i].removeAttribute("disabled")}}function B(){g("handle card payment");s.createPaymentMethod("card",b).then(function(D){if(D.error){j(D.error)}else{if(h()||a()){x("paymentMethodID",D.paymentMethod)}else{var E=CRM.url("civicrm/stripe/confirm-payment");d.post(E,{payment_method_id:D.paymentMethod.id,amount:t().toFixed(2),currency:CRM.vars.stripe.currency,id:CRM.vars.stripe.id,description:document.title,csrfToken:CRM.vars.stripe.csrfToken}).then(function(F){y(F)})}}})}function y(D){g("handleServerResponse");if(D.error){j(D.error)}else{if(D.requires_action){u(D)}else{x("paymentIntentID",D.paymentIntent)}}}function u(D){s.handleCardAction(D.payment_intent_client_secret).then(function(E){if(E.error){j(E.error)}else{x("paymentIntentID",E.paymentIntent)}})}d(document).ajaxComplete(function(F,G,E){if((E.url.match("civicrm(/|%2F)payment(/|%2F)form")!==null)||(E.url.match("civicrm(/|%2F)contact(/|%2F)view(/|%2F)participant")!==null)){if(typeof CRM.vars.stripe==="undefined"){return}var D=m();if(D!==null){if(D!==parseInt(CRM.vars.stripe.id)){g("payment processor changed to id: "+D);if(D===0){return n()}CRM.api3("PaymentProcessor","getvalue",{"return":"user_name",id:D,payment_processor_type_id:CRM.vars.stripe.paymentProcessorTypeID}).done(function(H){var I=H.result;if(I){g("Setting new stripe key to: "+I);CRM.vars.stripe.publishableKey=I}else{return n()}g("checkAndLoad from ajaxComplete");o()})}}}});function n(){g("New payment processor is not Stripe, clearing CRM.vars.stripe");if((typeof b!=="undefined")&&(b)){g("destroying card element");b.destroy();b=undefined}delete (CRM.vars.stripe)}function o(){if(typeof CRM.vars.stripe==="undefined"){g("CRM.vars.stripe not defined! Not a Stripe processor?");return}if(typeof Stripe==="undefined"){if(q){return}q=true;g("Stripe.js is not loaded!");d.getScript("https://js.stripe.com/v3",function(){g("Script loaded and executed.");q=false;f()})}else{f()}}function f(){g("loadStripeBillingBlock");if(typeof s==="undefined"){s=Stripe(CRM.vars.stripe.publishableKey)}var K=s.elements({locale:CRM.vars.stripe.locale});var H={base:{fontSize:"20px"}};var E=document.getElementById("billing_postal_code-"+CRM.vars.stripe.billingAddressID).value;g("existing postcode: "+E);b=K.create("card",{style:H,value:{postalCode:E}});b.mount("#card-element");g("created new card element",b);if(document.getElementById("billing_postal_code-5").value){document.getElementById("billing_postal_code-5").setAttribute("disabled",true)}else{document.getElementsByClassName("billing_postal_code-"+CRM.vars.stripe.billingAddressID+"-section")[0].setAttribute("hidden",true)}b.addEventListener("change",function(L){k(L)});c=l();if(typeof c.length==="undefined"||c.length===0){g("No billing form!");return}e();w=C();c.dataset.submitdontprocess=false;var D=c.querySelectorAll('[type="submit"][formnovalidate="1"], [type="submit"][formnovalidate="formnovalidate"], [type="submit"].cancel, [type="submit"].webform-previous'),G;for(G=0;G<D.length;++G){D[G].addEventListener("click",J())}function J(){g("adding submitdontprocess");c.dataset.submitdontprocess=true}for(G=0;G<w.length;++G){w[G].addEventListener("click",F)}function F(L){if(c.dataset.submitted===true){return}c.dataset.submitted=true;if(typeof CRM.vars.stripe==="undefined"){return r()}g("clearing submitdontprocess");c.dataset.submitdontprocess=false;return I(L)}for(G=0;G<w.length;++G){w[G].removeAttribute("onclick")}p();if(A()){d("[type=submit]").click(function(){v(this.value)});c.addEventListener("keydown",function(L){if(L.keyCode===13){v(this.value);I(event)}});d("#billingcheckbox:input").hide();d('label[for="billingcheckbox"]').hide()}function I(N){N.preventDefault();g("submit handler");if(d(c).valid()===false){g("Form not valid");d("div#card-errors").hide();document.querySelector("#billing-payment-block").scrollIntoView();window.scrollBy(0,-50);d(c).trigger("crmBillingFormNotValid");return false}if(typeof CRM.vars.stripe==="undefined"){g("Submitting - not a stripe processor");return true}if(c.dataset.submitted===true){g("form already submitted");return false}var P=parseInt(CRM.vars.stripe.id);var M=null;if(A()){if(!d('input[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]').length){M=P}else{M=parseInt(c.querySelector('input[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]:checked').value)}}else{if((c.querySelector(".crm-section.payment_processor-section")!==null)||(c.querySelector(".crm-section.credit_card_info-section")!==null)){P=CRM.vars.stripe.id;if(c.querySelector('input[name="payment_processor_id"]:checked')!==null){M=parseInt(c.querySelector('input[name="payment_processor_id"]:checked').value)}}}if((M===0)||(P===null)||((M===null)&&(P===null))){g("Not a Stripe transaction, or pay-later");return r()}else{g("Stripe is the selected payprocessor")}if(typeof CRM.vars.stripe.publishableKey==="undefined"){g("submit missing stripe-pub-key element or value");return true}if(c.dataset.submitdontprocess===true){g("non-payment submit detected - not submitting payment");return true}if(A()){if(d("#billing-payment-block").is(":hidden")){g("no payment processor on webform");return true}var O=d('[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]');if(O.length){if(O.filter(":checked").val()==="0"||O.filter(":checked").val()===0){g("no payment processor selected");return true}}}var L=t();if(L===0){g("Total amount is 0");return r()}if(c.dataset.submitted===true){alert("Form already submitted. Please wait.");return false}else{c.dataset.submitted=true}for(G=0;G<w.length;++G){w[G].setAttribute("disabled",true)}B();return true}}function A(){if(c!==null){return c.classList.contains("webform-client-form")||c.classList.contains("webform-submission-form")}return false}function l(){var D=d("div#card-element").closest("form").prop("id");if((typeof D==="undefined")||(!D.length)){D=d("input[name=hidden_processor]").closest("form").prop("id")}return document.getElementById(D)}function C(){var D=null;if(A()){D=c.querySelectorAll('[type="submit"].webform-submit');if(!D){D=c.querySelectorAll('[type="submit"].webform-button--submit')}}else{D=c.querySelectorAll('[type="submit"].validate')}return D}function t(){var D=0;if(a()){D=null}else{if(document.getElementById("totalTaxAmount")!==null){D=parseFloat(z());g("Calculated amount using internal calculateTaxAmount()")}else{if(typeof calculateTotalFee=="function"){D=parseFloat(calculateTotalFee())}else{if(A()){d(".line-item:visible","#wf-crm-billing-items").each(function(){D+=parseFloat(d(this).data("amount"))})}else{if(document.getElementById("total_amount")){D=parseFloat(document.getElementById("total_amount").value)}}}}}g("getTotalAmount: "+D);return D}function z(){var D=0;if(document.getElementById("totalTaxAmount")===null){return D}if(document.getElementById("totalTaxAmount").textContent.length===0){D=document.getElementById("total_amount").value}else{D=document.getElementById("totalTaxAmount").textContent.split(" ").pop()}return D}function h(){var D=false;if(A()){if(d('input[id$="contribution-installments"]').length!==0&&d('input[id$="contribution-installments"]').val()>1){D=true}}if(document.getElementById("is_recur")!==null){if(document.getElementById("is_recur").type=="hidden"){D=(document.getElementById("is_recur").value==1)}else{D=Boolean(document.getElementById("is_recur").checked)}}else{if(d('input[name="auto_renew"]').length!==0){if(d('input[name="auto_renew"]').prop("checked")){D=true}else{if(document.getElementById("auto_renew").type=="hidden"){D=(document.getElementById("auto_renew").value==1)}else{D=Boolean(document.getElementById("auto_renew").checked)}}}}g("isRecur is "+D);return D}function k(E){if(E.empty){d("div#card-errors").hide()}else{if(E.error){j(E.error)}else{if(E.complete){d("div#card-errors").hide();var D=document.getElementById("billing_postal_code-"+CRM.vars.stripe.billingAddressID);if(D){D.value=E.value.postalCode}}}}}function p(){cividiscountElements=c.querySelectorAll("input#discountcode");var D=function(E){if(E.keyCode===13){E.preventDefault();g("adding submitdontprocess");c.dataset.submitdontprocess=true}};for(i=0;i<cividiscountElements.length;++i){cividiscountElements[i].addEventListener("keydown",D)}}function e(){d("div.label span.crm-marker").each(function(){d(this).closest("div").next("div").find("input").addClass("required")});var D=d(c).validate();D.settings.errorClass="crm-inline-error alert alert-danger";D.settings.ignore=".select2-offscreen, [readonly], :hidden:not(.crm-select2)"}function a(){if((document.getElementById("additional_participants")!==null)&&(document.getElementById("additional_participants").value.length!==0)){g("We don't know the final price - registering additional participants");return true}return false}function g(D){if((typeof(CRM.vars.stripe)==="undefined")||(Boolean(CRM.vars.stripe.jsDebug)===true)){console.log(new Date().toISOString()+" civicrm_stripe.js: "+D)}}function v(E){var D=null;if(document.getElementById("action")!==null){D=document.getElementById("action")}else{D=document.createElement("input")}D.setAttribute("type","hidden");D.setAttribute("name","op");D.setAttribute("id","action");D.setAttribute("value",E);c.appendChild(D)}function m(){if((typeof c==="undefined")||(!c)){c=l();if(!c){return null}}var D=c.querySelector('input[name="payment_processor_id"]:checked');if(D!==null){return parseInt(D.value)}return null}});
\ No newline at end of file
CRM.$(function(d){g("civicrm_stripe loaded, dom-ready function firing.");if(window.civicrmStripeHandleReload){g("calling existing civicrmStripeHandleReload.");window.civicrmStripeHandleReload();return}var s;var b;var c;var w;var q=false;window.onbeforeunload=null;window.civicrmStripeHandleReload=function(){g("civicrmStripeHandleReload");var D=document.getElementById("card-element");if((typeof D!=="undefined")&&(D)){if(!D.children.length){g("checkAndLoad from document.ready");o()}}g("reload completed.");d(c).trigger("crmBillingFormReloadComplete")};window.civicrmStripeHandleReload();function x(F,D){g(F+": success - submitting form");var E=document.createElement("input");E.setAttribute("type","hidden");E.setAttribute("name",F);E.setAttribute("value",D.id);c.appendChild(E);c.submit()}function r(){for(i=0;i<w.length;++i){w[i].setAttribute("disabled",true)}return c.submit()}function j(E){g("error: "+E.message);var D=document.getElementById("card-errors");D.style.display="block";D.textContent=E.message;document.querySelector("#billing-payment-block").scrollIntoView();window.scrollBy(0,-50);c.dataset.submitted=false;for(i=0;i<w.length;++i){w[i].removeAttribute("disabled")}}function B(){g("handle card payment");s.createPaymentMethod("card",b).then(function(D){if(D.error){j(D.error)}else{if(h()||a()){x("paymentMethodID",D.paymentMethod)}else{var E=CRM.url("civicrm/stripe/confirm-payment");d.post(E,{payment_method_id:D.paymentMethod.id,amount:t().toFixed(2),currency:CRM.vars.stripe.currency,id:CRM.vars.stripe.id,description:document.title,csrfToken:CRM.vars.stripe.csrfToken}).then(function(F){y(F)})}}})}function y(D){g("handleServerResponse");if(D.error){j(D.error)}else{if(D.requires_action){u(D)}else{x("paymentIntentID",D.paymentIntent)}}}function u(D){s.handleCardAction(D.payment_intent_client_secret).then(function(E){if(E.error){j(E.error)}else{x("paymentIntentID",E.paymentIntent)}})}d(document).ajaxComplete(function(F,G,E){if((E.url.match("civicrm(/|%2F)payment(/|%2F)form")!==null)||(E.url.match("civicrm(/|%2F)contact(/|%2F)view(/|%2F)participant")!==null)){if(typeof CRM.vars.stripe==="undefined"){return}var D=m();if(D!==null){if(D!==parseInt(CRM.vars.stripe.id)){g("payment processor changed to id: "+D);if(D===0){return n()}CRM.api3("PaymentProcessor","getvalue",{"return":"user_name",id:D,payment_processor_type_id:CRM.vars.stripe.paymentProcessorTypeID}).done(function(H){var I=H.result;if(I){g("Setting new stripe key to: "+I);CRM.vars.stripe.publishableKey=I}else{return n()}g("checkAndLoad from ajaxComplete");o()})}}}});function n(){g("New payment processor is not Stripe, clearing CRM.vars.stripe");if((typeof b!=="undefined")&&(b)){g("destroying card element");b.destroy();b=undefined}delete (CRM.vars.stripe)}function o(){if(typeof CRM.vars.stripe==="undefined"){g("CRM.vars.stripe not defined! Not a Stripe processor?");return}if(typeof Stripe==="undefined"){if(q){return}q=true;g("Stripe.js is not loaded!");d.getScript("https://js.stripe.com/v3",function(){g("Script loaded and executed.");q=false;f()})}else{f()}}function f(){g("loadStripeBillingBlock");if(typeof s==="undefined"){s=Stripe(CRM.vars.stripe.publishableKey)}var K=s.elements({locale:CRM.vars.stripe.locale});var H={base:{fontSize:"20px"}};var E=document.getElementById("billing_postal_code-"+CRM.vars.stripe.billingAddressID).value;g("existing postcode: "+E);b=K.create("card",{style:H,value:{postalCode:E}});b.mount("#card-element");g("created new card element",b);if(document.getElementById("billing_postal_code-5").value){document.getElementById("billing_postal_code-5").setAttribute("disabled",true)}else{document.getElementsByClassName("billing_postal_code-"+CRM.vars.stripe.billingAddressID+"-section")[0].setAttribute("hidden",true)}b.addEventListener("change",function(L){k(L)});c=l();if(typeof c.length==="undefined"||c.length===0){g("No billing form!");return}e();w=C();c.dataset.submitdontprocess=false;var D=c.querySelectorAll('[type="submit"][formnovalidate="1"], [type="submit"][formnovalidate="formnovalidate"], [type="submit"].cancel, [type="submit"].webform-previous'),G;for(G=0;G<D.length;++G){D[G].addEventListener("click",J())}function J(){g("adding submitdontprocess");c.dataset.submitdontprocess=true}for(G=0;G<w.length;++G){w[G].addEventListener("click",F)}function F(L){if(c.dataset.submitted===true){return}c.dataset.submitted=true;if(typeof CRM.vars.stripe==="undefined"){return r()}g("clearing submitdontprocess");c.dataset.submitdontprocess=false;return I(L)}for(G=0;G<w.length;++G){w[G].removeAttribute("onclick")}p();if(A()){d("[type=submit]").click(function(){v(this.value)});c.addEventListener("keydown",function(L){if(L.keyCode===13){v(this.value);I(event)}});d("#billingcheckbox:input").hide();d('label[for="billingcheckbox"]').hide()}function I(N){N.preventDefault();g("submit handler");if(d(c).valid()===false){g("Form not valid");d("div#card-errors").hide();document.querySelector("#billing-payment-block").scrollIntoView();window.scrollBy(0,-50);d(c).trigger("crmBillingFormNotValid");return false}if(typeof CRM.vars.stripe==="undefined"){g("Submitting - not a stripe processor");return true}if(c.dataset.submitted===true){g("form already submitted");return false}var P=parseInt(CRM.vars.stripe.id);var M=null;if(A()){if(!d('input[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]').length){M=P}else{M=parseInt(c.querySelector('input[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]:checked').value)}}else{if((c.querySelector(".crm-section.payment_processor-section")!==null)||(c.querySelector(".crm-section.credit_card_info-section")!==null)){P=CRM.vars.stripe.id;if(c.querySelector('input[name="payment_processor_id"]:checked')!==null){M=parseInt(c.querySelector('input[name="payment_processor_id"]:checked').value)}}}if((M===0)||(P===null)||((M===null)&&(P===null))){g("Not a Stripe transaction, or pay-later");return r()}else{g("Stripe is the selected payprocessor")}if(typeof CRM.vars.stripe.publishableKey==="undefined"){g("submit missing stripe-pub-key element or value");return true}if(c.dataset.submitdontprocess===true){g("non-payment submit detected - not submitting payment");return true}if(A()){if(d("#billing-payment-block").is(":hidden")){g("no payment processor on webform");return true}var O=d('[name="submitted[civicrm_1_contribution_1_contribution_payment_processor_id]"]');if(O.length){if(O.filter(":checked").val()==="0"||O.filter(":checked").val()===0){g("no payment processor selected");return true}}}var L=t();if(L===0){g("Total amount is 0");return r()}if(c.dataset.submitted===true){alert("Form already submitted. Please wait.");return false}else{c.dataset.submitted=true}for(G=0;G<w.length;++G){w[G].setAttribute("disabled",true)}B();return true}}function A(){if(c!==null){return c.classList.contains("webform-client-form")||c.classList.contains("webform-submission-form")}return false}function l(){var D=d("div#card-element").closest("form").prop("id");if((typeof D==="undefined")||(!D.length)){D=d("input[name=hidden_processor]").closest("form").prop("id")}return document.getElementById(D)}function C(){var D=null;if(A()){D=c.querySelectorAll('[type="submit"].webform-submit');if(!D){D=c.querySelectorAll('[type="submit"].webform-button--submit')}}else{D=c.querySelectorAll('[type="submit"].validate')}return D}function t(){var D=0;if(a()){D=null}else{if(document.getElementById("totalTaxAmount")!==null){D=parseFloat(z());g("Calculated amount using internal calculateTaxAmount()")}else{if(typeof calculateTotalFee=="function"){D=parseFloat(calculateTotalFee())}else{if(A()){d(".line-item:visible","#wf-crm-billing-items").each(function(){D+=parseFloat(d(this).data("amount"))})}else{if(document.getElementById("total_amount")){D=parseFloat(document.getElementById("total_amount").value)}}}}}g("getTotalAmount: "+D);return D}function z(){var D=0;if(document.getElementById("totalTaxAmount")===null){return D}if(document.getElementById("totalTaxAmount").textContent.length===0){D=document.getElementById("total_amount").value}else{D=document.getElementById("totalTaxAmount").textContent.split(" ").pop()}return D}function h(){var D=false;if(A()){if(d('input[id$="contribution-installments"]').length!==0&&d('input[id$="contribution-installments"]').val()>1){D=true}}if(document.getElementById("is_recur")!==null){if(document.getElementById("is_recur").type=="hidden"){D=(document.getElementById("is_recur").value==1)}else{D=Boolean(document.getElementById("is_recur").checked)}}else{if(d('input[name="auto_renew"]').length!==0){if(d('input[name="auto_renew"]').prop("checked")){D=true}else{if(document.getElementById("auto_renew").type=="hidden"){D=(document.getElementById("auto_renew").value==1)}else{D=Boolean(document.getElementById("auto_renew").checked)}}}}g("isRecur is "+D);return D}function k(E){if(E.empty){d("div#card-errors").hide()}else{if(E.error){j(E.error)}else{if(E.complete){d("div#card-errors").hide();var D=document.getElementById("billing_postal_code-"+CRM.vars.stripe.billingAddressID);if(D){D.value=E.value.postalCode}}}}}function p(){cividiscountElements=c.querySelectorAll("input#discountcode");var D=function(E){if(E.keyCode===13){E.preventDefault();g("adding submitdontprocess");c.dataset.submitdontprocess=true}};for(i=0;i<cividiscountElements.length;++i){cividiscountElements[i].addEventListener("keydown",D)}}function e(){d("div.label span.crm-marker").each(function(){d(this).closest("div").next("div").find("input").addClass("required")});var D=d(c).validate();D.settings.errorClass="crm-inline-error alert alert-danger";D.settings.ignore=".select2-offscreen, [readonly], :hidden:not(.crm-select2)"}function a(){if((document.getElementById("additional_participants")!==null)&&(document.getElementById("additional_participants").value.length!==0)){g("We don't know the final price - registering additional participants");return true}return false}function g(D){if((typeof(CRM.vars.stripe)==="undefined")||(Boolean(CRM.vars.stripe.jsDebug)===true)){console.log(new Date().toISOString()+" civicrm_stripe.js: "+D)}}function v(E){var D=null;if(document.getElementById("action")!==null){D=document.getElementById("action")}else{D=document.createElement("input")}D.setAttribute("type","hidden");D.setAttribute("name","op");D.setAttribute("id","action");D.setAttribute("value",E);c.appendChild(D)}function m(){if((typeof c==="undefined")||(!c)){c=l();if(!c){return null}}var D=c.querySelector('input[name="payment_processor_id"]:checked');if(D!==null){return parseInt(D.value)}return null}});
\ No newline at end of file
mkdocs.yml
+ 1
− 0
View file @ 85aac1ef
......@@ -25,6 +25,7 @@ nav:
- Recurring Contributions (Subscriptions): recur.md
- Advanced:
- API: api.md
- Events (jQuery): events.md
- Hooks: hooks.md
- Testing: testing.md
- Release Notes: release/release_notes.md
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment