I have a client requirement to integrate Braintree payments UI in Salesforce Customer Community. The two options are either use drop-in UI or hosted fields. I ran into serious security problems when trying to add drop-in UI inside a LWC.
Has anyone else tried this successfully?
I got rid of the security errors by adding CSP trusted sites. Not the component is loading ok, but the dropin UI is not appearing
Below are fragments from my code. I get DIV and passed that to braintree.dropon.create(). But I don't see anything in UI and there are no errors in Console
LWC.html
<template>
<div id="dropin-container"></div>
<button id="submit-button">Request payment method</button>
</template>
LWC.js
import { LightningElement, track, wire } from "lwc";
import { NavigationMixin } from "lightning/navigation";
import braintreejs from "@salesforce/resourceUrl/BraintreeJS";
export default class Resources extends NavigationMixin(LightningElement) {
@track resources = [];
@track showResources = false;
renderedCallback() {
loadScript(this, braintreejs + "/dropin.min.js");
loadScript(this, braintreejs + "/jquery-3.2.1.min.js");
var button = this.template.querySelector('button');
var div = this.template.querySelector('div');
// console.log(JSON.stringify(div.id));
braintree.dropin.create({
authorization: 'CLIENT_TOKEN',
container: '#'+div.id
}, function (createErr, instance) {
button.addEventListener('click', function () {
console.log('inside');
instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
// Submit payload.nonce to your server
});
});
});
}