ducky/web
8:62e0c0df28bb Browse Files
Display server error messages when adding card. When adding a credit card, correctly display user-friendly messages.
1.1 --- a/src/pages/payment.jsx Sun May 31 19:08:58 2015 -0400 1.2 +++ b/src/pages/payment.jsx Thu Jun 04 23:56:35 2015 -0400 1.3 @@ -29,10 +29,26 @@ 1.4 } 1.5 }, 1.6 1.7 - nameValidationOutputs: {}, 1.8 - numberValidationOutputs: {}, 1.9 - cvcValidationOutputs: {}, 1.10 - expirationValidationOutputs: {}, 1.11 + nameValidationOutputs: { 1.12 + }, 1.13 + numberValidationOutputs: { 1.14 + 'invalid_value': 'Are you sure this is right? That number didn’t work.', 1.15 + 'invalid_format': 'That’s not a valid credit card number.', 1.16 + }, 1.17 + cvcValidationOutputs: { 1.18 + 'invalid_format': 'That’s not a valid security code.', 1.19 + 'invalid_value': 'That’s not the correct security code.', 1.20 + }, 1.21 + expirationValidationOutputs: { 1.22 + 'invalid_format': 'That’s not a valid expiration date.', 1.23 + 'invalid_value': 'That card appears to be expired.', 1.24 + }, 1.25 + balanceValidationOutputs: { 1.26 + 'insufficient': 'Your card was declined.', 1.27 + }, 1.28 + 1.29 + catchAllValidationOutputs: { 1.30 + }, 1.31 1.32 onScriptLoaded () { 1.33 Stripe.setPublishableKey(config.stripeKey) 1.34 @@ -40,7 +56,7 @@ 1.35 }, 1.36 1.37 onScriptError () { 1.38 - this.setState({stripeFailedToLoad: true}) 1.39 + this.setState({stripeFailedToLoad: true, errors: [{'error': 'act_of_god'}]}) 1.40 }, 1.41 1.42 getChargeDate () { 1.43 @@ -77,8 +93,6 @@ 1.44 exp_year: this.state.expireYear, 1.45 name: this.state.name, 1.46 }, function(status, response) { 1.47 - console.log(status) 1.48 - console.log(response) 1.49 if (response.error) { 1.50 if (response.error.type == 'card_error') { 1.51 switch (response.error.code) { 1.52 @@ -89,10 +103,10 @@ 1.53 errors.push({'error': 'invalid_format', 'field': '/number'}) 1.54 break 1.55 case 'invalid_expiry_month': 1.56 - errors.push({'error': 'invalid_format', 'field': '/expireMonth'}) 1.57 + errors.push({'error': 'invalid_format', 'field': '/expiration'}) 1.58 break 1.59 case 'invalid_expiry_year': 1.60 - errors.push({'error': 'invalid_format', 'field': '/expireYear'}) 1.61 + errors.push({'error': 'invalid_format', 'field': '/expiration'}) 1.62 break 1.63 case 'invalid_cvc': 1.64 errors.push({'error': 'invalid_format', 'field': '/cvc'}) 1.65 @@ -156,6 +170,8 @@ 1.66 <input id='expireYear' className='expiration year' type='text' placeholder='15' valueLink={this.linkState('expireYear')} /> 1.67 <ValidationError errors={this.state.errors} field='/cvc' outputs={this.cvcValidationOutputs} /> 1.68 <ValidationError errors={this.state.errors} field='/expiration' outputs={this.expirationValidationOutputs} /> 1.69 + <ValidationError errors={this.state.errors} field='/balance' outputs={this.balanceValidationOutputs} /> 1.70 + <ValidationError errors={this.state.errors} notFields={['/name', '/number', '/cvc', '/expiration', '/balance']} notParams={[]} notHeaders={[]} outputs={this.catchAllValidationOutputs} /> 1.71 1.72 <div className='actionbuttons'> 1.73 <button type='button' onClick={this.skip} className='ladda-button' disabled={this.state.active}>Not Now</button>