Semantic UI Modal - кнопки Paypal Checkout не отображаются - PullRequest
0 голосов
/ 24 января 2019

Итак, я пытался интегрировать платеж.Основная идея заключается в том, что всякий раз, когда человек нажимает кнопку, появляется модальное окно, содержащее кнопку оплаты PayPal.Но как только появляется модал, кнопки показываются и мгновенно исчезают.Кнопки «Оформить заказ» прекрасно работают в любой другой части страницы.

Вот что происходит: https://youtu.be/HkVuMLnuyps

Мой 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 &emsp;</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>

То, что я пробовал до сих пор:

  1. Попытка позиционирования Div Checkout Div.
  2. Попытка перемещенияdiv на разные модалы.
  3. Поиск в интернете.(похоже, ни у кого нет этой проблемы)

Семантическая версия пользовательского интерфейса: 2.4.2

МОЙ РАБОТЫ ДЛЯ СЕЙЧАС

Вместо того, чтобы показывать кнопки оплаты в модальном режиме, я показываю их в элементе div, который изначально скрыт и отображается при нажатии кнопки «оплатить».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...