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

@@ -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);

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)}}}});
+!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()}))}});

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",

resources/js/clients/payments/checkout.com.js

@@ -8,9 +8,17 @@
  * @license https://opensource.org/licenses/AAL
  */
 
-document
+const paymentWithToken = document.getElementById('toggle-payment-with-token');
-    .getElementById('toggle-payment-with-token')
+const paymentWithCreditCard = document.getElementById(
-    .addEventListener('click', () => {
+    '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
+if (paymentWithCreditCard) {
-    .getElementById('toggle-payment-with-credit-card')
+    paymentWithCreditCard.addEventListener('click', () => {
-    .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
+if (document.getElementById('pay-now-with-token')) {
-    .getElementById('pay-now-with-token')
+    document
-    .addEventListener('click', completePayment);
+        .getElementById('pay-now-with-token')
+        .addEventListener('click', completePayment);
+}
 
-window.CKOConfig = {
+// window.CKOConfig = {
-    publicKey: document.querySelector('meta[name="public-key"]').content,
+//     publicKey: document.querySelector('meta[name="public-key"]').content,
-    customerEmail: document.querySelector('meta[name="customer-email"]')
+//     customerEmail: document.querySelector('meta[name="customer-email"]')
-        .content,
+//         .content,
-    value: document.querySelector('meta[name="value"]').content,
+//     value: document.querySelector('meta[name="value"]').content,
-    currency: document.querySelector('meta[name="currency"]').content,
+//     currency: document.querySelector('meta[name="currency"]').content,
-    paymentMode: 'cards',
+//     paymentMode: 'cards',
-    cardFormMode: 'cardTokenisation',
+//     cardFormMode: 'cardTokenisation',
-    cardTokenised: function(event) {
+//     cardTokenised: function(event) {
-        completePayment(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();
+});

resources/lang/en/texts.php

@@ -3313,4 +3313,5 @@ return [
     'shipping_country' => 'Shipping Country',
 
     'service' => 'Service',
+    'pay' => 'Pay',
 ];

resources/views/portal/ninja2020/gateways/checkout/credit_card/pay.blade.php

@@ -6,6 +6,9 @@
     <meta name="value" content="{{ $value }}">
     <meta name="currency" content="{{ $currency }}">
     <meta name="reference" content="{{ $payment_hash }}">
+
+    <style>*,*::after,*::before{box-sizing:border-box}html{background-color:#FFF;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}#payment-form{width:31.5rem;margin:0 auto}iframe{width:100%}.one-liner{display:flex;flex-direction:column}#pay-button{border:none;border-radius:3px;color:#FFF;font-weight:500;height:40px;width:100%;background-color:#13395E;box-shadow:0 1px 3px 0 rgba(19,57,94,0.4)}#pay-button:active{background-color:#0B2A49;box-shadow:0 1px 3px 0 rgba(19,57,94,0.4)}#pay-button:hover{background-color:#15406B;box-shadow:0 2px 5px 0 rgba(19,57,94,0.4)}#pay-button:disabled{background-color:#697887;box-shadow:none}#pay-button:not(:disabled){cursor:pointer}.card-frame{border:solid 1px #13395E;border-radius:3px;width:100%;margin-bottom:8px;height:40px;box-shadow:0 1px 3px 0 rgba(19,57,94,0.2)}.card-frame.frame--rendered{opacity:1}.card-frame.frame--rendered.frame--focus{border:solid 1px #13395E;box-shadow:0 2px 5px 0 rgba(19,57,94,0.15)}.card-frame.frame--rendered.frame--invalid{border:solid 1px #D96830;box-shadow:0 2px 5px 0 rgba(217,104,48,0.15)}.success-payment-message{color:#13395E;line-height:1.4}.token{color:#b35e14;font-size:0.9rem;font-family:monospace}@media screen and (min-width: 31rem){.one-liner{flex-direction:row}.card-frame{width:318px;margin-bottom:0}#pay-button{width:175px;margin-left:8px}}</style>
+    <script src="https://cdn.checkout.com/js/framesv2.min.js"></script>
 @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')])
-        <label class="mr-4">
+        @isset($token)
-            <input 
+            <label class="mr-4">
-                type="radio" 
+                <input 
-                id="toggle-payment-with-token" 
+                    type="radio" 
-                class="form-radio cursor-pointer" name="payment-type" />
+                    id="toggle-payment-with-token" 
-            <span class="ml-1 cursor-pointer">**** {{ $token->meta->last4 }}</span>
+                    class="form-radio cursor-pointer" name="payment-type" />
-        </label>
+                <span class="ml-1 cursor-pointer">**** {{ $token->meta->last4 }}</span>
+            </label>
+        @endisset
+        
         <label>
             <input 
                 type="radio"
@@ -55,13 +61,20 @@
     @include('portal.ninja2020.gateways.includes.save_card')
 
     @component('portal.ninja2020.components.general.card-element-single')
-        <form class="payment-form" method="POST" action="#" id="checkout--container">
+        <div id="checkout--container">
-            @if(app()->environment() == 'production')
+            <form id="payment-form" method="POST" action="#">
-                <script async src="https://cdn.checkout.com/js/checkout.js"></script>
+                <div class="one-liner">
-            @else
+                    <div class="card-frame">
-                <script async src="https://cdn.checkout.com/sandbox/js/checkout.js"></script>
+                        <!-- form will be added here -->
-            @endif
+                    </div>
-        </form>
+                    <!-- add submit button -->
+                    <button id="pay-button" disabled>
+                        {{ ctrans('texts.pay') }} {{ App\Utils\Number::formatMoney($total['amount_with_fee'], $client) }}
+                    </button>
+                </div>
+                <p class="success-payment-message"></p>
+            </form>
+        </div>
     @endcomponent
 
     @component('portal.ninja2020.components.general.card-element-single')