Итак, я пытался интегрировать платеж.Основная идея заключается в том, что всякий раз, когда человек нажимает кнопку, появляется модальное окно, содержащее кнопку оплаты PayPal.Но как только появляется модал, кнопки показываются и мгновенно исчезают.Кнопки «Оформить заказ» прекрасно работают в любой другой части страницы.
Мой HTML-код:
<div id="modal3" class="ui modal ">
<div class="content">
<div class="padding20">
<div class="ui grid">
<div class="eight wide column">
<div class="details-x">
<h2 class="animated fadeInUp">Payment Information</h2>
<span>Paying  </span>
<div class="ui labeled input">
<div class="ui label">
$
</div>
<input type="number" min="1" value="1">
</div>
<p class="animated fadeInUp"></p>
</div>
</div>
<div class="eight wide column">
<div id="paypal-button-container"></div>
</div>
</div>
</div>
</div>
<div class="actions">
<div style="float:left;">
<a class="ui red right icon button">
Cancel Payment
</a>
</div>
<div id="to3" class="ui labeled button" tabindex="0">
<div class="ui red button">
<i class="heart icon"></i> Continue to Donate
</div>
<a class="ui basic red left pointing label">
$1 or more
</a>
</div>
</div>
</div>
Сценарии:
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
// Render the PayPal button
paypal.Button.render({
// Set your environment
env: 'sandbox', // sandbox | production
// Specify the style of the button
style: {
layout: 'vertical', // horizontal | vertical
size: 'medium', // medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold' // gold | blue | silver | white | black
},
// Specify allowed and disallowed funding sources
//
// Options:
// - paypal.FUNDING.CARD
// - paypal.FUNDING.CREDIT
// - paypal.FUNDING.ELV
funding: {
allowed: [
paypal.FUNDING.CARD,
paypal.FUNDING.CREDIT
],
disallowed: []
},
// Enable Pay Now checkout flow (optional)
commit: true,
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'MYSANDBOXID',
production: '<insert production client id>'
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: {
total: '0.01',
currency: 'USD'
}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute()
.then(function () {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
</script>
То, что я пробовал до сих пор:
- Попытка позиционирования Div Checkout Div.
- Попытка перемещенияdiv на разные модалы.
- Поиск в интернете.(похоже, ни у кого нет этой проблемы)
Семантическая версия пользовательского интерфейса: 2.4.2
МОЙ РАБОТЫ ДЛЯ СЕЙЧАС
Вместо того, чтобы показывать кнопки оплаты в модальном режиме, я показываю их в элементе div, который изначально скрыт и отображается при нажатии кнопки «оплатить».