Braintree размещены поля интеграции в реагировать
Ребята, я пытаюсь интегрировать brainTree в responseJs через размещенные поля. Теперь я смог интегрировать его в свой проект, а также заставить его работать и смог сделать платеж.
Проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь ввести номер карты 4444 4444 4444 4444 Я хочу получить ошибку, как я получил в dropin, но она не выдает ошибку. Если я введу 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;
1 ответ
Полное раскрытие: я работаю в Braintree. Если у вас есть какие-либо дополнительные вопросы, не стесняйтесь обращаться в службу поддержки.
В раскрывающемся интерфейсе отображаются только сообщения об ошибках, когда поле теряет фокус. Судя по вашему первоначальному сообщению, вы пытаетесь отобразить сообщение об ошибке, если пользователь вводит неверный номер карты. .on('validityChange') событие генерируется только тогда, когда либо isValid или же isPotentiallyValid булевы изменения. В вашем примере используется номер 4444 4444 4444 4444, isValid логическое значение остается ложным и isPotentiallyValid не переключается с истинного на ложное, пока вы не введете 19-ю цифру. Вы можете просмотреть логику этих проверок здесь.
Исходя из того, что вы описали, кажется, что вы хотите использовать .on('blur') вместо. Это событие генерируется, когда поле теряет фокус, и в этот момент вы сможете выполнять проверки объекта карты, чтобы определить, показывать или нет ваше сообщение об ошибке. Кроме того, вы, вероятно, захотите обновить свои условные else if (field.isPotentiallyValid) Предложение будет перехватывать событие - вы можете удалить это предложение, чтобы всегда отображать сообщение об ошибке, если номер карты недействителен.
hostedFieldsInstance.on('blur', function (event) {
var field = event.fields[event.emittedBy];
if (field.isValid) {
// Handle valid field
} else {
// Add styling to invalid fields
}
});