ducky/web

Paddy 2015-06-04 Parent:b9d0efb44eaa Child:e9e0a28a7419

8:62e0c0df28bb Go to Latest

ducky/web/src/pages/payment.jsx

Display server error messages when adding card. When adding a credit card, correctly display user-friendly messages.

History
     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>