invoiceninja/resources/js/clients/payments/stripe-browserpay.js

/**
 * Invoice Ninja (https://invoiceninja.com).
 *
 * @link https://github.com/invoiceninja/invoiceninja source repository
 *
 * @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
 *
 * @license https://opensource.org/licenses/AAL
 */

class StripeBrowserPay {
    constructor() {
        this.clientSecret = document.querySelector(
            'meta[name=stripe-pi-client-secret]'
        )?.content;
    }

    init() {
        let config = {};

        if (document.querySelector('meta[name=stripe-account-id]')) {
            config.apiVersion = '2020-08-27';

            config.stripeAccount = document.querySelector(
                'meta[name=stripe-account-id]'
            )?.content;
        }

        console.log(config);

        this.stripe = Stripe(
            document.querySelector('meta[name=stripe-publishable-key]')?.content,
            config
        );

        this.elements = this.stripe.elements();

        return this;
    }

    createPaymentRequest() {
        this.paymentRequest = this.stripe.paymentRequest(
            JSON.parse(
                document.querySelector('meta[name=payment-request-data').content
            )
        );

        return this;
    }

    createPaymentRequestButton() {
        this.paymentRequestButton = this.elements.create(
            'paymentRequestButton',
            {
                paymentRequest: this.paymentRequest,
            }
        );
    }

    handlePaymentRequestEvents(stripe, clientSecret) {
        document.querySelector('#errors').hidden = true;

        this.paymentRequest.on('paymentmethod', function (ev) {
            stripe
                .confirmCardPayment(
                    clientSecret,
                    { payment_method: ev.paymentMethod.id },
                    { handleActions: false }
                )
                .then(function (confirmResult) {
                    console.log('confirmResult', confirmResult);

                    if (confirmResult.error) {
                        ev.complete('fail');

                        document.querySelector('#errors').innerText =
                            confirmResult.error.message;

                        document.querySelector('#errors').hidden = false;
                    } else {
                        ev.complete('success');

                        if (
                            confirmResult.paymentIntent.status ===
                            'requires_action'
                        ) {
                            stripe
                                .confirmCardPayment(clientSecret)
                                .then(function (result) {
                                    if (result.error) {
                                        ev.complete('fail');

                                        document.querySelector(
                                            '#errors'
                                        ).innerText = result.error.message;

                                        document.querySelector(
                                            '#errors'
                                        ).hidden = false;
                                    } else {
                                        document.querySelector(
                                            'input[name="gateway_response"]'
                                        ).value = JSON.stringify(
                                            result.paymentIntent
                                        );

                                        let tokenBillingCheckbox =
                                            document.querySelector(
                                                'input[name="token-billing-checkbox"]:checked'
                                            );

                                        if (tokenBillingCheckbox) {
                                            document.querySelector(
                                                'input[name="store_card"]'
                                            ).value =
                                                tokenBillingCheckbox.value;
                                        }

                                        document
                                            .getElementById('server-response')
                                            .submit();
                                    }
                                });
                        } else {
                            document.querySelector(
                                'input[name="gateway_response"]'
                            ).value = JSON.stringify(
                                confirmResult.paymentIntent
                            );

                            let tokenBillingCheckbox = document.querySelector(
                                'input[name="token-billing-checkbox"]:checked'
                            );

                            if (tokenBillingCheckbox) {
                                document.querySelector(
                                    'input[name="store_card"]'
                                ).value = tokenBillingCheckbox.value;
                            }

                            document.getElementById('server-response').submit();
                        }
                    }
                });
        });
    }

    handleSuccess(result) {
        document.querySelector('input[name="gateway_response"]').value =
            JSON.stringify(result.paymentIntent);

        let tokenBillingCheckbox = document.querySelector(
            'input[name="token-billing-checkbox"]:checked'
        );

        if (tokenBillingCheckbox) {
            document.querySelector('input[name="store_card"]').value =
                tokenBillingCheckbox.value;
        }

        document.getElementById('server-response').submit();
    }

    handle() {
        this.init().createPaymentRequest().createPaymentRequestButton();

        this.paymentRequest.canMakePayment().then((result) => {
            if (result) {
                return this.paymentRequestButton.mount(
                    '#payment-request-button'
                );
            }

            document.querySelector('#errors').innerHTML = JSON.parse(
                document.querySelector('meta[name=no-available-methods]')
                    ?.content
            );

            document.querySelector('#errors').hidden = false;
        });

        this.handlePaymentRequestEvents(this.stripe, this.clientSecret);

        Array.from(
            document.getElementsByClassName('toggle-payment-with-token')
        ).forEach((element) =>
            element.addEventListener('click', (element) => {
                document
                    .getElementById('payment-request-button')
                    .classList.add('hidden');
                document.getElementById('save-card--container').style.display =
                    'none';
                document.querySelector('input[name=token]').value =
                    element.target.dataset.token;

                document.querySelector(
                    '.pay-now-button-container'
                ).style.display = 'block';
            })
        );

        document
            .getElementById('toggle-payment-with-credit-card')
            .addEventListener('click', (element) => {
                document
                    .getElementById('payment-request-button')
                    .classList.remove('hidden');
                document.getElementById('save-card--container').style.display =
                    'grid';
                document.querySelector('input[name=token]').value = '';

                document.querySelector(
                    '.pay-now-button-container'
                ).style.display = 'none';
            });

        document
            .getElementById('pay-now')
            .addEventListener('click', (event) => {
                event.target.parentElement.disabled = true;

                document.querySelector('#server-response').submit();
            });

        document.querySelector('.pay-now-button-container').style.display =
            'none';
    }
}

new StripeBrowserPay().handle();