mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
payment details added on payment page.
This commit is contained in:
Kishan Patel
parent
c9938c9434
commit
dc2ebc8d4f
@ -102,7 +102,6 @@
|
||||
@section('gateway_footer')
|
||||
<script>
|
||||
function onTokenCreated(params) {
|
||||
console.log(params);
|
||||
document.getElementById('one_time_token').value=params.onetime_token;
|
||||
document.getElementById('last_4').value=params.last_4;
|
||||
let button = document.querySelector("#form_btn");
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Bank Transfer', 'card_title' => 'Bank Transfer'])
|
||||
|
||||
@section('gateway_head')
|
||||
{{-- <meta name="authorize-public-key" content="{{ $public_client_id }}">
|
||||
<meta name="authorize-login-id" content="{{ $api_login_id }}"> --}}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
|
||||
|
||||
<link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
|
||||
@if($gateway->forte->company_gateway->getConfigField('testMode'))
|
||||
<script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
|
||||
@else
|
||||
<script type="text/javascript" src="https://api.forte.net/js/v1"></script>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@section('gateway_content')
|
||||
@ -22,7 +20,7 @@
|
||||
<input type="hidden" name="token" id="token"/>
|
||||
<input type="hidden" name="store_card" id="store_card"/>
|
||||
|
||||
<div id="errors"></div>
|
||||
<div id="forte_errors"></div>
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
|
||||
Bank Transfer
|
||||
@ -31,29 +29,19 @@
|
||||
@include('portal.ninja2020.gateways.includes.payment_details')
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
|
||||
@if(count($tokens) > 0)
|
||||
@foreach($tokens as $token)
|
||||
<label class="mr-4">
|
||||
<input
|
||||
type="radio"
|
||||
data-token="{{ $token->hashed_id }}"
|
||||
name="payment_token"
|
||||
id="payment_token"
|
||||
value="{{ $token->token }}"
|
||||
class="form-radio cursor-pointer toggle-payment-with-token"/>
|
||||
<span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
|
||||
@if($client->getBankTransferGateway())
|
||||
<a data-cy="add-bank-account-link" href="{{ route('client.payment_methods.create', ['method' => $client->getBankTransferMethodType()]) }}" class="button button-primary bg-primary">
|
||||
{{ ctrans('texts.bank_account') }}
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<input type="hidden" name="payment_token" id="payment_token">
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.routing_number')])
|
||||
<input class="input w-full" id="routing-number" type="text" required>
|
||||
@endcomponent
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.account_number')])
|
||||
<input class="input w-full" id="account-number" type="text" required>
|
||||
@endcomponent
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element-single')
|
||||
<input type="checkbox" class="form-checkbox mr-1" name="accept_terms" id="accept-terms" required>
|
||||
<label for="accept-terms" class="cursor-pointer">{{ ctrans('texts.ach_authorization', ['company' => auth()->user()->company->present()->name, 'email' => auth('contact')->user()->client->company->settings->email]) }}</label>
|
||||
@endcomponent
|
||||
@endcomponent
|
||||
<div class="bg-white px-4 py-5 flex justify-end">
|
||||
<button type="button"
|
||||
@ -64,22 +52,39 @@
|
||||
<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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
|
||||
<input type="submit" style="display: none" id="form_btn">
|
||||
</button>
|
||||
</div>
|
||||
<input type="submit" style="display: none" id="form_btn">
|
||||
</form>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
<script>
|
||||
function submitPay(){
|
||||
if ($("input:radio[name='payment_token']").is(":checked") == true) {
|
||||
function onTokenCreated(params) {
|
||||
document.getElementById('payment_token').value=params.onetime_token;
|
||||
let button = document.querySelector("#form_btn");
|
||||
button.click();
|
||||
}else{
|
||||
document.getElementById('errors').innerHTML='<div class="alert alert-failure mb-4">Please select payemnt method</div>'
|
||||
button.click();
|
||||
}
|
||||
function onTokenFailed(params) {
|
||||
var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
|
||||
document.getElementById("forte_errors").innerHTML = errors;
|
||||
}
|
||||
function submitPay(){
|
||||
var account_number=document.getElementById('account-number').value;
|
||||
var routing_number=document.getElementById('routing-number').value;
|
||||
|
||||
var data = {
|
||||
api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
|
||||
account_number: account_number,
|
||||
routing_number: routing_number,
|
||||
account_type: "checking",
|
||||
}
|
||||
|
||||
forte.createToken(data)
|
||||
.success(onTokenCreated)
|
||||
.error(onTokenFailed);
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
method="post" id="server_response">
|
||||
@csrf
|
||||
|
||||
{{-- <input type="hidden" name="company_gateway_id" value="{{ $gateway->company_gateway->id }}"> --}}
|
||||
<input type="hidden" name="payment_method_id" value="1">
|
||||
<input type="hidden" name="one_time_token" id="one_time_token">
|
||||
<input type="hidden" name="card_type" id="card_type">
|
||||
@ -73,7 +72,6 @@
|
||||
@section('gateway_footer')
|
||||
<script>
|
||||
function onTokenCreated(params) {
|
||||
console.log(params);
|
||||
document.getElementById('one_time_token').value=params.onetime_token;
|
||||
document.getElementById('last_4').value=params.last_4;
|
||||
let button = document.querySelector("#form_btn");
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.payment_type_credit_card'), 'card_title' => ctrans('texts.payment_type_credit_card')])
|
||||
|
||||
@section('gateway_head')
|
||||
{{-- <meta name="authorize-public-key" content="{{ $public_client_id }}">
|
||||
<meta name="authorize-login-id" content="{{ $api_login_id }}"> --}}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||
<script src="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
|
||||
<script src="{{ asset('js/clients/payments/forte-card-js.min.js') }}"></script>
|
||||
|
||||
<link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
|
||||
|
||||
@if($gateway->forte->company_gateway->getConfigField('testMode'))
|
||||
<script type="text/javascript" src="https://sandbox.forte.net/api/js/v1"></script>
|
||||
@else
|
||||
<script type="text/javascript" src="https://api.forte.net/js/v1"></script>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@section('gateway_content')
|
||||
@ -22,7 +25,7 @@
|
||||
<input type="hidden" name="token" id="token"/>
|
||||
<input type="hidden" name="store_card" id="store_card"/>
|
||||
|
||||
<div id="errors"></div>
|
||||
<div id="forte_errors"></div>
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.payment_type')])
|
||||
{{ ctrans('texts.credit_card') }}
|
||||
@ -31,30 +34,9 @@
|
||||
@include('portal.ninja2020.gateways.includes.payment_details')
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')])
|
||||
@if(count($tokens) > 0)
|
||||
@foreach($tokens as $token)
|
||||
<label class="mr-4">
|
||||
<input type="hidden" name="card_brand" value="{{optional($token->meta)->brand}}">
|
||||
<input
|
||||
type="radio"
|
||||
data-token="{{ $token->hashed_id }}"
|
||||
name="payment_token"
|
||||
id="payment_token"
|
||||
value="{{ $token->token }}"
|
||||
class="form-radio cursor-pointer toggle-payment-with-token"/>
|
||||
<span class="ml-1 cursor-pointer">**** {{ optional($token->meta)->last4 }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
@else
|
||||
<div class="relative" x-data="{ open: false }" x-on:click.away="open = false">
|
||||
<!-- Add payment method button -->
|
||||
@if($client->getCreditCardGateway())
|
||||
<a data-cy="add-credit-card-link" href="{{ route('client.payment_methods.create', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}" class="button button-primary bg-primary">
|
||||
{{ ctrans('texts.credit_card') }}
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<input type="hidden" name="card_brand" id="card_brand">
|
||||
<input type="hidden" name="payment_token" id="payment_token">
|
||||
@include('portal.ninja2020.gateways.forte.includes.credit_card')
|
||||
|
||||
@endcomponent
|
||||
<div class="bg-white px-4 py-5 flex justify-end">
|
||||
@ -66,22 +48,43 @@
|
||||
<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>{{ $slot ?? ctrans('texts.pay_now') }}</span>
|
||||
<input type="submit" style="display: none" id="form_btn">
|
||||
</button>
|
||||
</div>
|
||||
<input type="submit" style="display: none" id="form_btn">
|
||||
</form>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
<script>
|
||||
function submitPay(){
|
||||
if ($("input:radio[name='payment_token']").is(":checked") == true) {
|
||||
function onTokenCreated(params) {
|
||||
document.getElementById('payment_token').value=params.onetime_token;
|
||||
document.getElementById('card_brand').value=params.card_type;
|
||||
let button = document.querySelector("#form_btn");
|
||||
button.click();
|
||||
}else{
|
||||
document.getElementById('errors').innerHTML='<div class="alert alert-failure mb-4">Please select payemnt method</div>'
|
||||
button.click();
|
||||
}
|
||||
function onTokenFailed(params) {
|
||||
var errors = '<div class="alert alert-failure mb-4"><ul><li>'+ params.response_description +'</li></ul></div>';
|
||||
document.getElementById("forte_errors").innerHTML = errors;
|
||||
}
|
||||
function submitPay(){
|
||||
var month=document.querySelector('input[name=expiry-month]').value;
|
||||
var year=document.querySelector('input[name=expiry-year]').value;
|
||||
var cc=document.getElementById('card_number').value.replaceAll(' ','');
|
||||
var cvv=document.getElementById('cvv').value;
|
||||
|
||||
var data = {
|
||||
api_login_id: '{{$gateway->forte->company_gateway->getConfigField("apiLoginId")}}',
|
||||
card_number: cc,
|
||||
expire_year: year,
|
||||
expire_month: month,
|
||||
cvv: cvv,
|
||||
}
|
||||
|
||||
forte.createToken(data)
|
||||
.success(onTokenCreated)
|
||||
.error(onTokenFailed);
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user