| Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/webitects_2_2stepB.js |
| — | — | @@ -0,0 +1,215 @@ |
| | 2 | +/* |
| | 3 | + * The following variable are declared inline in webitects_2_3step.html: |
| | 4 | + * amountErrors, billingErrors, paymentErrors, scriptPath, actionURL |
| | 5 | + */ |
| | 6 | +$( document ).ready( function () { |
| | 7 | + |
| | 8 | + // check for RapidHtml errors and display, if any |
| | 9 | + var amountErrorString = "", |
| | 10 | + billingErrorString = "", |
| | 11 | + paymentErrorString = ""; |
| | 12 | + |
| | 13 | + // generate formatted errors to display |
| | 14 | + var temp = []; |
| | 15 | + for ( var e in amountErrors ) |
| | 16 | + if ( amountErrors[e] != "" ) |
| | 17 | + temp[temp.length] = amountErrors[e]; |
| | 18 | + amountErrorString = temp.join( "<br />" ); |
| | 19 | + |
| | 20 | + temp = []; |
| | 21 | + for ( var f in billingErrors ) |
| | 22 | + if ( billingErrors[f] != "" ) |
| | 23 | + temp[temp.length] = billingErrors[f]; |
| | 24 | + billingErrorString = temp.join( "<br />" ); |
| | 25 | + |
| | 26 | + temp = []; |
| | 27 | + for ( var g in paymentErrors ) |
| | 28 | + if ( paymentErrors[g] != "" ) |
| | 29 | + temp[temp.length] = paymentErrors[g]; |
| | 30 | + paymentErrorString = temp.join( "<br />" ); |
| | 31 | + |
| | 32 | + // show the errors |
| | 33 | + var prevError = false; |
| | 34 | + if ( amountErrorString != "" ) { |
| | 35 | + $( "#amtErrorMessages" ).html( amountErrorString ); |
| | 36 | + prevError = true; |
| | 37 | + showStep2(); // init the headers |
| | 38 | +// showStep3(); |
| | 39 | + showStep1(); // should be default, but ensure |
| | 40 | + } |
| | 41 | + if ( billingErrorString != "" ) { |
| | 42 | + $( "#billingErrorMessages" ).html( billingErrorString ); |
| | 43 | + if ( !prevError ) { |
| | 44 | + showStep1(); // init the headers |
| | 45 | +// showStep3(); |
| | 46 | + showStep2(); |
| | 47 | + prevError = true; |
| | 48 | + } |
| | 49 | + showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show |
| | 50 | + } |
| | 51 | + if ( paymentErrorString != "" ) { |
| | 52 | + $( "#paymentErrorMessages" ).html( paymentErrorString ); |
| | 53 | + if ( !prevError ) { |
| | 54 | + showStep1(); // init the headers |
| | 55 | + showStep2(); |
| | 56 | +// showStep3(); |
| | 57 | + } |
| | 58 | + showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show |
| | 59 | + } |
| | 60 | + |
| | 61 | + $( "#cc" ).click( function() { |
| | 62 | + if ( validateAmount() ) { |
| | 63 | + showAmount( $( 'input[name="amount"]' ) ); |
| | 64 | + showStep2(); |
| | 65 | + } |
| | 66 | + } ); |
| | 67 | + |
| | 68 | + $( "#pp" ).click( function() { |
| | 69 | + if ( validateAmount() ) { |
| | 70 | + // set the action to go to PayPal |
| | 71 | + $( 'input[name="gateway"]' ).val( "paypal" ); |
| | 72 | + $( 'input[name="PaypalRedirect"]' ).val( "1" ); |
| | 73 | + $( "#loading" ).html( "<img src=" + scriptPath + "'/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/images/loading-white.gif' /> Redirecting to PayPal…" ); |
| | 74 | + document.paypalcontribution.action = actionURL; |
| | 75 | + document.paypalcontribution.submit(); |
| | 76 | + } |
| | 77 | + } ); |
| | 78 | +// $( "#paymentContinueBtn" ).live( "click", function() { |
| | 79 | +// if ( validate_personal( document.paypalcontribution ) ) { |
| | 80 | +// showStep3(); |
| | 81 | +// } |
| | 82 | +// } ); |
| | 83 | + // Set the cards to progress to step 3 |
| | 84 | +// $( ".cardradio" ).live( "click", function() { |
| | 85 | +// if ( validate_personal( document.paypalcontribution ) ) { |
| | 86 | +// showStep3(); |
| | 87 | +// } |
| | 88 | +// else { |
| | 89 | + // show the continue button to indicate how to get to step 3 since they |
| | 90 | + // have already clicked on a card image |
| | 91 | +// $( "#paymentContinue" ).show(); |
| | 92 | +// } |
| | 93 | +// } ); |
| | 94 | + |
| | 95 | + $( "#submitcreditcard" ).click( function() { |
| | 96 | + if ( validate_personal( document.paypalcontribution ) ) { |
| | 97 | + if ( validate_cc() ){ |
| | 98 | + // set the hidden expiration date input from the two selects |
| | 99 | + $( 'input[name="expiration"]' ).val( |
| | 100 | + $( 'select[name="mos"]' ).val() + $( 'select[name="year"]' ).val().substring( 2, 4 ) |
| | 101 | + ); |
| | 102 | + document.paypalcontribution.action = actionURL; |
| | 103 | + document.paypalcontribution.submit(); |
| | 104 | + } |
| | 105 | + } |
| | 106 | + return false; |
| | 107 | + } ); |
| | 108 | + // init all of the header actions |
| | 109 | + $( "#step1header" ).click( function() { |
| | 110 | + showStep1(); |
| | 111 | + } ); |
| | 112 | + $( "#step2header" ).click( function() { |
| | 113 | + showStep2(); |
| | 114 | + } ); |
| | 115 | + // Set selected amount to amount |
| | 116 | + $( 'input[name="amountRadio"]' ).click( function() { |
| | 117 | + setAmount( $( this ) ); |
| | 118 | + } ); |
| | 119 | + // reset the amount field when "other" is changed |
| | 120 | + $( "#other-amount" ).change( function() { |
| | 121 | + setAmount( $( this ) ); |
| | 122 | + } ); |
| | 123 | + |
| | 124 | + // show the CVV help image on click |
| | 125 | + $( "#where" ).click( function() { |
| | 126 | + $( "#codes" ).toggle(); |
| | 127 | + return false; |
| | 128 | + } ); |
| | 129 | + |
| | 130 | +} ); |
| | 131 | + |
| | 132 | +function showStep1() { |
| | 133 | + // show the correct sections |
| | 134 | + $( "#step1wrapper" ).slideDown(); |
| | 135 | + $( "#step2wrapper" ).slideUp(); |
| | 136 | + $( "#change-amount" ).hide(); |
| | 137 | + $( "#change-billing" ).show(); |
| | 138 | + $( "#step1header" ).show(); // just in case |
| | 139 | +} |
| | 140 | + |
| | 141 | +function showStep2() { |
| | 142 | + // show the correct sections |
| | 143 | + $( "#step1wrapper" ).slideUp(); |
| | 144 | + $( "#step2wrapper" ).slideDown(); |
| | 145 | + $( "#change-amount" ).show(); |
| | 146 | + $( "#change-billing" ).hide(); |
| | 147 | + $( "#step2header" ).show(); // just in case |
| | 148 | +} |
| | 149 | + |
| | 150 | +// Fix behavior of images in labels |
| | 151 | +// TODO: check that disabling this is okay in things other than Chrome |
| | 152 | +// $("label img").live("click", function() { $("#" + $(this).parents( "label" ).attr( "for" )).click(); }); |
| | 153 | + |
| | 154 | +// set the hidden amount input to the value of the selected element |
| | 155 | +function setAmount( e ) { |
| | 156 | + $( 'input[name="amount"]' ).val( e.val() ); |
| | 157 | +} |
| | 158 | +// Display selected amount |
| | 159 | +function showAmount( e ) { |
| | 160 | + $( "#selected-amount" ).html( "$" + e.val() + "" ); |
| | 161 | + $( "#change-amount" ).show(); |
| | 162 | +} |
| | 163 | +function validateAmount() { |
| | 164 | + var error = true; |
| | 165 | + var amount = $( 'input[name="amount"]' ).val(); // get the amount |
| | 166 | + // Normalize weird amount formats. |
| | 167 | + // Don't mess with these unless you know what you're doing. |
| | 168 | + amount = amount.replace( /[,.](\d)$/, '\:$10' ); |
| | 169 | + amount = amount.replace( /[,.](\d)(\d)$/, '\:$1$2' ); |
| | 170 | + amount = amount.replace( /[,.]/g, '' ); |
| | 171 | + amount = amount.replace( /:/, '.' ); |
| | 172 | + $( 'input[name="amount"]' ).val( amount ); // set the new amount back into the form |
| | 173 | + |
| | 174 | + // Check amount is a real number, sets error as true (good) if no issues |
| | 175 | + error = ( amount == null || isNaN( amount ) || amount.value <= 0 ); |
| | 176 | + |
| | 177 | + // Check amount is at least the minimum |
| | 178 | + var currency_code = $( 'input[name="currency_code"]' ).val(); |
| | 179 | + if ( typeof( wgCurrencyMinimums[currency_code] ) == 'undefined' ) { |
| | 180 | + wgCurrencyMinimums[currency_code] = 1; |
| | 181 | + } |
| | 182 | + if ( amount < wgCurrencyMinimums[currency_code] || error ) { |
| | 183 | + alert( 'You must contribute at least $1'.replace( '$1', wgCurrencyMinimums[currency_code] + ' ' + currency_code ) ); |
| | 184 | + error = true; |
| | 185 | + } |
| | 186 | + return !error; |
| | 187 | +} |
| | 188 | + |
| | 189 | +function validate_cc() { |
| | 190 | + // reset the errors |
| | 191 | + $( "#paymentErrorMessages" ).html( '' ); |
| | 192 | + var error = false; |
| | 193 | + if ( $( 'input[name="card_num"]' ).val() == '' ) { |
| | 194 | + $( "#paymentErrorMessages" ).append( "Please enter a valid credit card number" ); |
| | 195 | + error = true; |
| | 196 | + } |
| | 197 | + if ( $( 'select[name="mos"]' ).val() == '' ) { |
| | 198 | + if ( $( "#paymentErrorMessages" ).html() != "" ) |
| | 199 | + $( "#paymentErrorMessages" ).append( "<br />" ); |
| | 200 | + $( "#paymentErrorMessages" ).append( "Please enter a valid month for the expiration date" ); |
| | 201 | + error = true; |
| | 202 | + } |
| | 203 | + if ( $( 'select[name="year"]' ).val() == '' ) { |
| | 204 | + if ( $( "#paymentErrorMessages" ).html() != "" ) |
| | 205 | + $( "#paymentErrorMessages" ).append( "<br />" ); |
| | 206 | + $( "#paymentErrorMessages" ).append( "Please enter a valid year for the expiration date" ); |
| | 207 | + error = true; |
| | 208 | + } |
| | 209 | + if ( $( 'input[name="cvv"]' ).val() == '' ) { |
| | 210 | + if ( $( "#paymentErrorMessages" ).html() != "" ) |
| | 211 | + $( "#paymentErrorMessages" ).append( "<br />" ); |
| | 212 | + $( "#paymentErrorMessages" ).append( "Please enter a valid security code" ); |
| | 213 | + error = true; |
| | 214 | + } |
| | 215 | + return !error; |
| | 216 | +} |
| \ No newline at end of file |
| Property changes on: trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/webitects_2_2stepB.js |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 217 | + native |
| Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/webitects_2_2stepB-US.html |
| — | — | @@ -1,5 +1,5 @@ |
| 2 | 2 | <script type="text/javascript"> |
| 3 | | - mw.loader.load('pfp.form.rapidhtml.webitects_2step'); |
| | 3 | + mw.loader.load('pfp.form.rapidhtml.webitects_2stepB'); |
| 4 | 4 | // these must go through RapidHTML and thus are inline |
| 5 | 5 | var amountErrors = ['#general|escape','#retryMsg|escape','#amount|escape']; |
| 6 | 6 | var billingErrors = ['#fname|escape','#lname|escape','#city|escape','#country|escape','#street|escape','#state|escape','#zip|escape','#emailAdd|escape']; |
| — | — | @@ -41,7 +41,7 @@ |
| 42 | 42 | <div id="donate"> |
| 43 | 43 | <div id="donate-content"> |
| 44 | 44 | <div id="donate-body" style="padding: 0 1em;"> |
| 45 | | - <div id="step1header"><h3>%donate_interface-amount-legend% <span id="selected-amount"></span> <span class="mute" id="change-amount" style="display: none;">(<a href="#">%donate_interface-change%</a>)</span></h3></div> |
| | 45 | + <div id="step1header"><h3>%donate_interface-amount-legend% <span id="selected-amount"></span> <span class="mute" id="change-amount" style="display: none;"> (<a href="#">%donate_interface-change%</a>)</span></h3></div> |
| 46 | 46 | |
| 47 | 47 | <form method="post" name="paypalcontribution"> |
| 48 | 48 | <div id="step1wrapper"> |
| — | — | @@ -106,8 +106,8 @@ |
| 107 | 107 | <!--<div id="step3wrapper" style="display: none;">--> |
| 108 | 108 | <div id="payment" class="gainlayout"> |
| 109 | 109 | <dl class="form"> |
| 110 | | - <dt><span class="label" style="display: inline-block; vertical-align: text-bottom; "><label for="card_num">Card number</label><img id="cardlogos" style="margin-left: 30px;" src="@script_path/extensions/DonationInterface/gateway_forms/includes/credit_card_logos.gif" alt="Visa/Mastercard/Discover/American Express"></span></dt> |
| 111 | | - <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd> |
| | 110 | + <dt><span class="label" style="display: inline-block; vertical-align: text-bottom; "><label for="card_num">Card info</label><img id="cardlogos" style="margin-left: 30px;" src="@script_path/extensions/DonationInterface/gateway_forms/includes/credit_card_logos.gif" alt="Visa/Mastercard/Discover/American Express"></span></dt> |
| | 111 | + <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num" placeholder="Card number"/></dd> |
| 112 | 112 | |
| 113 | 113 | <dt></dt> |
| 114 | 114 | <dd class="field"> |
| — | — | @@ -128,7 +128,7 @@ |
| 129 | 129 | <option value="11">11 - November</option> |
| 130 | 130 | <option value="12">12 - December</option> |
| 131 | 131 | </select> |
| 132 | | - |
| | 132 | + / |
| 133 | 133 | <select id="year" name="year"> |
| 134 | 134 | <option value="">Year</option> |
| 135 | 135 | <option value="2011">2011</option> |
| — | — | @@ -154,9 +154,9 @@ |
| 155 | 155 | |
| 156 | 156 | <dt></dt> |
| 157 | 157 | <dd class="field"> |
| 158 | | - <input id="submitcreditcard" class="btn" type="button" value="Submit donation" style="width:116px; height:30px;"/> |
| 159 | | - <!--<input id="submitcreditcard" src="@script_path/extensions/DonationInterface/gateway_forms/includes/submit-donation-button.png" alt="Submit donation" type="image">--> |
| 160 | | - <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif" /> Your credit card will be securely processed.</p> |
| | 158 | + <!--<input id="submitcreditcard" class="btn" type="button" value="Submit donation" style="width:116px; height:30px;"/>--> |
| | 159 | + <input id="submitcreditcard" src="@script_path/extensions/DonationInterface/gateway_forms/includes/submit-donation-button.png" alt="Submit donation" type="image"> |
| | 160 | + <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif" /> Your credit / debit card will be securely processed.</p> |
| 161 | 161 | </dd> |
| 162 | 162 | </dl> |
| 163 | 163 | </div> |