mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-07-07 14:24:31 -04:00
Merge pull request #6095 from beganovich/v5-2106-jsify-wepay
(v5) Standardize Javascript for WePay
This commit is contained in:
commit
b748412f6f
2
public/css/app.css
vendored
2
public/css/app.css
vendored
File diff suppressed because one or more lines are too long
2
public/js/clients/payment_methods/wepay-bank-account.js
vendored
Normal file
2
public/js/clients/payment_methods/wepay-bank-account.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! For license information please see wepay-bank-account.js.LICENSE.txt */
|
||||
!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/",t(t.s=20)}({20:function(e,n,t){e.exports=t("bIGw")},bIGw:function(e,n){function t(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var r=function(){function e(){!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e)}var n,r,o;return n=e,(r=[{key:"initializeWePay",value:function(){var e,n=null===(e=document.querySelector('meta[name="wepay-environment"]'))||void 0===e?void 0:e.content;return WePay.set_endpoint("staging"===n?"stage":"production"),this}},{key:"showBankPopup",value:function(){var e,n;WePay.bank_account.create({client_id:null===(e=document.querySelector("meta[name=wepay-client-id]"))||void 0===e?void 0:e.content,email:null===(n=document.querySelector("meta[name=contact-email]"))||void 0===n?void 0:n.content},(function(e){e.error?(errors.textContent="",errors.textContent=e.error_description,errors.hidden=!1):(document.querySelector('input[name="bank_account_id"]').value=e.bank_account_id,document.getElementById("server_response").submit())}),(function(e){e.error&&(errors.textContent="",errors.textContent=e.error_description,errors.hidden=!1)}))}},{key:"handle",value:function(){this.initializeWePay().showBankPopup()}}])&&t(n.prototype,r),o&&t(n,o),e}();document.addEventListener("DOMContentLoaded",(function(){(new r).handle()}))}});
|
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Invoice Ninja (https://invoiceninja.com).
|
||||
*
|
||||
* @link https://github.com/invoiceninja/invoiceninja source repository
|
||||
*
|
||||
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
|
||||
*
|
||||
* @license https://www.elastic.co/licensing/elastic-license
|
||||
*/
|
2
public/js/clients/payments/wepay-credit-card.js
vendored
Normal file
2
public/js/clients/payments/wepay-credit-card.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Invoice Ninja (https://invoiceninja.com).
|
||||
*
|
||||
* @link https://github.com/invoiceninja/invoiceninja source repository
|
||||
*
|
||||
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
|
||||
*
|
||||
* @license https://www.elastic.co/licensing/elastic-license
|
||||
*/
|
@ -1,10 +1,11 @@
|
||||
{
|
||||
"/js/app.js": "/js/app.js?id=696e8203d5e8e7cf5ff5",
|
||||
"/css/app.css": "/css/app.css?id=362fcaff4938566f7508",
|
||||
"/css/app.css": "/css/app.css?id=b3b5fbe4dbfcef5b5f8e",
|
||||
"/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=a09bb529b8e1826f13b4",
|
||||
"/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=8ce8955ba775ea5f47d1",
|
||||
"/js/clients/linkify-urls.js": "/js/clients/linkify-urls.js?id=0dc8c34010d09195d2f7",
|
||||
"/js/clients/payment_methods/authorize-authorize-card.js": "/js/clients/payment_methods/authorize-authorize-card.js?id=206d7de4ac97612980ff",
|
||||
"/js/clients/payment_methods/wepay-bank-account.js": "/js/clients/payment_methods/wepay-bank-account.js?id=8fea0be371d430064a89",
|
||||
"/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=a376eff2227da398b0ba",
|
||||
"/js/clients/payments/braintree-credit-card.js": "/js/clients/payments/braintree-credit-card.js?id=81957e7cb1cb49f23b90",
|
||||
"/js/clients/payments/braintree-paypal.js": "/js/clients/payments/braintree-paypal.js?id=c35db3cbb65806ab6a8a",
|
||||
@ -14,6 +15,7 @@
|
||||
"/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=665ddf663500767f1a17",
|
||||
"/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=f1719b79a2bb274d3f64",
|
||||
"/js/clients/payments/stripe-sofort.js": "/js/clients/payments/stripe-sofort.js?id=08bf4871826e8b18b804",
|
||||
"/js/clients/payments/wepay-credit-card.js": "/js/clients/payments/wepay-credit-card.js?id=eab1ea239a721bea90c4",
|
||||
"/js/clients/quotes/action-selectors.js": "/js/clients/quotes/action-selectors.js?id=1b8f9325aa6e8595e7fa",
|
||||
"/js/clients/quotes/approve.js": "/js/clients/quotes/approve.js?id=85bcae0a646882e56b12",
|
||||
"/js/clients/shared/multiple-downloads.js": "/js/clients/shared/multiple-downloads.js?id=5c35d28cf0a3286e7c45",
|
||||
|
52
resources/js/clients/payment_methods/wepay-bank-account.js
vendored
Normal file
52
resources/js/clients/payment_methods/wepay-bank-account.js
vendored
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Invoice Ninja (https://invoiceninja.com).
|
||||
*
|
||||
* @link https://github.com/invoiceninja/invoiceninja source repository
|
||||
*
|
||||
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
|
||||
*
|
||||
* @license https://www.elastic.co/licensing/elastic-license
|
||||
*/
|
||||
|
||||
class WePayBank {
|
||||
initializeWePay() {
|
||||
let environment = document.querySelector('meta[name="wepay-environment"]')?.content;
|
||||
|
||||
WePay.set_endpoint(environment === 'staging' ? 'stage' : 'production');
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
showBankPopup() {
|
||||
WePay.bank_account.create({
|
||||
client_id: document.querySelector('meta[name=wepay-client-id]')?.content,
|
||||
email: document.querySelector('meta[name=contact-email]')?.content
|
||||
}, function (data) {
|
||||
if (data.error) {
|
||||
errors.textContent = '';
|
||||
errors.textContent = data.error_description;
|
||||
errors.hidden = false;
|
||||
} else {
|
||||
document.querySelector('input[name="bank_account_id"]').value = data.bank_account_id;
|
||||
document.getElementById('server_response').submit();
|
||||
}
|
||||
}, function (data) {
|
||||
if (data.error) {
|
||||
errors.textContent = '';
|
||||
errors.textContent = data.error_description;
|
||||
errors.hidden = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
handle() {
|
||||
this
|
||||
.initializeWePay()
|
||||
.showBankPopup();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new WePayBank().handle();
|
||||
});
|
194
resources/js/clients/payments/wepay-credit-card.js
vendored
Normal file
194
resources/js/clients/payments/wepay-credit-card.js
vendored
Normal file
@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Invoice Ninja (https://invoiceninja.com).
|
||||
*
|
||||
* @link https://github.com/invoiceninja/invoiceninja source repository
|
||||
*
|
||||
* @copyright Copyright (c) 2021. Invoice Ninja LLC (https://invoiceninja.com)
|
||||
*
|
||||
* @license https://www.elastic.co/licensing/elastic-license
|
||||
*/
|
||||
|
||||
let action = document.querySelector('meta[name="wepay-action"]')?.content;
|
||||
|
||||
class WePayCreditCard {
|
||||
constructor(action = 'payment') {
|
||||
this.action = action;
|
||||
this.errors = document.getElementById('errors');
|
||||
}
|
||||
|
||||
initializeWePay() {
|
||||
let environment = document.querySelector('meta[name="wepay-environment"]')?.content;
|
||||
|
||||
WePay.set_endpoint(environment === 'staging' ? 'stage' : 'production');
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
validateCreditCardFields() {
|
||||
this.myCard = $('#my-card');
|
||||
|
||||
if (document.getElementById('cardholder_name') === "") {
|
||||
document.getElementById('cardholder_name').focus();
|
||||
this.errors.textContent = "Cardholder name required.";
|
||||
this.errors.hidden = false;
|
||||
|
||||
return;
|
||||
} else if (this.myCard.CardJs('cardNumber') === "") {
|
||||
document.getElementById('card_number').focus();
|
||||
this.errors.textContent = "Card number required.";
|
||||
this.errors.hidden = false;
|
||||
|
||||
return;
|
||||
} else if (this.myCard.CardJs('cvc') === "") {
|
||||
document.getElementById('cvv').focus();
|
||||
this.errors.textContent = "CVV number required.";
|
||||
this.errors.hidden = false;
|
||||
|
||||
return;
|
||||
} else if (this.myCard.CardJs('expiryMonth') === "") {
|
||||
// document.getElementById('expiry_month').focus();
|
||||
this.errors.textContent = "Expiry Month number required.";
|
||||
this.errors.hidden = false;
|
||||
|
||||
return;
|
||||
} else if (this.myCard.CardJs('expiryYear') === "") {
|
||||
// document.getElementById('expiry_year').focus();
|
||||
this.errors.textContent = "Expiry Year number required.";
|
||||
this.errors.hidden = false;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
handleAuthorization() {
|
||||
if (!this.validateCreditCardFields()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cardButton = document.getElementById('card_button');
|
||||
cardButton.disabled = true;
|
||||
|
||||
cardButton.querySelector('svg').classList.remove('hidden');
|
||||
cardButton.querySelector('span').classList.add('hidden');
|
||||
|
||||
WePay.credit_card.create({
|
||||
client_id: document.querySelector('meta[name=wepay-client-id]').content,
|
||||
user_name: document.getElementById('cardholder_name').value,
|
||||
email: document.querySelector('meta[name=contact-email]').content,
|
||||
cc_number: this.myCard.CardJs('cardNumber'),
|
||||
cvv: this.myCard.CardJs('cvc'),
|
||||
expiration_month: this.myCard.CardJs('expiryMonth'),
|
||||
expiration_year: this.myCard.CardJs('expiryYear'),
|
||||
address: {
|
||||
postal_code: document.querySelector(['meta[name=client-postal-code']).content,
|
||||
}
|
||||
}, (data) => {
|
||||
if (data.error) {
|
||||
cardButton = document.getElementById('card_button');
|
||||
cardButton.disabled = false;
|
||||
cardButton.querySelector('svg').classList.add('hidden');
|
||||
cardButton.querySelector('span').classList.remove('hidden');
|
||||
|
||||
this.errors.textContent = '';
|
||||
this.errors.textContent = data.error_description;
|
||||
this.errors.hidden = false;
|
||||
} else {
|
||||
document.querySelector('input[name="credit_card_id"]').value = data.credit_card_id;
|
||||
document.getElementById('server_response').submit();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
completePaymentUsingToken(token) {
|
||||
document.querySelector('input[name="credit_card_id"]').value = null;
|
||||
document.querySelector('input[name="token"]').value = token;
|
||||
document.getElementById('server-response').submit();
|
||||
}
|
||||
|
||||
completePaymentWithoutToken() {
|
||||
if (!this.validateCreditCardFields()) {
|
||||
return;
|
||||
}
|
||||
|
||||
WePay.credit_card.create({
|
||||
client_id: document.querySelector('meta[name=wepay-client-id]').content,
|
||||
user_name: document.getElementById('cardholder_name').value,
|
||||
email: document.querySelector('meta[name=contact-email]').content,
|
||||
cc_number: this.myCard.CardJs('cardNumber'),
|
||||
cvv: this.myCard.CardJs('cvc'),
|
||||
expiration_month: this.myCard.CardJs('expiryMonth'),
|
||||
expiration_year: this.myCard.CardJs('expiryYear'),
|
||||
address: {
|
||||
postal_code: document.querySelector(['meta[name=client-postal-code']).content,
|
||||
}
|
||||
}, (data) => {
|
||||
if (data.error) {
|
||||
this.payNowButton.disabled = false;
|
||||
this.payNowButton.querySelector('svg').classList.add('hidden');
|
||||
this.payNowButton.querySelector('span').classList.remove('hidden');
|
||||
|
||||
this.errors.textContent = '';
|
||||
this.errors.textContent = data.error_description;
|
||||
this.errors.hidden = false;
|
||||
} else {
|
||||
document.querySelector('input[name="credit_card_id"]').value = data.credit_card_id;
|
||||
document.querySelector('input[name="token"]').value = null;
|
||||
document.getElementById('server-response').submit();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handle() {
|
||||
this.initializeWePay();
|
||||
|
||||
if (this.action === 'authorize') {
|
||||
document
|
||||
.getElementById('card_button')
|
||||
.addEventListener('click', () => this.handleAuthorization());
|
||||
} else if (this.action === 'payment') {
|
||||
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;
|
||||
}));
|
||||
|
||||
document
|
||||
.getElementById('toggle-payment-with-credit-card')
|
||||
.addEventListener('click', (e) => {
|
||||
document.getElementById('save-card--container').style.display = 'grid';
|
||||
document.getElementById('wepay--credit-card-container').style.display = 'flex';
|
||||
document.getElementById('token').value = null;
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById('pay-now')
|
||||
.addEventListener('click', () => {
|
||||
this.payNowButton = document.getElementById('pay-now');
|
||||
|
||||
this.payNowButton.disabled = true;
|
||||
this.payNowButton.querySelector('svg').classList.remove('hidden');
|
||||
this.payNowButton.querySelector('span').classList.add('hidden');
|
||||
|
||||
let tokenInput = document.querySelector('input[name=token]');
|
||||
|
||||
let storeCard = document.querySelector('input[name=token-billing-checkbox]:checked');
|
||||
|
||||
if (storeCard) {
|
||||
document.getElementById("store_card").value = storeCard.value;
|
||||
}
|
||||
|
||||
if (tokenInput.value) {
|
||||
return this.completePaymentUsingToken(tokenInput.value);
|
||||
}
|
||||
|
||||
return this.completePaymentWithoutToken();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new WePayCreditCard(action).handle();
|
@ -1,13 +1,19 @@
|
||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
|
||||
|
||||
@section('gateway_head')
|
||||
<meta name="year-invalid" content="{{ ctrans('texts.year_invalid') }}">
|
||||
<meta name="month-invalid" content="{{ ctrans('texts.month_invalid') }}">
|
||||
<meta name="credit-card-invalid" content="{{ ctrans('texts.credit_card_invalid') }}">
|
||||
<meta name="wepay-environment" content="{{ config('ninja.wepay.environment') }}">
|
||||
<meta name="wepay-action" content="authorize">
|
||||
<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="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
|
||||
|
||||
<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
|
||||
|
||||
@section('gateway_content')
|
||||
@ -40,111 +46,5 @@
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
|
||||
<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');
|
||||
|
||||
// Attach the event to the DOM
|
||||
addEvent(document.getElementById('card_button'), 'click', function() {
|
||||
|
||||
var myCard = $('#my-card');
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
cardButton = document.getElementById('card_button');
|
||||
cardButton.disabled = true;
|
||||
|
||||
cardButton.querySelector('svg').classList.remove('hidden');
|
||||
cardButton.querySelector('span').classList.add('hidden');
|
||||
|
||||
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
|
||||
cardButton = document.getElementById('card_button');
|
||||
cardButton.disabled = false;
|
||||
cardButton.querySelector('svg').classList.add('hidden');
|
||||
cardButton.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.getElementById('server_response').submit();
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
<script src="{{ asset('js/clients/payments/wepay-credit-card.js') }}"></script>
|
||||
@endsection
|
||||
|
@ -1,7 +1,11 @@
|
||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.bank_transfer')])
|
||||
|
||||
@section('gateway_head')
|
||||
<meta name="wepay-environment" content="{{ config('ninja.wepay.environment') }}">
|
||||
<meta name="wepay-client-id" content="{{ config('ninja.wepay.client_id') }}">
|
||||
<meta name="contact-email" content="{{ $contact->email }}">
|
||||
|
||||
<script type="text/javascript" src="https://static.wepay.com/min/js/tokenization.4.latest.js"></script>
|
||||
@endsection
|
||||
|
||||
@section('gateway_content')
|
||||
@ -17,55 +21,12 @@
|
||||
|
||||
<div class="alert alert-failure mb-4" hidden id="errors"></div>
|
||||
|
||||
@component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.method')])
|
||||
{{ ctrans('texts.bank_account') }}
|
||||
@endcomponent
|
||||
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
|
||||
<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
|
||||
|
||||
window.onload = function(){
|
||||
|
||||
response = WePay.bank_account.create({
|
||||
'client_id': "{{ config('ninja.wepay.client_id') }}",
|
||||
'email': "{{ $contact->email }}"
|
||||
}, function(data){
|
||||
if(data.error) {
|
||||
console.log("Pop-up closing: ")
|
||||
errors.textContent = '';
|
||||
errors.textContent = data.error_description;
|
||||
errors.hidden = false;
|
||||
} else {
|
||||
// call your own app's API to save the token inside the data;
|
||||
// show a success page
|
||||
console.log(data);
|
||||
document.querySelector('input[name="bank_account_id"]').value = data.bank_account_id;
|
||||
document.getElementById('server_response').submit();
|
||||
}
|
||||
}, function(data){
|
||||
if(data.error) {
|
||||
console.log("Pop-up opening: ");
|
||||
console.log(data);
|
||||
// handle error response
|
||||
errors.textContent = '';
|
||||
errors.textContent = data.error_description;
|
||||
errors.hidden = false;
|
||||
} else {
|
||||
// call your own app's API to save the token inside the data;
|
||||
// show a success page
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
<script src="{{ asset('js/clients/payment_methods/wepay-bank-account.js') }}"></script>
|
||||
@endsection
|
||||
|
@ -1,9 +1,19 @@
|
||||
@extends('portal.ninja2020.layout.payments', ['gateway_title' => ctrans('texts.credit_card'), 'card_title' => ctrans('texts.credit_card')])
|
||||
|
||||
@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="{{ asset('js/clients/payments/card-js.min.js') }}"></script>
|
||||
|
||||
<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
|
||||
|
||||
@section('gateway_content')
|
||||
@ -56,194 +66,10 @@
|
||||
@include('portal.ninja2020.gateways.includes.save_card')
|
||||
|
||||
@include('portal.ninja2020.gateways.wepay.includes.credit_card')
|
||||
|
||||
|
||||
@include('portal.ninja2020.gateways.includes.pay_now')
|
||||
@endsection
|
||||
|
||||
@section('gateway_footer')
|
||||
|
||||
<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>
|
||||
<script src="{{ asset('js/clients/payments/wepay-credit-card.js') }}"></script>
|
||||
@endsection
|
||||
|
11
webpack.mix.js
vendored
11
webpack.mix.js
vendored
@ -69,9 +69,18 @@ mix.js("resources/js/app.js", "public/js")
|
||||
.js(
|
||||
"resources/js/clients/payments/braintree-credit-card.js",
|
||||
"public/js/clients/payments/braintree-credit-card.js"
|
||||
).js(
|
||||
)
|
||||
.js(
|
||||
"resources/js/clients/payments/braintree-paypal.js",
|
||||
"public/js/clients/payments/braintree-paypal.js"
|
||||
)
|
||||
.js(
|
||||
"resources/js/clients/payments/wepay-credit-card.js",
|
||||
"public/js/clients/payments/wepay-credit-card.js"
|
||||
)
|
||||
.js(
|
||||
"resources/js/clients/payment_methods/wepay-bank-account.js",
|
||||
"public/js/clients/payment_methods/wepay-bank-account.js"
|
||||
);
|
||||
|
||||
mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');
|
||||
|
Loading…
x
Reference in New Issue
Block a user