I am trying to integrate Braintree payment gateway to Vaadin 14 which is using Polymer for its frontend.
Basically we have a custom Vaadin front-end view to load script https://js.braintreegateway.com/web/dropin/1.9.4/js/dropin.min.js :
And we call its method dropin.create as below:
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'
}
}
}
}However we get error as below image:
Reason that internally, the main script dropin.min.js includes other script https://www.paypalobjects.com/api/checkout.min.js and called other methods from this new JS.
Accessing methods in checkout.min.js got error because checkout.min.js can’t get id of html elements (here is buttons) using javascript reference style "#...".
Braintree uses JS style #element_id to pass a html div element as argument to method: braintree.dropin.create(..., container: '#bt-dropin').
Below is Braintree example code (take note on method "braintree.dropin.create", it takes '#bt-dropin' as input):
<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();
});
});
});And problem that Vaadin form (view) doesn’t understand javascript style: "#bt-dropin" to reference to a div element.
How to make Vaadin view understand JS style: "#element_id" ?
Update: this is polymer problem, not Vaadin flow problem.
Update 2: this is braintree problem, not polymer problem :)).