Edit File by line

/* global Stripe, wpforms, wpforms_settings, wpforms_stripe, WPForms */

[0] Fix | Delete

[1] Fix | Delete

'use strict';

[2] Fix | Delete

[3] Fix | Delete

/**

[4] Fix | Delete

* WPForms Stripe Elements function.

[5] Fix | Delete

[6] Fix | Delete

* @since 1.8.2

[7] Fix | Delete

[8] Fix | Delete

var WPFormsStripeElements = window.WPFormsStripeElements || ( function( document, window, $ ) {

[9] Fix | Delete

[10] Fix | Delete

/**

[11] Fix | Delete

* Public functions and properties.

[12] Fix | Delete

[13] Fix | Delete

* @since 1.8.2

[14] Fix | Delete

[15] Fix | Delete

* @type {object}

[16] Fix | Delete

[17] Fix | Delete

const app = {

[18] Fix | Delete

[19] Fix | Delete

stripe: null,

[20] Fix | Delete

[21] Fix | Delete

/**

[22] Fix | Delete

* Number of page locked to switch.

[23] Fix | Delete

[24] Fix | Delete

* @since 1.8.2

[25] Fix | Delete

[26] Fix | Delete

* @type {int}

[27] Fix | Delete

[28] Fix | Delete

lockedPageToSwitch: 0,

[29] Fix | Delete

[30] Fix | Delete

/**

[31] Fix | Delete

* Start the engine.

[32] Fix | Delete

[33] Fix | Delete

* @since 1.8.2

[34] Fix | Delete

[35] Fix | Delete

init: function() {

[36] Fix | Delete

[37] Fix | Delete

app.stripe = Stripe( // eslint-disable-line new-cap

[38] Fix | Delete

wpforms_stripe.publishable_key,

[39] Fix | Delete

{ 'locale': wpforms_stripe.data.element_locale }

[40] Fix | Delete

);

[41] Fix | Delete

[42] Fix | Delete

$( document ).on( 'wpformsReady', function() {

[43] Fix | Delete

$( '.wpforms-stripe form' )

[44] Fix | Delete

.filter( ( _, form ) => typeof $( form ).data( 'formid' ) === 'number' ) // filter out forms which are locked (formid changed to 'locked-...').

[45] Fix | Delete

.each( app.setupStripeForm );

[46] Fix | Delete

} );

[47] Fix | Delete

[48] Fix | Delete

$( document ).on( 'wpformsBeforePageChange', app.pageChange );

[49] Fix | Delete

[50] Fix | Delete

[51] Fix | Delete

/**

[52] Fix | Delete

* Setup and configure a Stripe form.

[53] Fix | Delete

[54] Fix | Delete

* @since 1.8.2

[55] Fix | Delete

[56] Fix | Delete

setupStripeForm: function() {

[57] Fix | Delete

[58] Fix | Delete

let $form = $( this );

[59] Fix | Delete

[60] Fix | Delete

app.updateFormSubmitHandler( $form );

[61] Fix | Delete

[62] Fix | Delete

$form.on( 'wpformsAjaxSubmitActionRequired', app.handleCardActionCallback );

[63] Fix | Delete

[64] Fix | Delete

app.updateCardElementStylesModern( $form );

[65] Fix | Delete

[66] Fix | Delete

[67] Fix | Delete

/**

[68] Fix | Delete

* Setup, mount and configure Stripe Card Element.

[69] Fix | Delete

[70] Fix | Delete

* @since 1.8.2

[71] Fix | Delete

[72] Fix | Delete

* @param {jQuery} $form Form element.

[73] Fix | Delete

* @param {object} formValidator jQuery Validator object.

[74] Fix | Delete

[75] Fix | Delete

* @returns {card|void} Stripe Card element.

[76] Fix | Delete

[77] Fix | Delete

setupCardElement: function( $form, formValidator ) {

[78] Fix | Delete

[79] Fix | Delete

const $hiddenInput = $form.find( '.wpforms-stripe-credit-card-hidden-input' );

[80] Fix | Delete

[81] Fix | Delete

if ( ! $hiddenInput || $hiddenInput.length === 0 ) {

[82] Fix | Delete

return;

[83] Fix | Delete

}

[84] Fix | Delete

[85] Fix | Delete

let cardElement = $hiddenInput.data( 'stripe-element' );

[86] Fix | Delete

[87] Fix | Delete

if ( cardElement ) {

[88] Fix | Delete

return cardElement;

[89] Fix | Delete

}

[90] Fix | Delete

[91] Fix | Delete

let style = wpforms_stripe.data.element_style;

[92] Fix | Delete

[93] Fix | Delete

if ( $.isEmptyObject( style ) ) {

[94] Fix | Delete

style = app.getElementStyleDefault( $hiddenInput );

[95] Fix | Delete

}

[96] Fix | Delete

[97] Fix | Delete

let cardSettings = {

[98] Fix | Delete

classes : wpforms_stripe.data.element_classes,

[99] Fix | Delete

hidePostalCode: true,

[100] Fix | Delete

style : style,

[101] Fix | Delete

};

[102] Fix | Delete

[103] Fix | Delete

cardElement = app.stripe.elements().create( 'card', cardSettings );

[104] Fix | Delete

[105] Fix | Delete

cardElement.mount( $form.find( '.wpforms-field-stripe-credit-card-cardnumber' ).get( 0 ) );

[106] Fix | Delete

[107] Fix | Delete

cardElement.on( 'change', function( e ) {

[108] Fix | Delete

[109] Fix | Delete

if ( ! e.error ) {

[110] Fix | Delete

formValidator.hideThese( formValidator.errorsFor( $hiddenInput.get( 0 ) ) );

[111] Fix | Delete

return;

[112] Fix | Delete

}

[113] Fix | Delete

[114] Fix | Delete

let message = e.error.message;

[115] Fix | Delete

[116] Fix | Delete

if ( 'incomplete_number' === e.error.code || 'invalid_number' === e.error.code ) {

[117] Fix | Delete

message = wpforms_settings.val_creditcard;

[118] Fix | Delete

}

[119] Fix | Delete

[120] Fix | Delete

app.displayStripeError( $form, message );

[121] Fix | Delete

} );

[122] Fix | Delete

[123] Fix | Delete

$hiddenInput.data( 'stripe-element', cardElement );

[124] Fix | Delete

[125] Fix | Delete

return cardElement;

[126] Fix | Delete

[127] Fix | Delete

[128] Fix | Delete

/**

[129] Fix | Delete

* Get default styles for card settings.

[130] Fix | Delete

[131] Fix | Delete

* @since 1.8.2

[132] Fix | Delete

[133] Fix | Delete

* @param {jQuery} $hiddenInput Input element.

[134] Fix | Delete

[135] Fix | Delete

* @returns {object|void} Base styles.

[136] Fix | Delete

[137] Fix | Delete

getElementStyleDefault: function( $hiddenInput ) {

[138] Fix | Delete

[139] Fix | Delete

if ( ! $hiddenInput || $hiddenInput.length === 0 ) {

[140] Fix | Delete

return;

[141] Fix | Delete

}

[142] Fix | Delete

[143] Fix | Delete

const textColor = $hiddenInput.css( 'color' );

[144] Fix | Delete

const fontSize = $hiddenInput.css( 'font-size' );

[145] Fix | Delete

[146] Fix | Delete

const style = {

[147] Fix | Delete

base: {

[148] Fix | Delete

fontSize,

[149] Fix | Delete

color: textColor,

[150] Fix | Delete

'::placeholder': {

[151] Fix | Delete

color: textColor,

[152] Fix | Delete

fontSize,

[153] Fix | Delete

[154] Fix | Delete

[155] Fix | Delete

invalid: {

[156] Fix | Delete

color: textColor,

[157] Fix | Delete

[158] Fix | Delete

};

[159] Fix | Delete

[160] Fix | Delete

let fontFamily = $hiddenInput.css( 'font-family' );

[161] Fix | Delete

[162] Fix | Delete

const regExp = /[“”<>!@$%^&*=~`|{}[\]]/;

[163] Fix | Delete

[164] Fix | Delete

if ( regExp.test( fontFamily ) || fontFamily.indexOf( 'MS Shell Dlg' ) !== -1 ) {

[165] Fix | Delete

fontFamily = $( 'p' ).css( 'font-family' );

[166] Fix | Delete

}

[167] Fix | Delete

[168] Fix | Delete

if ( ! regExp.test( fontFamily ) ) {

[169] Fix | Delete

style.base.fontFamily = fontFamily;

[170] Fix | Delete

style.base[ '::placeholder' ].fontFamily = fontFamily;

[171] Fix | Delete

}

[172] Fix | Delete

[173] Fix | Delete

return style;

[174] Fix | Delete

[175] Fix | Delete

[176] Fix | Delete

/**

[177] Fix | Delete

* Update submitHandler for the forms containing Stripe.

[178] Fix | Delete

[179] Fix | Delete

* @since 1.8.2

[180] Fix | Delete

[181] Fix | Delete

* @param {jQuery} $form Form element.

[182] Fix | Delete

[183] Fix | Delete

updateFormSubmitHandler: function( $form ) {

[184] Fix | Delete

[185] Fix | Delete

let formValidator = $form.validate(),

[186] Fix | Delete

formSubmitHandler = formValidator.settings.submitHandler,

[187] Fix | Delete

cardElement = app.setupCardElement( $form, formValidator ),

[188] Fix | Delete

$stripeDiv = $form.find( '.wpforms-field-stripe-credit-card-cardnumber' );

[189] Fix | Delete

[190] Fix | Delete

// Replace the default submit handler.

[191] Fix | Delete

formValidator.settings.submitHandler = function() {

[192] Fix | Delete

[193] Fix | Delete

let valid = $form.validate().form(),

[194] Fix | Delete

ccEmpty = $stripeDiv.hasClass( wpforms_stripe.data.element_classes.empty ),

[195] Fix | Delete

ccRequired = $stripeDiv.data( 'required' ),

[196] Fix | Delete

condHidden = $stripeDiv.closest( '.wpforms-field-stripe-credit-card' ).hasClass( 'wpforms-conditional-hide' ),

[197] Fix | Delete

processCard = false;

[198] Fix | Delete

[199] Fix | Delete

if ( ! condHidden ) {

[200] Fix | Delete

processCard = ccRequired || ( ! ccEmpty && ! ccRequired );

[201] Fix | Delete

}

[202] Fix | Delete

[203] Fix | Delete

if ( valid && processCard ) {

[204] Fix | Delete

[205] Fix | Delete

$form.find( '.wpforms-submit' ).prop( 'disabled', true );

[206] Fix | Delete

app.createPaymentMethod( $form, cardElement, ccRequired, formSubmitHandler );

[207] Fix | Delete

[208] Fix | Delete

} else if ( valid ) {

[209] Fix | Delete

[210] Fix | Delete

// Form is valid, however no credit card to process.

[211] Fix | Delete

$form.find( '.wpforms-submit' ).prop( 'disabled', false );

[212] Fix | Delete

return formSubmitHandler( $form );

[213] Fix | Delete

[214] Fix | Delete

} else {

[215] Fix | Delete

[216] Fix | Delete

$form.find( '.wpforms-submit' ).prop( 'disabled', false );

[217] Fix | Delete

$form.validate().cancelSubmit = true;

[218] Fix | Delete

}

[219] Fix | Delete

};

[220] Fix | Delete

[221] Fix | Delete

[222] Fix | Delete

/**

[223] Fix | Delete

* Create a PaymentMethod out of card details provided.

[224] Fix | Delete

[225] Fix | Delete

* @since 1.8.2

[226] Fix | Delete

[227] Fix | Delete

* @param {jQuery} $form Form element.

[228] Fix | Delete

* @param {card} cardElement Stripe Card element.

[229] Fix | Delete

* @param {boolean} ccRequired Card field is required.

[230] Fix | Delete

* @param {Function} formSubmitHandler jQuery Validation SubmitHandler function.

[231] Fix | Delete

[232] Fix | Delete

createPaymentMethod: function( $form, cardElement, ccRequired, formSubmitHandler ) {

[233] Fix | Delete

[234] Fix | Delete

app.stripe.createPaymentMethod( 'card', cardElement, {

[235] Fix | Delete

billing_details: {

[236] Fix | Delete

name: $form.find( '.wpforms-field-stripe-credit-card-cardname' ).val(),

[237] Fix | Delete

[238] Fix | Delete

} ).then( function( result ) {

[239] Fix | Delete

[240] Fix | Delete

if ( result.error && ccRequired ) {

[241] Fix | Delete

$form.find( '.wpforms-submit' ).prop( 'disabled', false );

[242] Fix | Delete

app.displayStripeError( $form, result.error.message );

[243] Fix | Delete

$form.validate().cancelSubmit = true;

[244] Fix | Delete

return;

[245] Fix | Delete

}

[246] Fix | Delete

[247] Fix | Delete

if ( ! result.error ) {

[248] Fix | Delete

$form.find( '.wpforms-stripe-payment-method-id' ).remove();

[249] Fix | Delete

if ( result.paymentMethod ) {

[250] Fix | Delete

$form.append( '<input type="hidden" class="wpforms-stripe-payment-method-id" name="wpforms[payment_method_id]" value="' + result.paymentMethod.id + '">' );

[251] Fix | Delete

}

[252] Fix | Delete

}

[253] Fix | Delete

[254] Fix | Delete

formSubmitHandler( $form );

[255] Fix | Delete

} );

[256] Fix | Delete

[257] Fix | Delete

[258] Fix | Delete

/**

[259] Fix | Delete

* Handle 'action_required' server response.

[260] Fix | Delete

[261] Fix | Delete

* @param {object} e Event object.

[262] Fix | Delete

* @param {object} json Data returned form a server.

[263] Fix | Delete

[264] Fix | Delete

* @since 1.8.2

[265] Fix | Delete

[266] Fix | Delete

handleCardActionCallback: function( e, json ) {

[267] Fix | Delete

[268] Fix | Delete

const $form = $( this );

[269] Fix | Delete

[270] Fix | Delete

if ( json.success && json.data.action_required ) {

[271] Fix | Delete

app.stripe.handleCardPayment(

[272] Fix | Delete

json.data.payment_intent_client_secret

[273] Fix | Delete

).then( function( result ) {

[274] Fix | Delete

app.handleCardPaymentCallback( $form, result );

[275] Fix | Delete

} );

[276] Fix | Delete

}

[277] Fix | Delete

[278] Fix | Delete

[279] Fix | Delete

/**

[280] Fix | Delete

* Callback for Stripe 'handleCardPayment' method.

[281] Fix | Delete

[282] Fix | Delete

* @param {jQuery} $form Form element.

[283] Fix | Delete

* @param {object} result Data returned by 'handleCardPayment'.

[284] Fix | Delete

[285] Fix | Delete

* @since 1.8.2

[286] Fix | Delete

[287] Fix | Delete

handleCardPaymentCallback: function( $form, result ) {

[288] Fix | Delete

[289] Fix | Delete

if ( result.error ) {

[290] Fix | Delete

[291] Fix | Delete

app.formAjaxUnblock( $form );

[292] Fix | Delete

$form.find( '.wpforms-field-stripe-credit-card-cardnumber' ).addClass( wpforms_stripe.data.element_classes.invalid );

[293] Fix | Delete

app.displayStripeError( $form, result.error.message );

[294] Fix | Delete

[295] Fix | Delete

} else if ( result.paymentIntent && 'succeeded' === result.paymentIntent.status ) {

[296] Fix | Delete

[297] Fix | Delete

$form.find( '.wpforms-stripe-payment-method-id' ).remove();

[298] Fix | Delete

$form.find( '.wpforms-stripe-payment-intent-id' ).remove();

[299] Fix | Delete

$form.append( '<input type="hidden" class="wpforms-stripe-payment-intent-id" name="wpforms[payment_intent_id]" value="' + result.paymentIntent.id + '">' );

[300] Fix | Delete

wpforms.formSubmitAjax( $form );

[301] Fix | Delete

[302] Fix | Delete

} else {

[303] Fix | Delete

[304] Fix | Delete

app.formAjaxUnblock( $form );

[305] Fix | Delete

}

[306] Fix | Delete

[307] Fix | Delete

[308] Fix | Delete

/**

[309] Fix | Delete

* Display a field error using jQuery Validate library.

[310] Fix | Delete

[311] Fix | Delete

* @param {jQuery} $form Form element.

[312] Fix | Delete

* @param {object} message Error message.

[313] Fix | Delete

[314] Fix | Delete

* @since 1.8.2

[315] Fix | Delete

[316] Fix | Delete

displayStripeError: function( $form, message ) {

[317] Fix | Delete

[318] Fix | Delete

const fieldName = $form.find( '.wpforms-stripe-credit-card-hidden-input' ).attr( 'name' ),

[319] Fix | Delete

$stripeDiv = $form.find( '.wpforms-field-stripe-credit-card-cardnumber' );

[320] Fix | Delete

let errors = {};

[321] Fix | Delete

[322] Fix | Delete

errors[fieldName] = message;

[323] Fix | Delete

[324] Fix | Delete

wpforms.displayFormAjaxFieldErrors( $form, errors );

[325] Fix | Delete

[326] Fix | Delete

// Switch page for the multipage form.

[327] Fix | Delete

if ( ! $stripeDiv.is( ':visible' ) && $form.find( '.wpforms-page-indicator-steps' ).length > 0 ) {

[328] Fix | Delete

// Empty $json object needed to change the page to the first one.

[329] Fix | Delete

wpforms.setCurrentPage( $form, {} );

[330] Fix | Delete

}

[331] Fix | Delete

[332] Fix | Delete

wpforms.scrollToError( $stripeDiv );

[333] Fix | Delete

[334] Fix | Delete

[335] Fix | Delete

/**

[336] Fix | Delete

* Unblock the AJAX form.

[337] Fix | Delete

[338] Fix | Delete

* @since 1.8.2

[339] Fix | Delete

[340] Fix | Delete

* @param {jQuery} $form Form element.

[341] Fix | Delete

[342] Fix | Delete

formAjaxUnblock: function( $form ) {

[343] Fix | Delete

[344] Fix | Delete

let $container = $form.closest( '.wpforms-container' ),

[345] Fix | Delete

$spinner = $form.find( '.wpforms-submit-spinner' ),

[346] Fix | Delete

$submit = $form.find( '.wpforms-submit' ),

[347] Fix | Delete

submitText = $submit.data( 'submit-text' );

[348] Fix | Delete

[349] Fix | Delete

if ( submitText ) {

[350] Fix | Delete

$submit.text( submitText );

[351] Fix | Delete

}

[352] Fix | Delete

[353] Fix | Delete

$submit.prop( 'disabled', false );

[354] Fix | Delete

$container.css( 'opacity', '' );

[355] Fix | Delete

$spinner.hide();

[356] Fix | Delete

[357] Fix | Delete

[358] Fix | Delete

/**

[359] Fix | Delete

* Callback for a page changing.

[360] Fix | Delete

[361] Fix | Delete

* @since 1.8.2

[362] Fix | Delete

[363] Fix | Delete

* @param {Event} event Event.

[364] Fix | Delete

* @param {int} currentPage Current page.

[365] Fix | Delete

* @param {jQuery} $form Current form.

[366] Fix | Delete

* @param {string} action The navigation action.

[367] Fix | Delete

[368] Fix | Delete

pageChange: function( event, currentPage, $form, action ) {

[369] Fix | Delete

[370] Fix | Delete

const $stripeDiv = $form.find( '.wpforms-field-stripe-credit-card-cardnumber' ),

[371] Fix | Delete

ccComplete = $stripeDiv.hasClass( wpforms_stripe.data.element_classes.complete ),

[372] Fix | Delete

ccEmpty = $stripeDiv.hasClass( wpforms_stripe.data.element_classes.empty ),

[373] Fix | Delete

ccInvalid = $stripeDiv.hasClass( wpforms_stripe.data.element_classes.invalid );

[374] Fix | Delete

[375] Fix | Delete

// Stop navigation through page break pages.

[376] Fix | Delete

if (

[377] Fix | Delete

! $stripeDiv.is( ':visible' ) ||

[378] Fix | Delete

( ! $stripeDiv.data( 'required' ) && ccEmpty ) ||

[379] Fix | Delete

( app.lockedPageToSwitch && app.lockedPageToSwitch !== currentPage ) ||

[380] Fix | Delete

action === 'prev'

[381] Fix | Delete

) {

[382] Fix | Delete

return;

[383] Fix | Delete

}

[384] Fix | Delete

[385] Fix | Delete

if ( ccComplete ) {

[386] Fix | Delete

$stripeDiv.find( '.wpforms-error' ).remove();

[387] Fix | Delete

[388] Fix | Delete

return;

[389] Fix | Delete

}

[390] Fix | Delete

[391] Fix | Delete

app.lockedPageToSwitch = currentPage;

[392] Fix | Delete

[393] Fix | Delete

event.preventDefault();

[394] Fix | Delete

[395] Fix | Delete

if ( ccInvalid ) {

[396] Fix | Delete

return;

[397] Fix | Delete

}

[398] Fix | Delete

[399] Fix | Delete

app.displayStripeError( $form, wpforms_stripe.i18n.empty_details );

[400] Fix | Delete

[401] Fix | Delete

[402] Fix | Delete

/**

[403] Fix | Delete

* Get CSS property value.

[404] Fix | Delete

* In case of exception return empty string.

[405] Fix | Delete

[406] Fix | Delete

* @since 1.8.6

[407] Fix | Delete

[408] Fix | Delete

* @param {jQuery} $element Element.

[409] Fix | Delete

* @param {string} property Property.

[410] Fix | Delete

[411] Fix | Delete

* @return {string} Property value.

[412] Fix | Delete

[413] Fix | Delete

getCssPropertyValue( $element, property ) {

[414] Fix | Delete

try {

[415] Fix | Delete

return $element.css( property );

[416] Fix | Delete

} catch ( e ) {

[417] Fix | Delete

return '';

[418] Fix | Delete

}

[419] Fix | Delete

[420] Fix | Delete

[421] Fix | Delete

/**

[422] Fix | Delete

* Update Card Element styles in Modern Markup mode.

[423] Fix | Delete

[424] Fix | Delete

* @since 1.8.2

[425] Fix | Delete

[426] Fix | Delete

* @param {jQuery} $form Form object.

[427] Fix | Delete

[428] Fix | Delete

updateCardElementStylesModern( $form ) {

[429] Fix | Delete

// Should work only in Modern Markup mode.

[430] Fix | Delete

if ( ! window.WPForms || ! WPForms.FrontendModern || ! $.isEmptyObject( wpforms_stripe.data.element_style ) ) {

[431] Fix | Delete

return;

[432] Fix | Delete

}

[433] Fix | Delete

[434] Fix | Delete

if ( ! $form || $form.length === 0 ) {

[435] Fix | Delete

return;

[436] Fix | Delete

}

[437] Fix | Delete

[438] Fix | Delete

$form.find( '.wpforms-stripe-credit-card-hidden-input' ).each( function() {

[439] Fix | Delete

const $hiddenInput = $( this );

[440] Fix | Delete

const cardElement = $hiddenInput.data( 'stripe-element' );

[441] Fix | Delete

[442] Fix | Delete

const inputStyle = {

[443] Fix | Delete

fontSize: app.getCssPropertyValue( $hiddenInput, 'font-size' ),

[444] Fix | Delete

colorText: app.getCssPropertyValue( $hiddenInput, 'color' ),

[445] Fix | Delete

};

[446] Fix | Delete

[447] Fix | Delete

if ( ! cardElement ) {

[448] Fix | Delete

return;

[449] Fix | Delete

}

[450] Fix | Delete

[451] Fix | Delete

const styles = {

[452] Fix | Delete

base: {

[453] Fix | Delete

color: inputStyle.colorText,

[454] Fix | Delete

fontSize: inputStyle.fontSize,

[455] Fix | Delete

'::placeholder': {

[456] Fix | Delete

color: WPForms.FrontendModern.getColorWithOpacity( inputStyle.colorText, '0.5' ),

[457] Fix | Delete

fontSize: inputStyle.fontSize,

[458] Fix | Delete

[459] Fix | Delete

[460] Fix | Delete

invalid: {

[461] Fix | Delete

color: inputStyle.colorText,

[462] Fix | Delete

[463] Fix | Delete

};

[464] Fix | Delete

[465] Fix | Delete

cardElement.update( { style: styles } );

[466] Fix | Delete

} );

[467] Fix | Delete

[468] Fix | Delete

};

[469] Fix | Delete

[470] Fix | Delete

// Provide access to public functions/properties.

[471] Fix | Delete

return app;

[472] Fix | Delete

[473] Fix | Delete

}( document, window, jQuery ) );

[474] Fix | Delete

[475] Fix | Delete

// Initialize.

[476] Fix | Delete

WPFormsStripeElements.init();

[477] Fix | Delete

[478] Fix | Delete