Mirrors/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-11-10 21:22:58 +01:00
Code Issues Releases Activity

Handle authorization on frontend

Browse Source
This commit is contained in:
Benjamin Beganović 2021-10-14 18:43:41 +02:00
parent 8053de40d2
commit 5f2de60c9c
1 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
resources/views/portal/ninja2020/gateways/checkout/credit_card/authorize.blade.php
View File

@ -1,19 +1,29 @@
@extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card']) @extends('portal.ninja2020.layout.payments', ['gateway_title' => 'Credit card', 'card_title' => 'Credit card'])
@section('gateway_head') @section('gateway_head')
<meta name="public-key" content="{{ $gateway->getPublishableKey() }}">
@include('portal.ninja2020.gateways.checkout.credit_card.includes.styles') @include('portal.ninja2020.gateways.checkout.credit_card.includes.styles')
<script src="https://cdn.checkout.com/js/framesv2.min.js"></script> <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
@endsection @endsection
@section('gateway_content') @section('gateway_content')
<form action="{{ route('client.payment_methods.store', ['method' => App\Models\GatewayType::CREDIT_CARD]) }}"
method="post" id="server_response">
@csrf
<input type="hidden" name="payment_method_id" value="{{ \App\Models\GatewayType::CREDIT_CARD }}">
<input type="hidden" name="gateway_response" id="gateway_response">
</form>
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')]) @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
{{ ctrans('texts.credit_card') }} {{ ctrans('texts.credit_card') }}
@endcomponent @endcomponent
@component('portal.ninja2020.components.general.card-element-single') @component('portal.ninja2020.components.general.card-element-single')
<div id="checkout--container"> <div id="checkout--container">
<form class="xl:flex xl:justify-center" id="payment-form" method="POST" action="#"> <form class="xl:flex xl:justify-center" id="authorization-form" method="POST" action="#">
<div class="one-liner"> <div class="one-liner">
<div class="card-frame"> <div class="card-frame">
<!-- form will be added here --> <!-- form will be added here -->
@ -32,10 +42,39 @@
@section('gateway_footer') @section('gateway_footer')
<script> <script>
class CheckoutCreditCardAuthorization { class CheckoutCreditCardAuthorization {
constructor() {} constructor() {
this.button = document.querySelector('#pay-button');
}
init() {
this.frames = Frames.init(
document.querySelector('meta[name=public-key]').content
);
}
handle() { handle() {
console.log('It works...'); this.init();
Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED, (event) => {
this.button.disabled = !Frames.isCardValid();
});
Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, (event) => {
document.querySelector(
'input[name="gateway_response"]'
).value = JSON.stringify(event);
document.getElementById('server_response').submit();
});
document
.querySelector('#authorization-form')
.addEventListener('submit', (event) => {
this.button.disabled = true;
event.preventDefault();
Frames.submitCard();
});
} }
} }