From 00ab670d71f031a83efb0d2473f98d9fb8f8a8ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20Beganovi=C4=87?= Date: Wed, 2 Dec 2020 15:33:43 +0100 Subject: [PATCH] Checkout.com migration to Frames: - Changed cardToken to token in CreditCard reference - Updated checkout.com.js - Added "Pay" translation - Fix issue with switching between token & credt card --- app/PaymentDrivers/CheckoutCom/CreditCard.php | 4 +- public/js/clients/payments/checkout.com.js | 2 +- public/mix-manifest.json | 2 +- resources/js/clients/payments/checkout.com.js | 70 +++++++++++++------ resources/lang/en/texts.php | 1 + .../checkout/credit_card/pay.blade.php | 41 +++++++---- 6 files changed, 80 insertions(+), 40 deletions(-) diff --git a/app/PaymentDrivers/CheckoutCom/CreditCard.php b/app/PaymentDrivers/CheckoutCom/CreditCard.php index 5d393e8ef54b..e31c912425aa 100644 --- a/app/PaymentDrivers/CheckoutCom/CreditCard.php +++ b/app/PaymentDrivers/CheckoutCom/CreditCard.php @@ -105,11 +105,11 @@ class CreditCard } private function attemptPaymentUsingCreditCard(PaymentResponseRequest $request) - { + { $checkout_response = $this->checkout->payment_hash->data->server_response; $method = new TokenSource( - $checkout_response->cardToken + $checkout_response->token ); return $this->completePayment($method, $request); diff --git a/public/js/clients/payments/checkout.com.js b/public/js/clients/payments/checkout.com.js index a2b3b9cc375d..9006e4d224c2 100644 --- a/public/js/clients/payments/checkout.com.js +++ b/public/js/clients/payments/checkout.com.js @@ -1,2 +1,2 @@ /*! For license information please see checkout.com.js.LICENSE.txt */ -!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}({8:function(e,t,n){e.exports=n("XYrq")},XYrq:function(e,t){document.getElementById("toggle-payment-with-token").addEventListener("click",(function(){document.getElementById("save-card--container").style.display="none",document.getElementById("checkout--container").style.display="none",document.getElementById("pay-now-with-token--container").style.display="block",document.querySelector("input[name=pay_with_token]").value=!0})),document.getElementById("toggle-payment-with-credit-card").addEventListener("click",(function(){document.getElementById("save-card--container").style.display="grid",document.getElementById("checkout--container").style.display="block",document.getElementById("pay-now-with-token--container").style.display="none",document.querySelector("input[name=pay_with_token]").value=!1}));var n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;e&&(document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e.data)),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()};document.getElementById("pay-now-with-token").addEventListener("click",n),window.CKOConfig={publicKey:document.querySelector('meta[name="public-key"]').content,customerEmail:document.querySelector('meta[name="customer-email"]').content,value:document.querySelector('meta[name="value"]').content,currency:document.querySelector('meta[name="currency"]').content,paymentMode:"cards",cardFormMode:"cardTokenisation",cardTokenised:function(e){n(e)}}}}); \ No newline at end of file +!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/",n(n.s=8)}({8:function(e,t,n){e.exports=n("XYrq")},XYrq:function(e,t){var n,o=document.getElementById("toggle-payment-with-token"),r=document.getElementById("toggle-payment-with-credit-card"),u=document.getElementById("pay-button"),a=document.getElementById("payment-form"),c=null!==(n=document.querySelector('meta[name="public-key"]').content)&&void 0!==n?n:"";o&&o.addEventListener("click",(function(){document.getElementById("save-card--container").style.display="none",document.getElementById("checkout--container").style.display="none",document.getElementById("pay-now-with-token--container").style.display="block",document.querySelector("input[name=pay_with_token]").value=!0})),r&&r.addEventListener("click",(function(){document.getElementById("save-card--container").style.display="grid",document.getElementById("checkout--container").style.display="block",document.getElementById("pay-now-with-token--container").style.display="none",document.querySelector("input[name=pay_with_token]").value=!1}));var d=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;e&&(document.querySelector('input[name="gateway_response"]').value=JSON.stringify(e)),document.querySelector('input[name="store_card"]').value=document.querySelector("input[name=token-billing-checkbox]:checked").value,document.getElementById("server-response").submit()};document.getElementById("pay-now-with-token")&&document.getElementById("pay-now-with-token").addEventListener("click",d),Frames.init(c),Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED,(function(e){u.disabled=!Frames.isCardValid()})),Frames.addEventHandler(Frames.Events.CARD_TOKENIZED,(function(e){d(e)})),a.addEventListener("submit",(function(e){e.preventDefault(),Frames.submitCard()}))}}); \ No newline at end of file diff --git a/public/mix-manifest.json b/public/mix-manifest.json index dd1c8956527d..71843c359b21 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -6,7 +6,7 @@ "/js/clients/payment_methods/authorize-authorize-card.js": "/js/clients/payment_methods/authorize-authorize-card.js?id=cddcd46c630c71737bda", "/js/clients/payments/authorize-credit-card-payment.js": "/js/clients/payments/authorize-credit-card-payment.js?id=caff3774673a6c683e74", "/js/clients/payments/card-js.min.js": "/js/clients/payments/card-js.min.js?id=5469146cd629ea1b5c20", - "/js/clients/payments/checkout.com.js": "/js/clients/payments/checkout.com.js?id=4d5d992da65a0c422291", + "/js/clients/payments/checkout.com.js": "/js/clients/payments/checkout.com.js?id=ce184db42e52d403c21b", "/js/clients/payments/stripe-ach.js": "/js/clients/payments/stripe-ach.js?id=c4012ad90f17d60432ad", "/js/clients/payments/stripe-alipay.js": "/js/clients/payments/stripe-alipay.js?id=6dbe9316b98deea55421", "/js/clients/payments/stripe-credit-card.js": "/js/clients/payments/stripe-credit-card.js?id=f4659d26a26d2f408397", diff --git a/resources/js/clients/payments/checkout.com.js b/resources/js/clients/payments/checkout.com.js index 44837919c8f7..bf06abbbf45e 100644 --- a/resources/js/clients/payments/checkout.com.js +++ b/resources/js/clients/payments/checkout.com.js @@ -8,9 +8,17 @@ * @license https://opensource.org/licenses/AAL */ -document - .getElementById('toggle-payment-with-token') - .addEventListener('click', () => { +const paymentWithToken = document.getElementById('toggle-payment-with-token'); +const paymentWithCreditCard = document.getElementById( + 'toggle-payment-with-credit-card' +); +const payButton = document.getElementById('pay-button'); +const form = document.getElementById('payment-form'); +const publicKey = + document.querySelector('meta[name="public-key"]').content ?? ''; + +if (paymentWithToken) { + paymentWithToken.addEventListener('click', () => { document.getElementById('save-card--container').style.display = 'none'; document.getElementById('checkout--container').style.display = 'none'; document.getElementById('pay-now-with-token--container').style.display = @@ -18,10 +26,10 @@ document document.querySelector('input[name=pay_with_token]').value = true; }); +} -document - .getElementById('toggle-payment-with-credit-card') - .addEventListener('click', () => { +if (paymentWithCreditCard) { + paymentWithCreditCard.addEventListener('click', () => { document.getElementById('save-card--container').style.display = 'grid'; document.getElementById('checkout--container').style.display = 'block'; document.getElementById('pay-now-with-token--container').style.display = @@ -29,12 +37,13 @@ document document.querySelector('input[name=pay_with_token]').value = false; }); +} const completePayment = (data = null) => { if (data) { document.querySelector( 'input[name="gateway_response"]' - ).value = JSON.stringify(data.data); + ).value = JSON.stringify(data); } document.querySelector( @@ -46,19 +55,36 @@ const completePayment = (data = null) => { document.getElementById('server-response').submit(); }; -document - .getElementById('pay-now-with-token') - .addEventListener('click', completePayment); +if (document.getElementById('pay-now-with-token')) { + document + .getElementById('pay-now-with-token') + .addEventListener('click', completePayment); +} -window.CKOConfig = { - publicKey: document.querySelector('meta[name="public-key"]').content, - customerEmail: document.querySelector('meta[name="customer-email"]') - .content, - value: document.querySelector('meta[name="value"]').content, - currency: document.querySelector('meta[name="currency"]').content, - paymentMode: 'cards', - cardFormMode: 'cardTokenisation', - cardTokenised: function(event) { - completePayment(event); - }, -}; +// window.CKOConfig = { +// publicKey: document.querySelector('meta[name="public-key"]').content, +// customerEmail: document.querySelector('meta[name="customer-email"]') +// .content, +// value: document.querySelector('meta[name="value"]').content, +// currency: document.querySelector('meta[name="currency"]').content, +// paymentMode: 'cards', +// cardFormMode: 'cardTokenisation', +// cardTokenised: function(event) { +// completePayment(event); +// }, +// }; + +Frames.init(publicKey); + +Frames.addEventHandler(Frames.Events.CARD_VALIDATION_CHANGED, function(event) { + payButton.disabled = !Frames.isCardValid(); +}); + +Frames.addEventHandler(Frames.Events.CARD_TOKENIZED, function(event) { + completePayment(event) +}); + +form.addEventListener('submit', function(event) { + event.preventDefault(); + Frames.submitCard(); +}); diff --git a/resources/lang/en/texts.php b/resources/lang/en/texts.php index f4bd490bfd9f..bca47d23277e 100644 --- a/resources/lang/en/texts.php +++ b/resources/lang/en/texts.php @@ -3313,4 +3313,5 @@ return [ 'shipping_country' => 'Shipping Country', 'service' => 'Service', + 'pay' => 'Pay', ]; diff --git a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php index 513b9eea1bce..68b4a8f7341f 100644 --- a/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php +++ b/resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php @@ -6,6 +6,9 @@ + + + @endsection @section('gateway_content') @@ -34,13 +37,16 @@ @include('portal.ninja2020.gateways.includes.payment_details') @component('portal.ninja2020.components.general.card-element', ['title' => ctrans('texts.pay_with')]) - + @isset($token) + + @endisset +