0
皆、私はbrainTreeをホストフィールド経由でreactJsに統合しようとしています。今私は自分のプロジェクトでそれを統合することができましたし、それを働かせて支払いをすることもできました。braintreeはフィールドをreactjsに統合しました
私が直面している問題は、カード番号4444 4444 4444 4444を入力しようとすると、私はドロップインに入ったようなエラーを出したいが、エラーは発生しないということです。上記の間違ったカード番号で2〜3の余分な4を入力するとエラーになります。誰かが私が間違っていることを教えてください。おかげ
は私が間違って ここで何が起こっているのか理解できない私を助けてください私のコードです：
// 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;
クレジットカードのフィールドの検証ルールとは何ですか？ –