Polymer/Lit-Element - Braintree 网关集成 - Web 组件问题

如何解决Polymer/Lit-Element - Braintree 网关集成 - Web 组件问题

我正在尝试将 Braintree 支付网关集成到使用 Polymer 作为其前端的 Vaadin 14。

基本上我们有一个自定义的 Vaadin 前端视图来加载脚本 https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js :

我们调用它的方法 dropin.create 如下：

import{PolymerElement}from'@polymer/polymer/polymer-element.js';
import'@polymer/iron-icon/iron-icon.js';
import{html}from'@polymer/polymer/lib/utils/html-tag.js';
import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
import'@polymer/polymer/polymer-legacy.js';
import'@polymer/iron-flex-layout/iron-flex-layout.js';


import{mixinBehaviors}from'@polymer/polymer/lib/legacy/class.js';
import{Polymer}from'@polymer/polymer/lib/legacy/polymer-fn.js';
import{setTouchAction}from'@polymer/polymer/lib/utils/gestures.js';
import{afterNextRender}from'@polymer/polymer/lib/utils/render-status.js';
import'@vaadin/vaadin-text-field/vaadin-text-field.js';

import { sharedStyles } from './drop-in.js';

let dropin = require('braintree-web-drop-in');

class BrainTreeVaadin extends PolymerElement {

    <vaadin-vertical-layout class="main-div-layout-boder padding5">
        <form id="paymentForm" method="post" action="/checkout" class="main-screen-vert-layout-row">
            <div id="containPayment" class="main-screen-vert-layout-row">
                <div id="btDropin" class="main-screen-vert-layout-row"></div>
            </div>
            <vaadin-text-field id="nonce" value={{valueNonce}} hidden></vaadin-text-field>
            <vaadin-button id="butPayment" theme="theme-button-02" class="button-row">Payment</vaadin-button>
        </form>
    </vaadin-vertical-layout>

createFormPayment(){

let form = this.$.paymentForm;
let butPayment = this.$.butPayment;
let btDropin =  this.$.btDropin;
let textNonce = this.$.nonce;

dropin.create({
  authorization: this.clientToken,container: btDropin,card: {
    cardholderName: {
        required: true
    }
  },paypal: {
     flow: 'vault',currency: 'USD'
  },paypalCredit: {
     flow: 'vault',currency: 'USD'
  }
}
}
}

但是我们得到如下图所示的错误：

在内部，主脚本 dropin.min.js 包含其他脚本 https://www.paypalobjects.com/api/checkout.min.js 并从这个新 JS 调用其他方法的原因。

访问 checkout.min.js 中的方法出错，因为 checkout.min.js 无法使用 javascript 参考样式获取 html 元素（这里是按钮）的 id “#...”。

Braintree 使用 JS 样式 #element_id 将 html div 元素作为参数传递给方法：braintree.dropin.create(...,container: '#bt-dropin').

以下是 Braintree 示例代码（注意方法“braintree.dropin.create”，它需要 '#bt-dropin' 作为输入）：

 <div class="bt-drop-in-wrapper">
    <div id="bt-dropin"></div>
 </div>

<div th:include="fragments/homefooter :: footer"></div>
        <script src="https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js"></script>
        <script th:inline="javascript">
            /*<![CDATA[*/
            var form = document.querySelector('#payment-form');
            var client_token = [[${clientToken}]];
        
            braintree.dropin.create({
              authorization: client_token,container: '#bt-dropin',paypal: {
                flow: 'vault'
              }
            },function (createErr,instance) {
              form.addEventListener('submit',function (event) {
                  event.preventDefault();
                  $('#errorDiv').hide();
                  $('#serverSideErrorDiv').hide();
                  
                  instance.requestPaymentMethod(function (err,payload) {
                    if (err) {
                      console.log('Error',err);
                      showError(err);
                      return;
                    }
            
                    // Add the nonce to the form and submit
                    document.querySelector('#nonce').value = payload.nonce;
                    form.submit();
                  });
              });
            });

以及 Vaadin 表单（视图）不理解 javascript 样式的问题："#bt-dropin" 引用 div 元素。

如何让 Vaadin 视图理解 JS 风格：“#element_id”？

更新： 这是聚合物问题，不是 Vaadin 流动问题。

更新 2： 这是脑树问题，不是聚合物问题:)）

解决方法

由于缺乏支持的 Web 组件，这是一个 Braintree 的问题。 以下是临时解决方案。

Braintree Git Issue

解决方法（删除 URL 上的空格 .io）：

https://codepen .io/braintree/pen/VrYXYW