Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-05-24 02:14:21 -04:00
Code Issues Packages Projects Releases Wiki Activity

Extract PayPal's frontend into separate Javascript

Browse Source
This commit is contained in:
Benjamin Beganović 2021-05-04 17:22:52 +02:00
parent 54a12235b4
commit 0e905371c5
3 changed files with 147 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
resources/js/clients/payments/braintree-paypal.js vendored Normal file
View File

@ -0,0 +1,113 @@
/**
* 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://opensource.org/licenses/AAL
*/
class BraintreePayPal {
initBraintreeDataCollector() {
window.braintree.client.create({
authorization: document.querySelector('meta[name=client-token]').content
}, function (err, clientInstance) {
window.braintree.dataCollector.create({
client: clientInstance,
paypal: true
}, function (err, dataCollectorInstance) {
if (err) {
return;
}
document.querySelector('input[name=client-data]').value = dataCollectorInstance.deviceData;
});
});
}
static getPaymentDetails() {
return {
flow: 'vault',
}
}
static handleErrorMessage(message) {
let errorsContainer = document.getElementById('errors');
errorsContainer.innerText = message;
errorsContainer.hidden = false;
}
handlePaymentWithToken() {
Array
.from(document.getElementsByClassName('toggle-payment-with-token'))
.forEach((element) => element.addEventListener('click', (element) => {
document.getElementById('paypal-button').classList.add('hidden');
document.getElementById('save-card--container').style.display = 'none';
document.querySelector('input[name=token]').value = element.target.dataset.token;
document.getElementById('pay-now-with-token').classList.remove('hidden');
document.getElementById('pay-now').classList.add('hidden');
}));
let payNowWithToken = document.getElementById('pay-now-with-token');
payNowWithToken
.addEventListener('click', (element) => {
payNowWithToken.disabled = true;
payNowWithToken.querySelector('svg').classList.remove('hidden');
payNowWithToken.querySelector('span').classList.add('hidden');
document.getElementById('server-response').submit();
});
}
handle() {
this.initBraintreeDataCollector();
this.handlePaymentWithToken();
braintree.client.create({
authorization: document.querySelector('meta[name=client-token]').content,
}).then(function (clientInstance) {
return braintree.paypalCheckout.create({
client: clientInstance
});
}).then(function (paypalCheckoutInstance) {
return paypalCheckoutInstance.loadPayPalSDK({
vault: true
}).then(function (paypalCheckoutInstance) {
return paypal.Buttons({
fundingSource: paypal.FUNDING.PAYPAL,
createBillingAgreement: function () {
return paypalCheckoutInstance.createPayment(BraintreePayPal.getPaymentDetails());
},
onApprove: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
document.querySelector('input[name=gateway_response]').value = JSON.stringify(payload);
document.getElementById('server-response').submit();
});
},
onCancel: function (data) {
// ..
},
onError: function (err) {
console.log(err.message);
BraintreePayPal.handleErrorMessage(err.message);
}
}).render('#paypal-button');
});
}).catch(function (err) {
console.log(err.message);
BraintreePayPal.handleErrorMessage(err.message);
});
}
}
new BraintreePayPal().handle();

91
resources/views/portal/ninja2020/gateways/braintree/paypal/pay.blade.php
View File

@ -5,6 +5,7 @@
<script src="https://js.braintreegateway.com/web/3.76.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.76.2/js/paypal-checkout.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.76.2/js/data-collector.min.js"></script>
@endsection
@section('gateway_content')
@ -29,70 +30,40 @@
@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 block mt-2">
<input
type="radio"
data-token="{{ $token->token }}"
name="payment-type"
class="form-radio cursor-pointer toggle-payment-with-token"/>
<span class="ml-1 cursor-pointer">{{ $token->meta->email }}</span>
</label>
@endforeach
@endisset
<label class="block mt-2">
<input
type="radio"
id="toggle-payment-with-credit-card"
class="form-radio cursor-pointer"
name="payment-type"
checked/>
<span class="ml-1 cursor-pointer">{{ __('texts.new_account') }}</span>
</label>
@endcomponent
@include('portal.ninja2020.gateways.includes.save_card')
@component('portal.ninja2020.components.general.card-element-single')
<div id="paypal-button"></div>
@endcomponent
@include('portal.ninja2020.gateways.includes.pay_now', ['id' => 'pay-now-with-token', 'class' => 'hidden'])
@endsection
@section('gateway_footer')
<script>
braintree.client.create({
authorization: document.querySelector('meta[name=client-token]').content,
}).then(function (clientInstance) {
// Create a PayPal Checkout component.
return braintree.paypalCheckout.create({
client: clientInstance
});
}).then(function (paypalCheckoutInstance) {
return paypalCheckoutInstance.loadPayPalSDK({
vault: true
}).then(function (paypalCheckoutInstance) {
return paypal.Buttons({
fundingSource: paypal.FUNDING.PAYPAL,
createBillingAgreement: function () {
return paypalCheckoutInstance.createPayment({
flow: 'vault', // Required
// The following are optional params
billingAgreementDescription: 'Your agreement description',
enableShippingAddress: true,
shippingAddressEditable: false,
shippingAddressOverride: {
recipientName: 'Scruff McGruff',
line1: '1234 Main St.',
line2: 'Unit 1',
city: 'Chicago',
countryCode: 'US',
postalCode: '60652',
state: 'IL',
phone: '123.456.7890'
}
});
},
onApprove: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
// Submit `payload.nonce` to your server
});
},
onCancel: function (data) {
console.log('PayPal payment canceled', JSON.stringify(data, 0, 2));
},
onError: function (err) {
console.error('PayPal error', err);
}
}).render('#paypal-button');
});
}).catch(function (err) {
console.log(err.message);
let errorsContainer = document.getElementById('errors');
errorsContainer.innerText = err.message;
errorsContainer.hidden = false;
});
</script>
<script src="{{ asset('js/clients/payments/braintree-paypal.js') }}"></script>
@endsection

3
webpack.mix.js vendored
View File

@ -69,6 +69,9 @@ 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(
"resources/js/clients/payments/braintree-paypal.js",
"public/js/clients/payments/braintree-paypal.js"
);
mix.copyDirectory('node_modules/card-js/card-js.min.css', 'public/css/card-js.min.css');