Payment Form Javascript

CMS_CustomSubmit

This event will be triggered after a reCaptcha v3 validation (instead of the regular `submit` event), allowing you to add any additional validation actions (or other custom functions) and stop the regular form submit via event.preventDefault().
This is helpful for performing an AJAX submission of the form (along with already validated reCaptcha token and payment data).

Returned data:

Example from a Stripe transaction.

{
	"form": [form Object],
	"paymentMethod": {
		"id": "pm_1Il7u9433Ww5sV49gBZgIjEO",
		"object": "payment_method",
		"billing_details": {
			"address": {
				"city": null,
				"country": null,
				"line1": null,
				"line2": null,
				"postal_code": null,
				"state": null
			},
			"email": "test@testing.com",
			"name": null,
			"phone": null
		},
		"card": {
			"brand": "visa",
			"checks": {
				"address_line1_check": null,
				"address_postal_code_check": null,
				"cvc_check": null
			},
			"country": "US",
			"exp_month": 4,
			"exp_year": 2024,
			"funding": "credit",
			"generated_from": null,
			"last4": "4242",
			"networks": {
				"available": [
					"visa"
				],
				"preferred": null
			},
			"three_d_secure_usage": {
				"supported": true
			},
			"wallet": null
		},
		"created": 1619595234,
		"customer": null,
		"livemode": false,
		"type": "card"
	}
}

Example usage:

var myForm = document.getElementById("myFormId");

myForm.addEventListener("CMS_CustomSubmit", function(event) {
    var data = event.data;
    console.log("Event data: ", data);
    
    event.preventDefault();

    // perform ajax form submit or other functions here...
});

AJAX Requests & Bambora EU Gateway:

If submitting the form via AJAX, remember to append the &jsonResponse=1 to your form’s action attribute.

However, if using the Bambora EU payment gateway (when payment type is set to Credit Card), the action (or AJAX request path) needs to be set to /bambora/token?form=myFormAlias. Where `myFormAlias` is to be the actual alias of your form.

CMS_triggerHandlePayment

Allows you to continue submitting any payment data after interception by the CMS_CustomSubmit event.

event.data should be taken from CMS_CustomSubmit event.
responseObject is a response data that was returned from a custom AJAX form submit (if such was applicable). If no ajax submit was performed, data will be `null`.
All payments for submits are powered by AJAX validation. Errors will be shown via an alert function.

Send data:

{
    "submitData": event.data,
    "response": responseObject 
}

Example usage:

var myForm = document.getElementById("myFormId");

myForm.addEventListener("CMS_CustomSubmit", function(event) {
    var data = event.data;
    console.log("CMS_CustomSubmit", data);

    event.preventDefault();

    // perform ajax form submit or other functions here...
    
    // send trigger in order to finalize payment
    var trigger = new Event('CMS_triggerHandlePayment');
    trigger.data = {
        "submitData": data,
        "response": response
    };
    data.form.dispatchEvent(trigger);
});

CMS_AfterFormPaymentHandled

Allows you to work with the response from the submitted payment request and add your own customisations before the form redirect is actioned.

Event is triggered once payment was made successfully OR if next step is a redirect to payment provider (BamboraEU (redirect) setup or Paypal Payment_Method) or to 3D Secure page (Stripe).

Returned data:

{
    "FormRedirectLink" : "",
    "LinkType": "3DSecure|SuccessPage|PaymentRedirect",
    "Response": object
}

Example usage:

var myForm = document.getElementById("myFormId");

myForm.addEventListener("CMS_AfterFormPaymentHandled", function(event) {
    console.log("CMS_AfterFormPaymentHandled", event.data);
    // do some stuff here before the FormRedirect

    if (event.data.LinkType == "3DSecure") {
        // for stripe
        var paymentID = extractGetparamFromURL(event.data.FormRedirectLink, "payment_intent");

        // do any stuff before redirect.
        // For example, submit a custom module item, set as disabled, with paymentID assigned.
        // Then on form success page you could update that item which could be found by {{this.order.paymentIntentId}}
        window.location = event.data.FormRedirectLink;
    } else if (event.data.LinkType == "PaymentRedirect") {
        // for paypal flow redirect
        var paymentID = extractGetparamFromURL(event.data.FormRedirectLink, "token");
        // for BamboraEU (Redirect)
        var paymentID = extractGetparamFromURL(event.data.FormRedirectLink, "customOrderId");

        // do any stuff before redirect.
        // For example, submit a custom module item, set as disabled, with paymentID assigned.
        // Then on form success page you could update that item which could be found by {{this.order.paymentIntentId}} (for paypal) or {{request.request_url.params['customOrderId']}} (for for BamboraEU (Redirect))
        window.location = event.data.FormRedirectLink;
    } else {
        // do any stuff before redirect.
        // For example, submit a custom module item, set as enabled.
        window.location = event.data.FormRedirectLink;
    }
});