mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-09 03:14:30 -04:00
Credit card: Pay
This commit is contained in:
Benjamin Beganović
parent
4c8a486461
commit
9e146b7ef8
@ -1,9 +1,19 @@
|
|||||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
|
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
|
||||||
|
|
||||||
@section('gateway_head')
|
@section('gateway_head')
|
||||||
|
<meta name="wepay-environment" content="{{ config('ninja.wepay.environment') }}">
|
||||||
|
<meta name="wepay-action" content="payment">
|
||||||
|
<meta name="wepay-client-id" content="{{ config('ninja.wepay.client_id') }}">
|
||||||
|
|
||||||
|
<meta name="contact-email" content="{{ $contact->email }}">
|
||||||
|
<meta name="client-postal-code" content="{{ $contact->client->postal_code }}">
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
<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/card-js.min.js') }}"></script>
|
||||||
|
|
||||||
<link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
|
<link href="{{ asset('css/card-js.min.css') }}" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://static.wepay.com/min/js/tokenization.4.latest.js"></script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('gateway_content')
|
@section('gateway_content')
|
||||||
@ -61,189 +71,5 @@
|
|||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('gateway_footer')
|
@section('gateway_footer')
|
||||||
|
<script src="{{ asset('js/clients/payments/wepay-credit-card.js') }}"></script>
|
||||||
<script type="text/javascript" src="https://static.wepay.com/min/js/tokenization.4.latest.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
@if(config('ninja.wepay.environment') == 'staging')
|
|
||||||
WePay.set_endpoint("stage");
|
|
||||||
@else
|
|
||||||
WePay.set_endpoint("production");
|
|
||||||
@endif
|
|
||||||
// Shortcuts
|
|
||||||
var d = document;
|
|
||||||
d.id = d.getElementById,
|
|
||||||
valueById = function(id) {
|
|
||||||
return d.id(id).value;
|
|
||||||
};
|
|
||||||
|
|
||||||
// For those not using DOM libraries
|
|
||||||
var addEvent = function(e,v,f) {
|
|
||||||
if (!!window.attachEvent) { e.attachEvent('on' + v, f); }
|
|
||||||
else { e.addEventListener(v, f, false); }
|
|
||||||
};
|
|
||||||
|
|
||||||
let errors = document.getElementById('errors');
|
|
||||||
|
|
||||||
/* handle the switch between token and cc */
|
|
||||||
Array
|
|
||||||
.from(document.getElementsByClassName('toggle-payment-with-token'))
|
|
||||||
.forEach((element) => element.addEventListener('click', (e) => {
|
|
||||||
document
|
|
||||||
.getElementById('save-card--container').style.display = 'none';
|
|
||||||
document
|
|
||||||
.getElementById('wepay--credit-card-container').style.display = 'none';
|
|
||||||
|
|
||||||
document
|
|
||||||
.getElementById('token').value = e.target.dataset.token;
|
|
||||||
}));
|
|
||||||
|
|
||||||
let payWithCreditCardToggle = document.getElementById('toggle-payment-with-credit-card');
|
|
||||||
|
|
||||||
if (payWithCreditCardToggle) {
|
|
||||||
payWithCreditCardToggle
|
|
||||||
.addEventListener('click', () => {
|
|
||||||
document
|
|
||||||
.getElementById('save-card--container').style.display = 'grid';
|
|
||||||
document
|
|
||||||
.getElementById('wepay--credit-card-container').style.display = 'flex';
|
|
||||||
|
|
||||||
document
|
|
||||||
.getElementById('token').value = null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
/* handle the switch between token and cc */
|
|
||||||
|
|
||||||
/* Pay Now Button */
|
|
||||||
let payNowButton = document.getElementById('pay-now');
|
|
||||||
|
|
||||||
if (payNowButton) {
|
|
||||||
payNowButton
|
|
||||||
.addEventListener('click', (e) => {
|
|
||||||
|
|
||||||
payNowButton.disabled = true;
|
|
||||||
|
|
||||||
payNowButton.querySelector('svg').classList.remove('hidden');
|
|
||||||
payNowButton.querySelector('span').classList.add('hidden');
|
|
||||||
|
|
||||||
|
|
||||||
let token = document.getElementById('token').value;
|
|
||||||
|
|
||||||
/* Attach store card value to form */
|
|
||||||
let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
|
|
||||||
|
|
||||||
if (storeCard) {
|
|
||||||
document.getElementById("store_card").value = storeCard.value;
|
|
||||||
}
|
|
||||||
/* Attach store card value to form */
|
|
||||||
|
|
||||||
if(token){
|
|
||||||
handleTokenPayment(token)
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
handleCardPayment();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
/* Pay Now Button */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function handleTokenPayment(token)
|
|
||||||
{
|
|
||||||
|
|
||||||
document.querySelector('input[name="credit_card_id"]').value = null;
|
|
||||||
document.querySelector('input[name="token"]').value = token;
|
|
||||||
document.getElementById('server-response').submit();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Attach the event to the DOM
|
|
||||||
function handleCardPayment(){
|
|
||||||
|
|
||||||
var myCard = $('#my-card');
|
|
||||||
let payNowButton = document.getElementById('pay-now');
|
|
||||||
|
|
||||||
if(document.getElementById('cardholder_name') == "") {
|
|
||||||
document.getElementById('cardholder_name').focus();
|
|
||||||
errors.textContent = "Cardholder name required.";
|
|
||||||
errors.hidden = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
else if(myCard.CardJs('cardNumber') == ""){
|
|
||||||
document.getElementById('card_number').focus();
|
|
||||||
errors.textContent = "Card number required.";
|
|
||||||
errors.hidden = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
else if(myCard.CardJs('cvc') == ""){
|
|
||||||
document.getElementById('cvv').focus();
|
|
||||||
errors.textContent = "CVV number required.";
|
|
||||||
errors.hidden = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
else if(myCard.CardJs('expiryMonth') == ""){
|
|
||||||
// document.getElementById('expiry_month').focus();
|
|
||||||
errors.textContent = "Expiry Month number required.";
|
|
||||||
errors.hidden = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
else if(myCard.CardJs('expiryYear') == ""){
|
|
||||||
// document.getElementById('expiry_year').focus();
|
|
||||||
errors.textContent = "Expiry Year number required.";
|
|
||||||
errors.hidden = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var userName = [valueById('cardholder_name')].join(' ');
|
|
||||||
response = WePay.credit_card.create({
|
|
||||||
"client_id": "{{ config('ninja.wepay.client_id') }}",
|
|
||||||
"user_name": valueById('cardholder_name'),
|
|
||||||
"email": "{{ $contact->email }}",
|
|
||||||
"cc_number": myCard.CardJs('cardNumber'),
|
|
||||||
"cvv": myCard.CardJs('cvc'),
|
|
||||||
"expiration_month": myCard.CardJs('expiryMonth'),
|
|
||||||
"expiration_year": myCard.CardJs('expiryYear'),
|
|
||||||
"address": {
|
|
||||||
"postal_code": "{{ $contact->client->postal_code }}"
|
|
||||||
}
|
|
||||||
}, function(data) {
|
|
||||||
|
|
||||||
if (data.error) {
|
|
||||||
//console.log(data);
|
|
||||||
// handle error response error_description
|
|
||||||
|
|
||||||
payNowButton.disabled = false;
|
|
||||||
payNowButton.querySelector('svg').classList.add('hidden');
|
|
||||||
payNowButton.querySelector('span').classList.remove('hidden');
|
|
||||||
|
|
||||||
errors.textContent = '';
|
|
||||||
errors.textContent = data.error_description;
|
|
||||||
errors.hidden = false;
|
|
||||||
|
|
||||||
} else {
|
|
||||||
|
|
||||||
var token = data.credit_card_id;
|
|
||||||
|
|
||||||
document.querySelector('input[name="credit_card_id"]').value = token;
|
|
||||||
document.querySelector('input[name="token"]').value = null;
|
|
||||||
document.getElementById('server-response').submit();
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user