diff --git a/app/PaymentDrivers/Stripe/CreditCard.php b/app/PaymentDrivers/Stripe/CreditCard.php index 63b4a997096b..d89a3c0e81d6 100644 --- a/app/PaymentDrivers/Stripe/CreditCard.php +++ b/app/PaymentDrivers/Stripe/CreditCard.php @@ -39,7 +39,7 @@ class CreditCard { $intent['intent'] = $this->stripe->getSetupIntent(); - return render('gateways.stripe.add_credit_card', array_merge($data, $intent)); + return render('gateways.stripe.credit_card.authorize', array_merge($data, $intent)); } public function authorizeResponse($request) @@ -107,7 +107,7 @@ class CreditCard $data['intent'] = $this->stripe->createPaymentIntent($payment_intent_data); $data['gateway'] = $this->stripe; - return render('gateways.stripe.credit_card', $data); + return render('gateways.stripe.credit_card.pay', $data); } public function paymentResponse($request) diff --git a/resources/js/clients/payments/stripe-credit-card.js b/resources/js/clients/payments/stripe-credit-card.js index 84d96d94ea61..a23e62ab1b34 100644 --- a/resources/js/clients/payments/stripe-credit-card.js +++ b/resources/js/clients/payments/stripe-credit-card.js @@ -9,10 +9,11 @@ */ class StripeCreditCard { - constructor(key, token, secret) { + constructor(key, token, secret, onlyAuthorization) { this.key = key; this.token = token; this.secret = secret; + this.onlyAuthorization = onlyAuthorization; } setupStripe() { @@ -111,29 +112,82 @@ class StripeCreditCard { this.payNowButton.querySelector('span').classList.remove('hidden'); } + handleAuthorization() { + let cardHolderName = document.getElementById('cardholder-name'); + + let payNowButton = document.getElementById('authorize-card'); + + this.payNowButton = payNowButton; + this.payNowButton.disabled = true; + + this.payNowButton.querySelector('svg').classList.remove('hidden'); + this.payNowButton.querySelector('span').classList.add('hidden'); + + this.stripe + .handleCardSetup(this.secret, this.cardElement, { + payment_method_data: { + billing_details: { name: cardHolderName.value }, + }, + }) + .then((result) => { + if (result.error) { + return this.handleFailure(result); + } + + return this.handleSuccessfulAuthorization(result); + }); + } + + handleSuccessfulAuthorization(result) { + document.getElementById('gateway_response').value = JSON.stringify( + result.setupIntent + ); + + document.getElementById('server_response').submit(); + } + handle() { this.setupStripe(); - if (this.token) { - document - .getElementById('pay-now-with-token') - .addEventListener('click', () => { - return this.completePaymentUsingToken(); - }); - } - - if (!this.token) { + if (this.onlyAuthorization) { this.createElement().mountCardElement(); - document.getElementById('pay-now').addEventListener('click', () => { - return this.completePaymentWithoutToken(); - }); + document + .getElementById('authorize-card') + .addEventListener('click', () => { + return this.handleAuthorization(); + }); + } else { + if (this.token) { + document + .getElementById('pay-now-with-token') + .addEventListener('click', () => { + return this.completePaymentUsingToken(); + }); + } + + if (!this.token) { + this.createElement().mountCardElement(); + + document + .getElementById('pay-now') + .addEventListener('click', () => { + return this.completePaymentWithoutToken(); + }); + } } } } -const publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content; -const token = document.querySelector('meta[name="stripe-token"]').content; -const secret = document.querySelector('meta[name="stripe-secret"]').content; +const publishableKey = + document.querySelector('meta[name="stripe-publishable-key"]').content ?? ''; -new StripeCreditCard(publishableKey, token, secret).handle(); +const token = document.querySelector('meta[name="stripe-token"]').content ?? ''; + +const secret = + document.querySelector('meta[name="stripe-secret"]').content ?? ''; + +const onlyAuthorization = + document.querySelector('meta[name="only-authorization"]').content ?? ''; + +new StripeCreditCard(publishableKey, token, secret, onlyAuthorization).handle(); diff --git a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php deleted file mode 100644 index 373166ed5e61..000000000000 --- a/resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php +++ /dev/null @@ -1,52 +0,0 @@ -@extends('portal.ninja2020.layout.app') -@section('meta_title', ctrans('texts.add_credit_card')) - -@push('head') - -@endpush - -@section('body') -
- @csrf - - - - -
- -
-
-
- -
-
-

- {{ ctrans('texts.add_credit_card') }} -

-

- {{ ctrans('texts.authorize_for_future_use') }} -

-
-
- @include('portal.ninja2020.gateways.stripe.includes.card_widget') - -
- -
-
-
-
-
-
-@endsection - -@push('footer') - - -@endpush diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old b/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old deleted file mode 100644 index 1fbef7f295b2..000000000000 --- a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php.old +++ /dev/null @@ -1,65 +0,0 @@ -@extends('portal.ninja2020.layout.app') -@section('meta_title', ctrans('texts.pay_now')) - -@push('head') - - -@endpush - -@section('body') -
- @csrf - - - - - - -
- -
-
-
- -
-
-

- {{ ctrans('texts.pay_now') }} -

-

- {{ ctrans('texts.complete_your_payment') }} -

-
-
-
- @include('portal.ninja2020.gateways.includes.payment_details') - - @if((int)$total['amount_with_fee'] == 0) - @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit') - @elseif($token) - @include('portal.ninja2020.gateways.stripe.includes.pay_with_token') - @else - @include('portal.ninja2020.gateways.stripe.includes.card_widget') - -
- -
- @endif -
-
-
-
-
-
-@endsection - -@push('footer') - - -@endpush diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card/authorize.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/authorize.blade.php new file mode 100644 index 000000000000..9045ad80d2ab --- /dev/null +++ b/resources/views/portal/ninja2020/gateways/stripe/credit_card/authorize.blade.php @@ -0,0 +1,35 @@ +@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Stripe (Credit card)', 'card_title' => 'Stripe (Credit card)']) + +@section('gateway_head') + + + + +@endsection + +@section('gateway_content') +
+ @csrf + + + + +
+ + + + @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')]) + {{ ctrans('texts.credit_card') }} (Stripe) + @endcomponent + + @include('portal.ninja2020.gateways.stripe.includes.card_widget') + + @component('portal.ninja2020.gateways.includes.pay_now', ['id' => 'authorize-card']) + {{ __('texts.save') }} + @endcomponent +@endsection + +@section('gateway_footer') + + +@endsection \ No newline at end of file diff --git a/resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php b/resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php similarity index 100% rename from resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php rename to resources/views/portal/ninja2020/gateways/stripe/credit_card/pay.blade.php diff --git a/webpack.mix.js b/webpack.mix.js index 5edb7af9873c..120a08b6f0dc 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -2,10 +2,6 @@ const mix = require("laravel-mix"); const tailwindcss = require("tailwindcss"); mix.js("resources/js/app.js", "public/js") - .js( - "resources/js/clients/payment_methods/authorize-stripe-card.js", - "public/js/clients/payment_methods/authorize-stripe-card.js" - ) .js( "resources/js/clients/payment_methods/authorize-authorize-card.js", "public/js/clients/payment_methods/authorize-authorize-card.js" @@ -47,8 +43,8 @@ mix.js("resources/js/app.js", "public/js") "public/js/clients/quotes/approve.js" ) .js( - "resources/js/clients/payments/process.js", - "public/js/clients/payments/process.js" + "resources/js/clients/payments/stripe-credit-card.js", + "public/js/clients/payments/stripe-credit-card.js" ) .js( "resources/js/setup/setup.js",