Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-11-03 22:17:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4170 from beganovich/v2-extract-stripe-into-partials

Browse Source 
(v5) Split Stripe credit card payments into partials
This commit is contained in:
David Bomba 2020-10-16 07:13:01 +11:00 committed by GitHub
commit 262466c186
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 149 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
View File

@ -1,6 +1,6 @@
{ {
"/js/app.js": "/js/app.js?id=a33a5a58bfc6e2174841", "/js/app.js": "/js/app.js?id=a33a5a58bfc6e2174841",
"/css/app.css": "/css/app.css?id=b2e7d49a848e3cfb6370", "/css/app.css": "/css/app.css?id=fc37092c9a39881e5e2e",
"/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=b0f29d5fdfa492962c22", "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=b0f29d5fdfa492962c22",
"/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=d7e708d66a9c769b4c6e", "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=d7e708d66a9c769b4c6e",
"/js/clients/payment_methods/authorize-ach.js": "/js/clients/payment_methods/authorize-ach.js?id=c73d32c192c36fe44123", "/js/clients/payment_methods/authorize-ach.js": "/js/clients/payment_methods/authorize-ach.js?id=c73d32c192c36fe44123",

37
resources/views/portal/ninja2020/gateways/includes/payment_details.blade.php Normal file
View File

@ -0,0 +1,37 @@
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.subtotal') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
</dd>
@if($total['fee_total'] > 0)
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.gateway_fees') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
</dd>
@endif
@if($total['credit_totals'] > 0)
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.credit_amount') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['credit_totals'], $client) }}
</dd>
@endif
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.amount_due') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}
</dd>
</div>

117
resources/views/portal/ninja2020/gateways/stripe/add_credit_card.blade.php
View File

@ -2,96 +2,51 @@
@section('meta_title', ctrans('texts.add_credit_card')) @section('meta_title', ctrans('texts.add_credit_card'))
@push('head') @push('head')
<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}"> <meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
@endpush @endpush
@section('body') @section('body')
<form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response"> <form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" method="post" id="server_response">
@csrf @csrf
<input type="hidden" name="company_gateway_id" value="{{ $gateway->gateway_id }}"> <input type="hidden" name="company_gateway_id" value="{{ $gateway->gateway_id }}">
<input type="hidden" name="payment_method_id" value="1"> <input type="hidden" name="payment_method_id" value="1">
<input type="hidden" name="gateway_response" id="gateway_response"> <input type="hidden" name="gateway_response" id="gateway_response">
<input type="hidden" name="is_default" id="is_default"> <input type="hidden" name="is_default" id="is_default">
</form> </form>
<div class="container mx-auto">
<div class="grid grid-cols-6 gap-4"> <div class="container mx-auto">
<div class="col-span-6 md:col-start-2 md:col-span-4"> <div class="grid grid-cols-6 gap-4">
<div class="alert alert-failure mb-4" hidden id="errors"></div> <div class="col-span-6 md:col-start-2 md:col-span-4">
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> <div class="alert alert-failure mb-4" hidden id="errors"></div>
<div class="px-4 py-5 border-b border-gray-200 sm:px-6"> <div class="bg-white shadow overflow-hidden sm:rounded-lg">
<h3 class="text-lg leading-6 font-medium text-gray-900"> <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
{{ ctrans('texts.add_credit_card') }} <h3 class="text-lg leading-6 font-medium text-gray-900">
</h3> {{ ctrans('texts.add_credit_card') }}
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500"> </h3>
{{ ctrans('texts.authorize_for_future_use') }} <p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
</p> {{ ctrans('texts.authorize_for_future_use') }}
</div> </p>
<div> </div>
<dl> <div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center"> @include('portal.ninja2020.gateways.stripe.includes.card_widget')
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
{{ ctrans('texts.name') }} <div class="bg-white px-4 py-5 flex justify-end">
</dt> <button type="button" id="card-button" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2"> <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<input class="input w-full" id="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
</dd> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</div><div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> </svg>
<dt class="text-sm leading-5 font-medium text-gray-500"> <span>{{ __('texts.save') }}</span>
{{ ctrans('texts.credit_card') }} </button>
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<div id="card-element"></div>
</dd>
</div>
<div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.token_billing_checkbox') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<label class="mr-4">
<input
type="radio"
class="form-radio cursor-pointer"
name="token-billing-checkbox"
id="proxy_is_default"
value="true"
{{ ($gateway->token_billing == 'always' || $gateway->token_billing == 'optout') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
</label>
<label>
<input
type="radio"
class="form-radio cursor-pointer"
name="token-billing-checkbox"
id="proxy_is_default"
value="false"
{{ ($gateway->token_billing == 'off' || $gateway->token_billing == 'optin') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
</label>
</dd>
</div>
<div class="bg-white px-4 py-5 flex justify-end">
<button
type="button"
id="card-button"
data-secret="{{ $intent->client_secret }}"
class="button button-primary bg-primary">
<svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>{{ __('texts.save') }}</span>
</button>
</div>
</dl>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection
@push('footer') @push('footer')
<script src="https://js.stripe.com/v3/"></script> <script src="https://js.stripe.com/v3/"></script>
<script src="{{ asset('js/clients/payment_methods/authorize-stripe-card.js') }}"></script> <script src="{{ asset('js/clients/payment_methods/authorize-stripe-card.js') }}"></script>
@endpush @endpush

126
resources/views/portal/ninja2020/gateways/stripe/credit_card.blade.php
View File

@ -16,13 +16,10 @@
<input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}"> <input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}"> <input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
</form> </form>
<form action="{{route('client.payments.credit_response')}}" method="post" id="credit-payment">
@csrf
<input type="hidden" name="payment_hash" value="{{$payment_hash}}">
</form>
<div class="container mx-auto"> <div class="container mx-auto">
<div class="grid grid-cols-6 gap-4"> <div class="grid grid-cols-6 gap-4">
<div class="col-span-6 md:col-start-2 md:col-span-4"> <div class="col-span-6 md:col-start-2 md:col-span-4">
<div class="alert alert-failure mb-4" hidden id="errors"></div> <div class="alert alert-failure mb-4" hidden id="errors"></div>
<div class="bg-white shadow overflow-hidden sm:rounded-lg"> <div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6"> <div class="px-4 py-5 border-b border-gray-200 sm:px-6">
@ -35,58 +32,17 @@
</div> </div>
<div> <div>
<dl> <dl>
@include('portal.ninja2020.gateways.includes.payment_details')
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.subtotal') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['invoice_totals'], $client) }}
</dd>
@if($total['fee_total'] > 0)
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.gateway_fees') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['fee_total'], $client) }}
</dd>
@endif
@if($total['credit_totals'] > 0)
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.credit_amount') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['credit_totals'], $client) }}
</dd>
@endif
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.amount_due') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}
</dd>
</div>
@if((int)$total['amount_with_fee'] == 0) @if((int)$total['amount_with_fee'] == 0)
<!-- finalize with credits only --> @include('portal.ninja2020.gateways.stripe.includes.pay_with_credit')
<div class="bg-white px-4 py-5 flex justify-end">
<button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
</div>
@elseif($token) @elseif($token)
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center"> @include('portal.ninja2020.gateways.stripe.includes.pay_with_token')
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4"> @else
{{ ctrans('texts.credit_card') }} @include('portal.ninja2020.gateways.stripe.includes.card_widget')
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
</dd>
</div>
<div class="bg-white px-4 py-5 flex justify-end"> <div class="bg-white px-4 py-5 flex justify-end">
<button <button type="button" id="pay-now" data-secret="{{ $intent->client_secret }}" class="button button-primary bg-primary">
type="button"
data-secret="{{ $intent->client_secret }}"
data-token="{{ $token->token }}"
id="pay-now-with-token"
class="button button-primary bg-primary inline-flex items-center">
<svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
@ -94,68 +50,6 @@
<span>{{ __('texts.pay_now') }}</span> <span>{{ __('texts.pay_now') }}</span>
</button> </button>
</div> </div>
@else
<div
class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
{{ ctrans('texts.name') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<input class="input w-full" id="cardholder-name" type="text"
placeholder="{{ ctrans('texts.name') }}">
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.credit_card') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<div id="card-element"></div>
</dd>
</div>
<div class="{{ ($gateway->company_gateway->token_billing == 'optin' || $gateway->company_gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.token_billing_checkbox') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<label class="mr-4">
<input
type="radio"
class="form-radio cursor-pointer"
name="token-billing-checkbox"
id="proxy_is_default"
value="true"
{{ ($gateway->company_gateway->token_billing == 'always' || $gateway->company_gateway->token_billing == 'optout') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
</label>
<label>
<input
type="radio"
class="form-radio cursor-pointer"
name="token-billing-checkbox"
id="proxy_is_default"
value="false"
{{ ($gateway->company_gateway->token_billing == 'off' || $gateway->company_gateway->token_billing == 'optin') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
</label>
</dd>
</div>
<div class="bg-white px-4 py-5 flex justify-end">
<button
type="button"
id="pay-now"
data-secret="{{ $intent->client_secret }}"
class="button button-primary bg-primary">
<svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>{{ __('texts.save') }}</span>
</button>
</div>
@endif @endif
</dl> </dl>
</div> </div>

39
resources/views/portal/ninja2020/gateways/stripe/includes/card_widget.blade.php Normal file
View File

@ -0,0 +1,39 @@
@unless(isset($show_name) && $show_name == false)
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
{{ ctrans('texts.name') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<input class="input w-full" id="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
</dd>
</div>
@endunless
@unless(isset($show_card_element) && $show_card_element == false)
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.credit_card') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<div id="card-element"></div>
</dd>
</div>
@endunless
@unless(isset($show_save) && $show_save == false)
<div class="{{ ($gateway->token_billing == 'optin' || $gateway->token_billing == 'optout') ? 'sm:grid' : 'hidden' }} bg-gray-50 px-4 py-5 sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
{{ ctrans('texts.token_billing_checkbox') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<label class="mr-4">
<input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="true" {{ ($gateway->token_billing == 'always' || $gateway->token_billing == 'optout') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.yes') }}</span>
</label>
<label>
<input type="radio" class="form-radio cursor-pointer" name="token-billing-checkbox" id="proxy_is_default" value="false" {{ ($gateway->token_billing == 'off' || $gateway->token_billing == 'optin') ? 'checked' : '' }} />
<span class="ml-1 cursor-pointer">{{ ctrans('texts.no') }}</span>
</label>
</dd>
</div>
@endunless

8
resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_credit.blade.php Normal file
View File

@ -0,0 +1,8 @@
<form action="{{ route('client.payments.credit_response') }}" method="post" id="credit-payment">
@csrf
<input type="hidden" name="payment_hash" value="{{ $payment_hash }}">
</form>
<div class="bg-white px-4 py-5 flex justify-end">
<button form="credit-payment" class="button button-primary bg-primary inline-flex items-center">Pay with credit</button>
</div>

17
resources/views/portal/ninja2020/gateways/stripe/includes/pay_with_token.blade.php Normal file
View File

@ -0,0 +1,17 @@
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 flex items-center">
<dt class="text-sm leading-5 font-medium text-gray-500 mr-4">
{{ ctrans('texts.credit_card') }}
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
{{ strtoupper($token->meta->brand) }} - **** {{ $token->meta->last4 }}
</dd>
</div>
<div class="bg-white px-4 py-5 flex justify-end">
<button type="button" data-secret="{{ $intent->client_secret }}" data-token="{{ $token->token }}" id="pay-now-with-token" class="button button-primary bg-primary inline-flex items-center">
<svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>{{ __('texts.pay_now') }}</span>
</button>
</div>