https://littlebirdelectronics.com.au/assets/controllers/braintree/paypal_controller-f2e55280.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = [ "button", "form" ]
5
6  connect() {
7    braintree.client.create({
8      authorization: this.data.get("clientToken")
9    }, this.clientCreated.bind(this))
10  }
11
12  disconnect() {
13    // Remove the paypal button on disconnect
14    this.buttonTarget.querySelector(".paypal-button").remove()
15  }
16
17  clientCreated(error, clientInstance) {
18    if (error) {
19      console.error("Error creating client", error)
20      return
21    }
22
23    braintree.paypalCheckout.create({
24      client: clientInstance
25    }, this.paypalCreated.bind(this))
26  }
27
28  paypalCreated(paypalCheckoutErr, paypalCheckoutInstance) {
29    // Stop if there was a problem creating PayPal Checkout.
30    // This could happen if there was a network error or if it's incorrectly
31    // configured.
32    if (paypalCheckoutErr) {
33      console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
34      return;
35    }
36
37    // Set up PayPal with the checkout.js library
38    paypal.Button.render({
39      env: this.data.get("env"), // or 'sandbox'
40
41      // https://developer.paypal.com/docs/checkout/how-to/customize-button/#
42      style: {
43        color: 'gold',  // gold blue silver black
44        shape: 'rect',  // shape: pill rect
45        size:  'medium', // size: small medium large responsive
46        label: 'pay',   // label: checkout credit pay buynow paypal installment
47        tagline: false, // tagline: true false
48      },
49
50      payment: () => {
51        return paypalCheckoutInstance.createPayment({
52          // Your PayPal options here. For available options, see
53          // http://braintree.github.io/braintree-web/current/PayPalCheckout.html#createPayment
54          flow: 'vault',
55        })
56      },
57
58      onAuthorize: (data, actions) => {
59        return paypalCheckoutInstance.tokenizePayment(data, this.paymentMethod.bind(this))
60      },
61
62      onCancel: (data) => {
63        console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
64      },
65
66      onError: (err) => {
67        console.error('checkout.js error', err);
68      }
69    }, this.buttonTarget).then(() => {
70      // The PayPal button will be rendered in an html element with the id
71      // `paypal-button`. This function will be called when the PayPal button
72      // is set up and ready to be used.
73    });
74  }
75
76  paymentMethod(error, payload) {
77    if (error) {
78      console.error("Error with payment method:", error)
79      return
80    }
81
82    this.addHiddenField("processor", "braintree")
83    this.addHiddenField("payment_method_token", payload.nonce)
84    this.formTarget.submit()
85  }
86
87  addHiddenField(name, value) {
88    let hiddenInput = document.createElement("input")
89    hiddenInput.setAttribute("type", "hidden")
90    hiddenInput.setAttribute("name", name)
91    hiddenInput.setAttribute("value", value)
92    this.formTarget.appendChild(hiddenInput)
93  }
94}
95