https://www.hurrcollective.com/assets/controllers/dpd/stripe_contr…1059bae0d62c269aefa8557be73f72a2bf16d865.js

1import { Controller } from '@hotwired/stimulus';
2import { post } from '@rails/request.js';
3
4// Connects to data-controller="dpd--stripe"
5export default class extends Controller {
6  static targets = [
7    'cardDetailsWrapper',
8    'cardForm',
9    'creditCardForm',
10    'cardElement',
11    'cardErrors',
12    'stripeKey',
13    'stripeClientSecret',
14    'paymentId',
15  ];
16  connect() {
17    this.stripe = Stripe(this.stripeKeyTarget.value);
18    let controller = this,
19      elements = this.stripe.elements(),
20      style = {
21        base: {
22          color: '#241E19',
23          fontSize: '12px',
24          letterSpacing: '1.2px',
25          lineHeight: '17px',
26          fontFamily: `"Open Sans", sans-serif`,
27          fontSmoothing: 'antialiased',
28          '::placeholder': {
29            color: '#CECECE',
30            textTransform: 'uppercase',
31          },
32        },
33        invalid: {
34          color: '#AA5959',
35          ':focus': {
36            color: '#AA5959',
37          },
38        },
39      };
40    this.card = elements.create('card', {
41      style: style,
42    });
43    this.card.mount(this.cardElementTarget);
44    this.card.addEventListener('change', function (event) {
45      setTimeout(() => {
46        let displayError = controller.cardErrorsTarget;
47        if (event.error) {
48          displayError.textContent = event.error.message;
49          controller.dpdController.paymentButtonState();
50        } else if (event.complete) {
51          displayError.textContent = '';
52          controller.updateCard();
53          controller.dpdController.paymentButtonState();
54        }
55      }, 1000);
56    });
57  }
58
59  updateCard() {

60    let controller = this;
61    // Submit card to stripe to get payment id and then submit to CreditCardsController to update user
62    if (this.paymentIdTarget.value === '') {
63      controller.dpdController.payAndBookButtonTarget.classList.add('loading');
64      this.stripe.handleCardSetup(this.stripeClientSecretTarget.value, this.card).then(function (result) {
65        if (result.error) {
66          controller.cardErrorsTarget.textContent = result.error.message;
67        } else {
68          controller.paymentIdTarget.value = result.setupIntent.payment_method;
69          post(controller.creditCardFormTarget.action, {
70            body: new FormData(controller.creditCardFormTarget),
71            responseKind: 'json',
72          })
73            .then((response) => response.json)
74            .then((data) => {
75              if (data.success) {
76                document.getElementById('cardDetailsContent').innerHTML = data.text;
77                controller.dpdController.payAndBookButtonTarget.classList.remove('loading');
78              }
79            });
80        }
81      });
82    }
83  }
84
85  toggleStripeCreditCardForm() {
86    if (this.cardFormTarget.classList.contains('d-none')) {
87      this.cardFormTarget.classList.remove('d-none');
88      this.cardDetailsWrapperTarget.classList.add('d-none');
89    } else {
90      this.cardFormTarget.classList.add('d-none');
91      this.cardDetailsWrapperTarget.classList.remove('d-none');
92    }
93  }
94
95  get dpdController() {
96    return this.application.getControllerForElementAndIdentifier(
97      document.querySelector('[data-controller="dpd"]'),
98      'dpd',
99    );
100  }
101};