Я хочу интегрировать Paypal Checkout на моем сайте с Polymer.
Для этого я пытаюсь использовать интеллектуальные кнопки оплаты Paypal, которые должны быть простейшим способом интеграции Paypal.
Но похоже, что библиотека Paypal Checkout не совсем совместима с Polymer и Shadow-DOM.
- Сначала я попытался интегрировать кнопки из Shadow-DOM, чтобы кнопки появлялись, а затем исчезают всего на секунду позже. Я перепробовал много конфигураций, но не нашел никаких решений.
- Затем я попытался объединить кнопки внутри
iframe
, указывающего на файл HTML, который правильно отображает кнопки. Когда я нажимаю на кнопку, я правильно перенаправляюсь на страницу Paypal Checkout, но на странице Paypal возникает ошибка блокировки, и я не могу завершить платеж.
Я также пытался интегрировать Paypal Checkout, избегая библиотеки Paypal, но я не нашел согласованной документации для этого.
первая попытка (в Shadow-DOM):
<div id="button"></div>
...
initPayment () {
paypal.Buttons({
createOrder: function(data, actions) {
console.log(data, actions);
let order = actions.order.create({
purchase_units: [{
amount: {
value: "0.01",
currency_code: "EUR"
},
reference_id: "123"
}]
});
return order;
},
onApprove: function(data, actions) {
return actions.order.capture().then((detail) => {
console.log(detail);
});
},
onError: function(error) {
console.log(error);
},
onCancel: (data, actions) => {
console.log(data);
},
}).render(this.shadowRoot.querySelector("#button"));
...
- Вторая попытка (в
iframe
):
...
<body>
<script>
paypal.Buttons({
createOrder: function(data, actions) {
console.log(data, actions);
let order = actions.order.create({
purchase_units: [{
amount: {
value: "0.01",
currency_code: "EUR"
},
reference_id: "123"
}]
});
return order;
},
onApprove: function(data, actions) {
return actions.order.capture().then((detail) => {
console.log(detail);
});
},
onError: function(error) {
console.log(error);
},
onCancel: (data, actions) => {
console.log(data);
},
}).render("#button");
</script>
...
<div id="button"></div>
</body>
Также я заметил, что когда я тестирую свою HTML-страницу отдельно, которая должна быть включена с iframe
, проверка работает нормально.