Поля, размещенные в Braintree, не работают внутри iframe - PullRequest
Новая
       12

Поля, размещенные в Braintree, не работают внутри iframe

0 голосов
/ 19 июня 2019

Я пытался использовать поля, размещенные в Braintree, с Polymer, но это не сработало (по-видимому, braintree пока не говорит о поддержке), поэтому я решил встроить iframe в полимер, который будет указывать на серверную часть сервера nodejs, которая будет обрабатывать платежи.страница, однако, когда я посещаю этот URL напрямую, я получаю: err = null

Но когда я встраиваю страницу в полимер, я получаю: {name: "BraintreeError", код: "HOSTED_FIELDS_TIMEOUT", сообщение: "Hosted Fieldsистекло время ожидания при попытке установить. ", введите:" UNKNOWN ", подробности: undefined}.

Пытался заставить его работать в полимере, используя https://codepen.io/braintree/pen/NbqPVO, но, похоже, он не работает сПолимер 3. // установка shadow dom var btfields = document.querySelector ('# braintree-fields') var shadow = btfields.createShadowRoot () var template = document.querySelector ('# braintree-fields-template') 

    shadow.appendChild(template.content)

    template.remove()

    // setup bt
    braintree.client.create({
      authorization: 'sandbox_g42y39zw_348pk9cgf3bgyw2b'
    }, function (clientErr, clientInstance) {
      if (clientErr) {
        // Handle error in client creation
        return;
      }

      var options = {
        client: clientInstance,
        styles: {
          'input': {
            'font-size': '14px'
          },
          'input.invalid': {
            'color': 'red'
          },
          'input.valid': {
            'color': 'green'
          }
        },
        fields: {
          number: {
            selector: '#card-number',
            placeholder: '4111 1111 1111 1111'
          },
          cvv: {
            selector: '#cvv',
            placeholder: '123'
          },
          expirationDate: {
            selector: '#expiration-date',
            placeholder: '10/2019'
          }
        }
      };

      braintree.hostedFields.create(options, function (hostedFieldsErr, hostedFieldsInstance) {
        if (hostedFieldsErr) {
          // Handle error in Hosted Fields creation
          return;
        }

        var btn = shadow.querySelector('#submit')

        btn.addEventListener('click', function (event) {
          event.preventDefault()

          hostedFieldsInstance.tokenize(function (tokenizeError, payload) {
            if (tokenizeError) {
              console.error(tokenizeError)
            } else {
              alert('Send payload.nonce to server: ' + payload.nonce)
            }
          })
        })
      });
    });

Сбой метода braintree.hostedFields.create

1 Ответ

0 голосов
/ 19 июня 2019

Нашел ответ по адресу: https://github.com/braintree/braintree-web/issues/226 @ runia1 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

    <!-- Load redux library -->
    <script src="/redux/dist/redux.js"></script>

    <!-- Load the Client component -->
    <script src="https://js.braintreegateway.com/web/3.12.0/js/client.min.js"></script>

    <!-- Load the Hosted Fields component -->
    <script src="https://js.braintreegateway.com/web/3.12.0/js/hosted-fields.min.js"></script>

    <!-- Load your application shell -->
    <link rel="import" href="/src/my-app.html">

    <!-- Add any global styles for body, document, etc. -->
    <style>
      body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <my-app>
      <div id="braintree-fields">
        <div class="field" id="card-number-container">
          <label for="card-number">Card Number</label>
          <div id="card-number"></div>
        </div>
        <div id="cvv-container">
          <label for="cvv">CVV</label>
          <div id="cvv"></div>
        </div>
        <div id="expiration-date-container">
          <label for="expiration-date">Expiration Date</label>
          <div id="expiration-date"></div>
        </div>
      </div>
    </my-app>
  </body>
</html>

тогда в том месте, куда вы хотите его поместить. 

      <iron-pages
        selected="[[page]]"
        attr-for-selected="name"
        fallback-selection="view404"
        role="main">
      <my-home name="home"></my-home>
      <my-give name="give"></my-give>
      <my-checkout name="checkout">
        <slot id="#braintree-fields"></slot>
      </my-checkout>
      <my-view404 name="view404"></my-view404>
    </iron-pages>

Наконец, в любом слоте любого контента (который должен быть только # braintree-fields) 

<iron-form id="giveForm" on-iron-form-presubmit="_giveFormSubmitted">
  <slot></slot>
</iron-form>
...