braintree l'intégration des champs hébergés dans reactjs

Question

les gars, j'essaie d'intégrer brainTree dans reactJs via des champs hébergés. Maintenant, j'ai pu l'intégrer dans mon projet et le faire fonctionner et pouvoir effectuer un paiement.

Le problème que je suis confronté est que lorsque j'essaie d'entrer le numéro de carte 4444 4444 4444 4444 je veux obtenir une erreur comme je l'ai eu dans dropin mais il ne jette pas une erreur. Si j'entre 2 ou 3 supplémentaires 4 avec le mauvais numéro de carte ci-dessus je reçois une erreur. Est-ce que quelqu'un peut me dire ce que je fais de mal? Merci

s'il vous plaît aidez-moi je ne peux pas comprendre ce qui ne va pas Voici mon code:

// Some Imports 

import BrainTree from 'braintree-web'; 
var dropin = require('braintree-web-drop-in'); 

export class Checkout extends Component { 
    state = { 
     valueEntered: 5, 
     showSuccessMessage: false, 
     showErrorMessage: false, 
    }; 

    componentWillMount() { 
     this.props.getClientToken(); 
    } 

    checkoutPayment(nounce) { 
     this.props.Checkout({ 
      paymentValue: this.state.valueEntered, 
      paymentMethodNounce: nounce, 
     }); 

    } 


    // ONCE WE RECIEVE THE TOKEN THIS FUNCTION WILL BE CALLED SOMEHOW 
    // AND HERE THE BRAINTREE WILL BE INTIALIZED 
    componentWillReceiveProps(nextProps) { 

     var button = document.querySelector('#submit-button'); 

     if (nextProps.user.clientToken && nextProps.user.clientToken != null && nextProps.user.clientToken !== this.props.user.clientToken) { 
      BrainTree.client.create(
       { 
        authorization: nextProps.user.clientToken, 
       }, 
       (err, clientInstance) => { 
        let me = this; 
        if (err) { 
         console.error(err); 
         return; 
        } 

        BrainTree.hostedFields.create(
         { 
          client: clientInstance, 
          styles: { 
           input: { 
            'font-size': '14px', 
            'font-family': 
             'helvetica, tahoma, calibri, sans-serif', 
            color: '#3a3a3a', 
           }, 
           ':focus': { 
            color: 'black', 
           }, 
          }, 
          fields: { 
           number: { 
            selector: '#card-number', 
            placeholder: '4111 1111 1111 1111', 
           }, 
           cvv: { 
            selector: '#cvv', 
            placeholder: '123', 
           }, 
           expirationMonth: { 
            selector: '#expiration-month', 
            placeholder: 'MM', 
           }, 
           expirationYear: { 
            selector: '#expiration-year', 
            placeholder: 'YY', 
           }, 
           postalCode: { 
            selector: '#postal-code', 
            placeholder: '90210', 
           }, 
          }, 
         }, 
         (err, hostedFieldsInstance) => { 
          if (err) { 
           console.error(err); 
           return; 
          } 

          hostedFieldsInstance.on('validityChange', function(
           event 
          ) { 
           var field = event.fields[event.emittedBy]; 

           if (field.isValid) { 
            if (
             event.emittedBy === 'expirationMonth' || 
             event.emittedBy === 'expirationYear' 
            ) { 
             if (
              !event.fields.expirationMonth 
               .isValid || 
              !event.fields.expirationYear.isValid 
             ) { 
              return; 
             } 
            } else if (event.emittedBy === 'number') { 
             document.querySelector(
              '#card-number' 
             ).nextSibling.innerHTML = 
              ''; 
            } 

            // Apply styling for a valid field 

            document 
             .querySelector('#' + field.container.id) 
             .closest('.form-group') 
             .classList.add('has-success'); 
           } else if (field.isPotentiallyValid) { 
            // Remove styling from potentially valid fields 
            document 
             .querySelector('#' + field.container.id) 
             .closest('.form-group') 
             .classList.remove('has-warning'); 
            document 
             .querySelector('#' + field.container.id) 
             .closest('.form-group') 
             .classList.remove('has-success'); 
            if (event.emittedBy === 'number') { 
             document.querySelector(
              '#card-number' 
             ).nextSibling.innerHTML = 
              ''; 
            } 
           } else { 
            // Add styling to invalid fields 
            document 
             .querySelector('#' + field.container.id) 
             .closest('.form-group') 
             .classList.add('has-warning'); 
            // Add helper text for an invalid card number 
            if (event.emittedBy === 'number') { 
             document.querySelector(
              '#card-number' 
             ).nextSibling.innerHTML = 
              'Looks like this card number has an error.'; 
            } 
           } 
          }); 

          hostedFieldsInstance.on('cardTypeChange', function(
           event 
          ) { 
           // Handle a field's change, such as a change in validity or credit card type 

           if (event.cards.length === 1) { 
            document.querySelector(
             '#card-type' 
            ).innerHTML = 
             event.cards[0].niceType; 
           } else { 
            document.querySelector(
             '#card-type' 
            ).innerHTML = 
             'Card'; 
           } 
          }); 

          button.addEventListener('click', event => { 
           event.preventDefault(); 
           hostedFieldsInstance.tokenize(
            (err, payload) => { 
             let paymentComponnet = me; 
             if (err) { 
              console.error(err); 
              return; 
             } 
             paymentComponnet.checkoutPayment(
              payload.nonce 
             ); 
             // This is where you would submit payload.nonce to your server 
             // alert('Submit your nonce to your server here!'); 
            } 
           ); 
          }); 
         } 
        ); 
       } 
      ); 
     } 
    } 
    handleChange = (field, value) => { 
     this.setState({ 
      [field]: value, 
     }); 
    }; 

    // HERE WE WILL RENDER OUR HTML 
    render() { 
     let paymentValue = this.state.valueEntered; 

     return (
      <div styleName="organization-profile"> 
       <div className="form-group"> 
        <label for="focusedInput">Amount</label> 
        <input 
         className="form-control" 
         id="amount" 
         name="amount" 
         type="tel" 
         min="1" 
         placeholder="Amount" 
         value={paymentValue} 
         onChange={e => { 
          this.handleChange('valueEntered', e.target.value); 
         }} 
        /> 
       </div> 
       <div className="panel panel-default bootstrap-basic"> 
        <div className="panel-heading"> 
         <h3 className="panel-title">Enter Card Details</h3> 
        </div> 
        <form className="panel-body"> 
         <div className="row"> 
          <div className="form-group col-xs-8"> 
           <label className="control-label"> 
            Card Number 
           </label> 

           <div 
            className="form-control" 
            id="card-number" 
           /> 
           <span className="helper-text" /> 
          </div> 
          <div className="form-group col-xs-4"> 
           <div className="row"> 
            <label className="control-label col-xs-12"> 
             Expiration Date 
            </label> 
            <div className="col-xs-6"> 
             <div 
              className="form-control" 
              id="expiration-month" 
             /> 
            </div> 
            <div className="col-xs-6"> 
             <div 
              className="form-control" 
              id="expiration-year" 
             /> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div className="row"> 
          <div className="form-group col-xs-6"> 
           <label className="control-label"> 
            Security Code 
           </label> 

           <div className="form-control" id="cvv" /> 
          </div> 
          <div className="form-group col-xs-6"> 
           <label className="control-label">Zipcode</label> 

           <div 
            className="form-control" 
            id="postal-code" 
           /> 
          </div> 

          <button 
           id="submit-button" 
           className="btn btn-success btn-lg center-block" 
          > 
           Pay with <span id="card-type">Card</span> 
          </button> 
         </div> 
        </form> 
       </div> 
      </div> 
     ); 
    } 
} 



export default Checkout; 

Answer 1

_{divulgation complète: Je travaille à Braintree. Si vous avez d'autres questions, n'hésitez pas à contacter support.}

L'interface utilisateur d'insertion affiche uniquement les messages d'erreur lorsqu'un champ perd le focus. Selon votre message initial, il semble que vous essayez d'afficher le message d'erreur si un utilisateur entre un numéro de carte invalide. L'événement .on('validityChange') est émis uniquement lorsque les modifications booléennes isValid ou isPotentiallyValid. Dans votre exemple utilisant le numéro 4444 4444 4444 4444, le booléen isValid reste faux et isPotentiallyValid ne passe pas de vrai à faux jusqu'à ce que vous entrez le 19ème chiffre. Vous pouvez examiner la logique derrière ces vérifications here. En fonction de ce que vous avez décrit, il semble que vous souhaitiez utiliser .on('blur') à la place. Cet événement est émis quand un champ perd le focus, à quel point vous serez en mesure d'effectuer vos contrôles sur l'objet carte pour déterminer si vous souhaitez ou non afficher votre message d'erreur. En outre, vous souhaiterez probablement mettre à jour votre condition, car votre clause else if (field.isPotentiallyValid) interceptera l'événement. Vous pouvez supprimer cette clause pour toujours afficher le message d'erreur si le numéro de carte n'est pas valide.

hostedFieldsInstance.on('blur', function (event) { 

    var field = event.fields[event.emittedBy]; 

    if (field.isValid) { 
    // Handle valid field 
    } else { 
    // Add styling to invalid fields 
    } 

});