mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-06-23 20:00:33 -04:00
stripe credit card
This commit is contained in:
Benjamin Beganović
parent
6af7aa7dc0
commit
08501cceb6
@ -8,10 +8,11 @@
|
|||||||
* @license https://opensource.org/licenses/AAL
|
* @license https://opensource.org/licenses/AAL
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class ProcessStripePayment {
|
class StripeCreditCard {
|
||||||
constructor(key, usingToken) {
|
constructor(key, token, secret) {
|
||||||
this.key = key;
|
this.key = key;
|
||||||
this.usingToken = usingToken;
|
this.token = token;
|
||||||
|
this.secret = secret;
|
||||||
}
|
}
|
||||||
|
|
||||||
setupStripe() {
|
setupStripe() {
|
||||||
@ -67,7 +68,7 @@ class ProcessStripePayment {
|
|||||||
let cardHolderName = document.getElementById('cardholder-name');
|
let cardHolderName = document.getElementById('cardholder-name');
|
||||||
|
|
||||||
this.stripe
|
this.stripe
|
||||||
.handleCardPayment(payNowButton.dataset.secret, this.cardElement, {
|
.handleCardPayment(this.secret, this.cardElement, {
|
||||||
payment_method_data: {
|
payment_method_data: {
|
||||||
billing_details: { name: cardHolderName.value },
|
billing_details: { name: cardHolderName.value },
|
||||||
},
|
},
|
||||||
@ -131,10 +132,8 @@ class ProcessStripePayment {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const publishableKey = document.querySelector(
|
const publishableKey = document.querySelector('meta[name="stripe-publishable-key"]').content;
|
||||||
'meta[name="stripe-publishable-key"]'
|
const token = document.querySelector('meta[name="stripe-token"]').content;
|
||||||
).content;
|
const secret = document.querySelector('meta[name="stripe-secret"]').content;
|
||||||
|
|
||||||
const usingToken = document.querySelector('meta[name="using-token"]').content;
|
new StripeCreditCard(publishableKey, token, secret).handle();
|
||||||
|
|
||||||
new ProcessStripePayment(publishableKey, usingToken).handle();
|
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<div class="bg-white px-4 py-5 flex justify-end">
|
||||||
|
<button type="button" id="{{ $id ?? 'pay-now' }}" 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.pay_now') }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
@ -1,12 +1,12 @@
|
|||||||
@extends('portal.ninja2020.layout.app')
|
@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Stripe (Credit card)', 'card_title' => 'Stripe (Credit card)'])
|
||||||
@section('meta_title', ctrans('texts.pay_now'))
|
|
||||||
|
|
||||||
@push('head')
|
@section('gateway_head')
|
||||||
<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
|
<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
|
||||||
<meta name="using-token" content="{{ boolval($token) }}">
|
<meta name="stripe-token" content="{{ $token }}">
|
||||||
@endpush
|
<meta name="stripe-secret" content="{{ $intent->client_secret }}">
|
||||||
|
@endsection
|
||||||
|
|
||||||
@section('body')
|
@section('gateway_content')
|
||||||
<form action="{{ route('client.payments.response') }}" method="post" id="server-response">
|
<form action="{{ route('client.payments.response') }}" method="post" id="server-response">
|
||||||
@csrf
|
@csrf
|
||||||
<input type="hidden" name="gateway_response">
|
<input type="hidden" name="gateway_response">
|
||||||
@ -17,49 +17,15 @@
|
|||||||
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
|
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="container mx-auto">
|
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
|
||||||
<div class="grid grid-cols-6 gap-4">
|
{{ ctrans('texts.credit_card') }} (Stripe)
|
||||||
<div class="col-span-6 md:col-start-2 md:col-span-4">
|
@endcomponent
|
||||||
<div class="alert alert-failure mb-4" hidden id="errors"></div>
|
|
||||||
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
||||||
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
|
||||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
{{ ctrans('texts.pay_now') }}
|
|
||||||
</h3>
|
|
||||||
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
|
||||||
{{ ctrans('texts.complete_your_payment') }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<dl>
|
|
||||||
@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')
|
@include('portal.ninja2020.gateways.stripe.includes.card_widget')
|
||||||
|
@include('portal.ninja2020.gateways.includes.pay_now')
|
||||||
<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.pay_now') }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@push('footer')
|
@section('gateway_footer')
|
||||||
<script src="https://js.stripe.com/v3/"></script>
|
<script src="https://js.stripe.com/v3/"></script>
|
||||||
<script src="{{ asset('js/clients/payments/process.js') }}"></script>
|
<script src="{{ asset('js/clients/payments/stripe-credit-card.js') }}"></script>
|
||||||
@endpush
|
@endsection
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
@extends('portal.ninja2020.layout.app')
|
||||||
|
@section('meta_title', ctrans('texts.pay_now'))
|
||||||
|
|
||||||
|
@push('head')
|
||||||
|
<meta name="stripe-publishable-key" content="{{ $gateway->getPublishableKey() }}">
|
||||||
|
<meta name="using-token" content="{{ boolval($token) }}">
|
||||||
|
@endpush
|
||||||
|
|
||||||
|
@section('body')
|
||||||
|
<form action="{{ route('client.payments.response') }}" method="post" id="server-response">
|
||||||
|
@csrf
|
||||||
|
<input type="hidden" name="gateway_response">
|
||||||
|
<input type="hidden" name="store_card">
|
||||||
|
<input type="hidden" name="payment_hash" value="{{$payment_hash}}">
|
||||||
|
|
||||||
|
<input type="hidden" name="company_gateway_id" value="{{ $gateway->getCompanyGatewayId() }}">
|
||||||
|
<input type="hidden" name="payment_method_id" value="{{ $payment_method_id }}">
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="container mx-auto">
|
||||||
|
<div class="grid grid-cols-6 gap-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="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||||
|
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||||
|
{{ ctrans('texts.pay_now') }}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
|
||||||
|
{{ ctrans('texts.complete_your_payment') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dl>
|
||||||
|
@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')
|
||||||
|
|
||||||
|
<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.pay_now') }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@push('footer')
|
||||||
|
<script src="https://js.stripe.com/v3/"></script>
|
||||||
|
<script src="{{ asset('js/clients/payments/process.js') }}"></script>
|
||||||
|
@endpush
|
||||||
@ -1,39 +1,13 @@
|
|||||||
@unless(isset($show_name) && $show_name == false)
|
@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">
|
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.name')])
|
||||||
<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') }}">
|
<input class="input w-full" id="cardholder-name" type="text" placeholder="{{ ctrans('texts.name') }}">
|
||||||
</dd>
|
@endcomponent
|
||||||
</div>
|
|
||||||
@endunless
|
@endunless
|
||||||
|
|
||||||
@unless(isset($show_card_element) && $show_card_element == false)
|
@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">
|
@component('portal.ninja2020.components.general.card-element-single')
|
||||||
<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>
|
<div id="card-element"></div>
|
||||||
</dd>
|
@endcomponent
|
||||||
</div>
|
|
||||||
@endunless
|
@endunless
|
||||||
|
|
||||||
@unless(isset($show_save) && $show_save == false)
|
@include('portal.ninja2020.gateways.includes.save_card')
|
||||||
<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
|
|
||||||
Loading…
x
Reference in New Issue
Block a user