Ответ 1
Это не то, что поддерживается кнопкой PayPal прямо сейчас. Официальная политика заключается в том, что только щелчок на самой кнопке должен открыть окно проверки.
Нажмите кнопку триггера PayPal checkout
Как я могу активировать кнопку PayPal Checkout?
У нас есть веб-сайт рядом с кредитными картами, которые мы собираемся принять также платежи PayPal, и я решил поместить переключатели для клиентов, чтобы выбрать, каким образом клиент будет платить, а также кнопку PayPal Checkout:
Кнопка PayPal Checkout сама по себе открывает безопасное окно PayPal, а остальное отлично работает. Когда клиент щелкает 1-ю радиокнопку, я снова хочу открыть безопасное окно PayPal, т.е. Нажать на кнопку проверки PayPal. Как я могу это сделать, если сама кнопка появляется в iframe, и я не могу вызвать событие клика этой кросс-домена этой кнопки? Есть ли способ вызвать кнопку checkout?
Вот код HTML:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script type="text/javascript" src="paypal.js">
</script>
<body>
<div>
<span style="vertical-align: 50%"><input id="rd" name="aaa" type="radio"/></span>
<div id="paypal-button-container" style="display: inline-block"></div><hr/>
<input id="rd1" name="aaa" type="radio"/>
</div>
</body>
</html>
И код Javascript:
// paypal.js
// Render the PayPal button
$(function(){
paypal.Button.render({
// Set your environment
//TODO: Dynamically provide sandbox or production
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
//TODO: Dynamically provide clientID
client: {
sandbox: 'ZZZZZZ',
production: '//TODO: Provide this later'
},
// Wait for the PayPal button to be clicked
payment: function() {
// Make a client-side call to the REST api to create the payment
return paypal.rest.payment.create(this.props.env, this.props.client, {
transactions: [
{
amount: { total: '13.10', currency: 'USD' }
}
]
});
},
// Wait for the payment to be authorized by the customer
onAuthorize: function(data, actions) {
return actions.payment.get().then(function(paymentData) {
$('#paypal-button-container').style.display = 'none'; //hide button
//TODO: Show user payment details
//TODO: Create input hidden fields and set payerID, paymentID, etc..for later authoriza/capture
});
},
onClick: function(){
$('#rd').trigger('click');
},
}, '#paypal-button-container');
});
EDIT: В качестве рабочего примера я бы предложил этот сайт, но это немного отличается от того, что мне нужно https://developer.paypal.com/demo/checkout/#/pattern/mark
Ответы
Ответ 2
Думаю, я немного опоздал, но надеюсь, что это поможет людям, столкнувшимся с этой проблемой, так же, как и я.
Вы можете установить непрозрачность кнопки PayPal на 0 и поместить ее поверх собственной кнопки выписки. Затем вы можете настроить отображение на "none" или "block" в зависимости от значения переключателя.
Ответ 3
В моем случае я просто хотел использовать полностью настроенную кнопку для космос. В конце концов, я спрятал кнопку paypal, пока она на мыши не упала в переполнении: скрытый div. Он выглядит нормально - как квадратная кнопка Paypal без ввода влево/вправо.
Предыстория: текущая экспресс-документация Paypal говорит, что они поддерживают только кнопки с минимальным размером 80 пикселей, но, играя с CSS, кажется, что реальный минимум на рабочем столе - это приложение размером 120 пикселей.