-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for inline apple pay (#111)
- Loading branch information
1 parent
473f84e
commit d3d0438
Showing
8 changed files
with
283 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,6 +3,7 @@ test-results/ | |
| playwright-report/ | ||
| hyva/ | ||
| .idea/ | ||
| nohup.out | ||
|
|
||
| vendor/ | ||
| .env | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
src/view/frontend/templates/component/payment/apple-pay-hosted-processor.phtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <?php | ||
| declare(strict_types=1); | ||
|
|
||
| use Magento\Framework\Escaper; | ||
| use Magento\Framework\View\Element\Template; | ||
|
|
||
| /** @var Template $block */ | ||
| /** @var Escaper $escaper */ | ||
| ?> | ||
| <div wire:ignore> | ||
| <style> | ||
| #payment-method-option-rvvup_APPLE_PAY { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script> | ||
| (() => { | ||
| window.addEventListener('checkout:payment:method-activate', event => { | ||
| if (event.detail.method !== 'rvvup_APPLE_PAY') { | ||
| return; | ||
| } | ||
|
|
||
| const component = Magewire.find('<?= $escaper->escapeJs($block->getNameInLayout()) ?>'); | ||
| hyvaCheckout.payment.activate('rvvup_APPLE_PAY', { | ||
| placeOrderViaJs() { | ||
| return document.querySelector('[wire\\:key="rvvup_APPLE_PAY"].active') !== null; | ||
| }, | ||
|
|
||
| placeOrder() { | ||
| return component.placeOrder(); | ||
| } | ||
| }, document.querySelector('[wire\\:key="rvvup_APPLE_PAY"].active')); | ||
| }); | ||
| window.addEventListener('checkout:payment:method-activate', () => { | ||
| enableApplePay(); | ||
| }, {once: false}); | ||
| window.addEventListener('checkout:shipping:method-activate', () => { | ||
| enableApplePay(); | ||
| }, {once: false}); | ||
| window.addEventListener('checkout:step:loaded', () => { | ||
| enableApplePay(); | ||
| }, {once: false}); | ||
|
|
||
| function enableApplePay() { | ||
| let applePay = document.getElementById('payment-method-option-rvvup_APPLE_PAY'); | ||
| if (applePay && window.ApplePaySession && window.ApplePaySession.canMakePayments()) { | ||
| applePay.style.display = 'block'; | ||
| } | ||
| } | ||
| })(); | ||
| </script> | ||
| </div> |
132 changes: 132 additions & 0 deletions
132
src/view/frontend/templates/component/payment/apple-pay-inline-processor.phtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| <?php | ||
| declare(strict_types=1); | ||
|
|
||
| use Magento\Framework\Escaper; | ||
| use Magento\Framework\View\Element\Template; | ||
|
|
||
| /** @var Template $block */ | ||
| /** @var Escaper $escaper */ | ||
| /** @var \Rvvup\PaymentsHyvaCheckout\Magewire\Checkout\Payment\ApplePayProcessor $magewire */ | ||
| ?> | ||
| <div id="rvvup-apple-pay-inline" data-quoteamount="<?php echo $magewire->quoteAmount; ?>" data-quotecurrency="<?php echo $magewire->quoteCurrency; ?>"> | ||
| <style> | ||
| #payment-method-option-rvvup_APPLE_PAY { | ||
| display: block; | ||
| } | ||
| .rvvup_APPLE_PAY_place_order_button { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script> | ||
| (() => { | ||
| const getQuoteTotal = () => { | ||
| const dataSet = document.querySelector('#rvvup-apple-pay-inline').dataset; | ||
| return { | ||
| amount: dataSet.quoteamount, | ||
| currency: dataSet.quotecurrency | ||
| }; | ||
| }; | ||
| const triggerApplePayDisplayEvent = () => { | ||
| if (!$showApplePay) { | ||
| window.dispatchEvent(new CustomEvent('rvvup:methods:apple-pay:hide')); | ||
| } | ||
| }; | ||
| let applePayPromise = window.rvvup_sdk.createPaymentMethod("APPLE_PAY", { | ||
| checkoutSessionKey: rvvup_parameters.checkout.token, | ||
| total: getQuoteTotal(), | ||
| }).catch(e => { | ||
| console.error("Error creating Apple Pay payment method", e); | ||
| }); | ||
| let $showApplePay = true; | ||
|
|
||
| applePayPromise.then(applePay => { | ||
| applePay.on("ready", async () => { | ||
| $showApplePay = await applePay.canMakePayment(); | ||
| triggerApplePayDisplayEvent(); | ||
| }); | ||
| }); | ||
| window.addEventListener('checkout:payment:method-activate', triggerApplePayDisplayEvent); | ||
| window.addEventListener('checkout:step:loaded', triggerApplePayDisplayEvent); | ||
|
|
||
| window.addEventListener('rvvup:methods:apple-pay:hide', () => { | ||
| let element = document.getElementById("payment-method-option-rvvup_APPLE_PAY"); | ||
| if (element) { | ||
| element.parentElement.removeChild(element); | ||
| } | ||
| }); | ||
|
|
||
| window.addEventListener('checkout:payment:method-activate', event => { | ||
| let placeOrderButton = document.querySelector('.nav-main .btn-primary'); | ||
| const divId = "rvvup-apple-pay-button"; | ||
|
|
||
| if (event.detail.method !== 'rvvup_APPLE_PAY') { | ||
| if (document.getElementById(divId)) { | ||
| document.getElementById(divId).style.display = 'none'; | ||
| document.querySelector('.nav-main .btn-primary').classList.remove('rvvup_APPLE_PAY_place_order_button'); | ||
| } | ||
| return; | ||
| } | ||
|
|
||
|
|
||
| const component = Magewire.find('<?= $escaper->escapeJs($block->getNameInLayout()) ?>'); | ||
| hyvaCheckout.payment.activate('rvvup_APPLE_PAY', { | ||
| initialize() { | ||
| if(document.getElementById(divId)){ | ||
| document.getElementById(divId).style.display = 'block'; | ||
| placeOrderButton.classList.add('rvvup_APPLE_PAY_place_order_button'); | ||
|
|
||
| return; | ||
| } | ||
| const applePayButtonDiv = document.createElement('div'); | ||
| applePayButtonDiv.id = divId; | ||
| applePayButtonDiv.className = 'rvvup-applepay-button z-0'; | ||
| if (placeOrderButton.className && placeOrderButton.className.indexOf("w-full") > -1) { | ||
| applePayButtonDiv.className += ' w-full'; | ||
| } | ||
| placeOrderButton.classList.add('rvvup_APPLE_PAY_place_order_button'); | ||
| placeOrderButton.appendChild(applePayButtonDiv); | ||
| placeOrderButton.parentNode.insertBefore(applePayButtonDiv, placeOrderButton); | ||
|
|
||
|
|
||
| applePayPromise.then(async function (applePay) { | ||
| if($showApplePay){ | ||
| await applePay.mount({ | ||
| selector: "#rvvup-apple-pay-button", | ||
| }); | ||
| } | ||
| applePay.on("click", () => { | ||
| applePay.update({total: getQuoteTotal()}); | ||
| }); | ||
| applePay.on("beforePaymentAuth", async () => { | ||
| await component.createPaymentSession(rvvup_parameters.checkout.id) | ||
| return { | ||
| paymentSessionId: component.paymentSessionResult.paymentSessionId | ||
| }; | ||
| }); | ||
| applePay.on("paymentAuthorized", () => { | ||
| let magewire = document.getElementById('magewire-loader'); | ||
| magewire.children[0].style.display = 'block'; | ||
| window.location.href = component.paymentSessionResult.redirectUrl; | ||
| }); | ||
| applePay.on("paymentFailed", (data) => { | ||
| window.dispatchMessages && window.dispatchMessages([{ | ||
| type: 'error', | ||
| text: 'Payment ' + data.reason | ||
| }], 5000); | ||
| }); | ||
| }); | ||
|
|
||
| }, | ||
| placeOrderViaJs() { | ||
| return document.querySelector('[wire\\:key="rvvup_APPLE_PAY"].active') !== null; | ||
| }, | ||
|
|
||
| placeOrder() { | ||
| return component.placeOrder(); | ||
| } | ||
| }, document.querySelector('[wire\\:key="rvvup_APPLE_PAY"].active')); | ||
|
|
||
| }); | ||
| })(); | ||
| </script> | ||
| </div> |
52 changes: 0 additions & 52 deletions
52
src/view/frontend/templates/component/payment/apple-pay-processor.phtml
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.