https://digbi-web-akl7i.ondigitalocean.app/assets/controllers/braintree/dropin_controller-3d055198.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = [ "dropin", "form" ]
5
6  connect() {
7    braintree.dropin.create({
8      authorization: this.data.get("clientToken"),
9      container: this.dropinTarget,
10      card: {
11        overrides: {
12          styles: this.cardStyles
13        }
14      },
15      //threeDSecure: true,
16      paypal: {
17        flow: "vault"
18      },
19      // Uncomment this to only display PayPal in the Drop-in UI
20      //paymentOptionPriority: ['paypal']
21    },
22      this.clientCreated.bind(this)
23    )
24  }
25
26  clientCreated(error, instance) {
27    if (error) {
28      console.error("Error setting up Braintree dropin:", error)
29      return
30    }
31
32    this.instance = instance
33  }
34
35  submit(event) {
36    event.preventDefault()
37    this.instance.requestPaymentMethod(this.paymentMethod.bind(this))
38  }
39
40  paymentMethod(error, payload) {
41    if (error) {
42      console.error("Error with payment method:", error)
43      return
44    }
45
46    this.addHiddenField("processor", "braintree")
47    this.addHiddenField("payment_method_token", payload.nonce)
48    this.formTarget.submit()
49  }
50
51  addHiddenField(name, value) {
52    let hiddenInput = document.createElement("input")
53    hiddenInput.setAttribute("type", "hidden")
54    hiddenInput.setAttribute("name", name)
55    hiddenInput.setAttribute("value", value)
56    this.formTarget.appendChild(hiddenInput)
57  }
58
59  get cardStyles() {
60    let darkMode = document.documentElement.classList.contains("dark");
61    if(darkMode) {
62      return {
63        '.number': {
64          color: 'white'
65        },
66        '.expirationDate': {
67          color: 'white'
68        }
69      }
70    }
71  }
72}