- {{ payment.method }}
-
-
- {{ money.format(payment.amount, payment.order.currencyCode) }}
-
- 
+ 
+ This plugin allows you to integrate PayPlug payment with Sylius platform app including payment features and refunding orders.
+This plugin allows you to integrate Payplug payment with Sylius platform app including payment features and refunding orders.
## Requirements @@ -26,122 +31,152 @@ In local environment, the plugin will not work properly because you will not be ## Compatibility -| | Version | -| :--- | :--- | -| PHP | 7.4, 8.0 | -| Sylius | 1.9, 1.10 | +| | Version | +|:-------|:--------| +| PHP | ^8.2 | +| Sylius | ^2.0 | -## Installation -1. Require the **payplug/sylius-payplug-plugin** : +### With Symfony Flex - ```bash - composer config extra.symfony.allow-contrib true - composer require payplug/sylius-payplug-plugin - ``` +#### 1. Allow contrib recipes and require the plugin -2. Apply migrations to your database: +```bash +composer config extra.symfony.allow-contrib true +composer require payplug/sylius-payplug-plugin +``` - ```shell - bin/console doctrine:migrations:migrate - ``` +#### 2. Install the Flex recipe -3. Copy templates that are overridden by Sylius into `templates/bundles/SyliusAdminBundle` - - ```shell - mkdir -p templates/bundles/SyliusAdminBundle/ - cp -R vendor/payplug/sylius-payplug-plugin/src/Resources/views/SyliusAdminBundle/* templates/bundles/SyliusAdminBundle/ - ``` +```bash +composer recipes:install payplug/sylius-payplug-plugin --force +``` -4. Add PayPlug to refundable payment method for Sylius Refund Plugin in `config/services.yaml` +This automatically registers the bundle, copies configuration files, and sets up assets (on Sylius 2.1+). - ```yaml - parameters: - sylius_refund.supported_gateways: - - payplug - - payplug_oney - ``` +#### 3. Apply migrations to your database -5. Add PayPlug routes in `config/routes.yaml` +```shell +bin/console doctrine:migrations:migrate +``` - ```yaml - sylius_payplug: - resource: "@PayPlugSyliusPayPlugPlugin/Resources/config/routing.yaml" - ``` +#### 4. Add Payplug to refundable payment methods for Sylius Refund Plugin in `config/services.yaml` + +```yaml +parameters: + locale: fr_FR + sylius_refund.supported_gateways: + - payplug + - payplug_oney + - payplug_bancontact + - payplug_apple_pay + - payplug_american_express +``` -8. Add Traits for Customer and PaymentMethod entities +#### 5. Add Traits for Customer and PaymentMethod entities * App\Entity\Customer\Customer - ```php - Payment methods`, then click on `Create` and choose "**PayPlug**". +In your back-office, go to `Configuration > Payment methods`, then click on `Create` and choose "**Payplug**". ## Logs -If you want to follow the logs in the production environment, you need to add the configuration in `config/packages/prod/monolog.yaml`, logs should be in `var/log/prod.log` which can be searched after the phrase `[Payum]` or `[PayPlug]`: +If you want to follow the logs in the production environment, you need to add the configuration in `config/packages/prod/monolog.yaml`, logs should be in `var/log/prod.log` which can be searched after the phrase `[Payum]` or `[Payplug]`: ```yaml monolog: @@ -164,22 +199,6 @@ Run the below command to see what Symfony services are shared with this plugin: $ bin/console debug:container payplug_sylius_payplug_plugin ``` -### Template overriding - -This plugin override some sylius templates. -If you plan override them also, you should retrieve them in your application. - -Copy Sylius templates overridden in plugin to your templates directory (e.g templates/bundles/) - - ```shell - mkdir -p templates/bundles/SyliusAdminBundle/ - mkdir -p templates/bundles/SyliusShopBundle/ - mkdir -p templates/bundles/SyliusUiBundle/ - cp -R vendor/payplug/sylius-payplug-plugin/src/Resources/views/SyliusAdminBundle/* templates/bundles/SyliusAdminBundle/ - cp -R vendor/payplug/sylius-payplug-plugin/src/Resources/views/SyliusShopBundle/* templates/bundles/SyliusShopBundle/ - cp -R vendor/payplug/sylius-payplug-plugin/src/Resources/views/SyliusUiBundle/* templates/bundles/SyliusUiBundle/ - ``` - ## Development See [How to contribute](CONTRIBUTING.md). @@ -192,6 +211,10 @@ This library is under the MIT license. For better Oney integration, you can check the [Oney enhancement documentation](doc/oney_enhancement.md). +## Authorized Payment + +Since 1.11.0, the plugin supports the authorized payment feature. You can check the [Authorized Payment documentation](doc/authorized_payment.md). + ## Doc - [Development](doc/development.md) - [Release Process](RELEASE.md) diff --git a/RELEASE.md b/RELEASE.md index 9773def5..6cc12383 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -2,3 +2,5 @@ Upon releasing a new version there are checks and updates to be made: * Update plugin's version inside `src/PayPlugSyliusPayPlugPlugin.php` +* Ensure that the `CHANGELOG.md` is up to date with the changes made +* Ensure that the date of the release version is updated in `CHANGELOG.md` diff --git a/src/Resources/dev/.eslintignore b/assets/.eslintignore similarity index 100% rename from src/Resources/dev/.eslintignore rename to assets/.eslintignore diff --git a/src/Resources/dev/.eslintrc b/assets/.eslintrc similarity index 100% rename from src/Resources/dev/.eslintrc rename to assets/.eslintrc diff --git a/src/Resources/dev/.gitignore b/assets/.gitignore similarity index 59% rename from src/Resources/dev/.gitignore rename to assets/.gitignore index 5dde5fca..7b6786d1 100644 --- a/src/Resources/dev/.gitignore +++ b/assets/.gitignore @@ -1,2 +1,3 @@ node_modules/ .*cache +yarn-error.log diff --git a/assets/admin/entrypoint.js b/assets/admin/entrypoint.js new file mode 100644 index 00000000..9ccfccbe --- /dev/null +++ b/assets/admin/entrypoint.js @@ -0,0 +1 @@ +// Mandatory by test application diff --git a/assets/controllers.json b/assets/controllers.json new file mode 100644 index 00000000..5582d953 --- /dev/null +++ b/assets/controllers.json @@ -0,0 +1,41 @@ +{ + "controllers": { + "@payplug/sylius-payplug-plugin": { + "oney-popin": { + "enabled": true, + "fetch": "lazy", + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/oney_common/index.css": true, + "@payplug/sylius-payplug-plugin/shop/dist/oney_popin/index.css": true + } + }, + "integrated-payment": { + "enabled": true, + "fetch": "lazy", + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/payment/integrated.css": true + } + }, + "oney-payment": { + "enabled": true, + "fetch": "lazy" + }, + "payment-logo": { + "enabled": true, + "fetch": "lazy" + }, + "checkout-select-payment": { + "enabled": true, + "fetch": "lazy", + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/payment/index.css": true + } + }, + "apple-pay": { + "enabled": true, + "fetch": "lazy" + } + } + }, + "entrypoints": [] +} diff --git a/assets/images/integrated/account.svg b/assets/images/integrated/account.svg new file mode 100644 index 00000000..297efca7 --- /dev/null +++ b/assets/images/integrated/account.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/calendar.svg b/assets/images/integrated/calendar.svg new file mode 100644 index 00000000..82fb3686 --- /dev/null +++ b/assets/images/integrated/calendar.svg @@ -0,0 +1,13 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/card.svg b/assets/images/integrated/card.svg new file mode 100644 index 00000000..5c08a102 --- /dev/null +++ b/assets/images/integrated/card.svg @@ -0,0 +1,10 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/cb-dark.svg b/assets/images/integrated/cb-dark.svg new file mode 100644 index 00000000..5281a653 --- /dev/null +++ b/assets/images/integrated/cb-dark.svg @@ -0,0 +1,33 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/cb.svg b/assets/images/integrated/cb.svg new file mode 100644 index 00000000..51c1cad5 --- /dev/null +++ b/assets/images/integrated/cb.svg @@ -0,0 +1,33 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/lock.svg b/assets/images/integrated/lock.svg new file mode 100644 index 00000000..316e1f5e --- /dev/null +++ b/assets/images/integrated/lock.svg @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/logo-payplug.png b/assets/images/integrated/logo-payplug.png new file mode 100644 index 00000000..b67d7cce Binary files /dev/null and b/assets/images/integrated/logo-payplug.png differ diff --git a/assets/images/integrated/mastercard-dark.svg b/assets/images/integrated/mastercard-dark.svg new file mode 100644 index 00000000..652fb0ae --- /dev/null +++ b/assets/images/integrated/mastercard-dark.svg @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/mastercard.svg b/assets/images/integrated/mastercard.svg new file mode 100644 index 00000000..337ff9fb --- /dev/null +++ b/assets/images/integrated/mastercard.svg @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/visa-dark.svg b/assets/images/integrated/visa-dark.svg new file mode 100644 index 00000000..9de9cde7 --- /dev/null +++ b/assets/images/integrated/visa-dark.svg @@ -0,0 +1,19 @@ + + \ No newline at end of file diff --git a/assets/images/integrated/visa.svg b/assets/images/integrated/visa.svg new file mode 100644 index 00000000..5c488458 --- /dev/null +++ b/assets/images/integrated/visa.svg @@ -0,0 +1,16 @@ + + \ No newline at end of file diff --git a/assets/package.json b/assets/package.json new file mode 100644 index 00000000..52494447 --- /dev/null +++ b/assets/package.json @@ -0,0 +1,76 @@ +{ + "name": "@payplug/sylius-payplug-plugin", + "license": "MIT", + "version": "2.0.0", + "keywords": [ + "symfony-ux" + ], + "description": "Sylius Payplug Plugin", + "type": "module", + "files": [ + "dist" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "symfony": { + "controllers": { + "oney-popin": { + "main": "shop/controllers/oney-popin_controller.js", + "enabled": true, + "webpackMode": "lazy", + "fetch": "lazy", + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/oney_common/index.css": true, + "@payplug/sylius-payplug-plugin/shop/dist/oney_popin/index.css": true + } + }, + "integrated-payment": { + "main": "shop/controllers/integrated-payment_controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true, + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/payment/integrated.css": true + } + }, + "oney-payment": { + "main": "shop/controllers/oney-payment_controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true + }, + "payment-logo": { + "main": "shop/controllers/payment-logo_controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true + }, + "checkout-select-payment": { + "main": "shop/controllers/checkout-select-payment_controller.js", + "autoimport": { + "@payplug/sylius-payplug-plugin/shop/dist/payment/index.css": true + }, + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true + }, + "apple-pay": { + "main": "shop/controllers/apple-pay_controller.js", + "webpackMode": "lazy", + "fetch": "lazy", + "enabled": true + } + } + }, + "peerDependencies": { + "@hotwired/stimulus": "^3.0.0" + }, + "devDependencies": { + "@hotwired/stimulus": "^3.0.0" + }, + "dependencies": { + "jquery": "^3.5.1", + "webfontloader": "^1.6.28" + } +} diff --git a/assets/shop/controllers/apple-pay_controller.js b/assets/shop/controllers/apple-pay_controller.js new file mode 100644 index 00000000..fe977eb6 --- /dev/null +++ b/assets/shop/controllers/apple-pay_controller.js @@ -0,0 +1,181 @@ +import { Controller } from '@hotwired/stimulus'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static values = { + paymentInputId: String, + settings: Object, + notice: String, + } + + connect() { + this.applePayButton = this.element.querySelector('apple-pay-button'); + this.onApplePayButtonClick = this.onApplePayButtonClick.bind(this); + + if (this.applePayButton) { + this.applePayButton.addEventListener('click', this.onApplePayButtonClick); + } + + this.retryCount = 0; + this.initApplePay(); + } + + initApplePay() { + if (typeof window.ApplePaySession !== 'undefined') { + this.checkSupport(); + return; + } + + if (this.retryCount < 20) { // Try for 2 seconds + this.retryCount++; + setTimeout(() => this.initApplePay(), 100); + } else { + this.disablePaymentMethod(); + } + } + + checkSupport() { + try { + const isSupported = window.ApplePaySession.canMakePayments(); + + if (isSupported && this.applePayButton) { + this.applePayButton.classList.add('enabled'); + } else { + this.disablePaymentMethod(); + } + } catch (e) { + this.disablePaymentMethod(); + } + } + + disablePaymentMethod() { + if (!this.paymentInputIdValue) return; + + const input = document.getElementById(this.paymentInputIdValue); + if (!input) return; + + const container = input.closest('.card, .item, .form-check, .field'); + if (container) { + container.style.opacity = '0.5'; + container.style.pointerEvents = 'none'; + container.classList.add('apple-pay-ineligible'); + + // Add a small info message if not already present + if (!container.querySelector('.apple-pay-notice')) { + const notice = document.createElement('div'); + notice.className = 'apple-pay-notice small text-muted mt-2'; + notice.style.padding = '0 1rem 1rem'; + notice.innerText = this.noticeValue || 'Apple Pay is not available on this browser or device.'; + container.appendChild(notice); + } + + if (input.checked) { + input.checked = false; + input.dispatchEvent(new Event('change', { bubbles: true })); + } + } + + input.disabled = true; + + if (this.element) { + this.element.style.display = 'none'; + } + } + + async onApplePayButtonClick(event) { + const applePayButton = event.currentTarget; + + if (!this.settingsValue) { + console.error('Invalid Apple Pay settings!'); + return; + } + + if (typeof window.ApplePaySession === 'undefined') { + return; + } + + // Prepare settings + const settings = { ...this.settingsValue }; + if (settings.applePayDomain) { + settings.applicationData = btoa(JSON.stringify({ + 'apple_pay_domain': settings.applePayDomain + })); + delete settings.applePayDomain; + } + + try { + const version = window.ApplePaySession.supportsVersion(14) ? 14 : 3; + const session = new window.ApplePaySession(version, settings); + + session.onvalidatemerchant = async (event) => { + try { + const response = await fetch(applePayButton.dataset.validateMerchantRoute, { + method: 'POST', + headers: { + 'X-Requested-With': 'XMLHttpRequest', + }, + }); + const authorization = await response.json(); + + if (authorization.success === true) { + session.completeMerchantValidation(authorization.merchant_session); + } else { + session.abort(); + } + } catch (error) { + console.error(error); + session.abort(); + window.location.reload(); + } + }; + + session.onpaymentauthorized = async (event) => { + try { + const response = await fetch(applePayButton.dataset.paymentAuthorizedRoute, { + method: 'POST', + headers: { + 'X-Requested-With': 'XMLHttpRequest', + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + token: event.payment.token, + }), + }); + const authorization = await response.json(); + + let applePaySessionStatus = window.ApplePaySession.STATUS_SUCCESS; + + if (authorization.data.responseToApple.status !== 1) { + applePaySessionStatus = window.ApplePaySession.STATUS_FAILURE; + } + + session.completePayment({ "status": applePaySessionStatus }); + window.location.href = authorization.data.returnUrl; + } catch (error) { + console.error(error); + window.location.reload(); + } + }; + + session.oncancel = async (event) => { + try { + const response = await fetch(applePayButton.dataset.sessionCancelRoute, { + method: 'POST', + headers: { + 'X-Requested-With': 'XMLHttpRequest', + }, + }); + const authorization = await response.json(); + window.location.href = authorization.data.returnUrl; + } catch (error) { + console.error(error); + window.location.reload(); + } + }; + + session.begin(); + } catch (e) { + console.error('Failed to create Apple Pay session:', e); + } + } +} diff --git a/assets/shop/controllers/checkout-select-payment_controller.js b/assets/shop/controllers/checkout-select-payment_controller.js new file mode 100644 index 00000000..ead033d4 --- /dev/null +++ b/assets/shop/controllers/checkout-select-payment_controller.js @@ -0,0 +1,129 @@ +import { Controller } from '@hotwired/stimulus'; +import $ from 'jquery'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static targets = ['trigger']; + form = null; + + connect() { + this.form = this.element.closest('form') || document.querySelector('form[name*="checkout_select_payment"]'); + this.findNextStepButton(); + + this.handleStateChange = this.handleStateChange.bind(this); + this.element.addEventListener('payment-method-state-change', this.handleStateChange); + + this.toggleGateway(); + + if (this.form) { + this.form.addEventListener('submit', (event) => { + this.handleForm(); + }); + } + } + + disconnect() { + this.element.removeEventListener('payment-method-state-change', this.handleStateChange); + } + + handleStateChange(event) { + this.updateNextStepButtonVisibility(event.target); + } + + findNextStepButton() { + if (!this.form) return; + this.nextStepButton = this.form.querySelector('button[type="submit"], button:not([type])'); + } + + toggleGateway() { + const $inputs = $(this.element).find('input[id*="checkout_select_payment_payments"]'); + const checkedInput = $inputs.filter(':checked')[0]; + + // Hide all initially + this.triggerTargets.forEach(target => $(target).hide()); + + if (checkedInput) { + const currentTarget = this.triggerTargets.find(target => target.dataset.paymentInputId === checkedInput.id); + if (currentTarget) { + $(currentTarget).show(); + this.updateNextStepButtonVisibility(currentTarget); + } else { + this.toggleNextStepButton(true); + } + } + + $inputs.on('change', (event) => { + const clickedPaymentMethodId = event.currentTarget.id; + + // Hide all choices + this.triggerTargets.forEach(target => $(target).slideUp()); + + const currentTarget = this.triggerTargets.find(target => target.dataset.paymentInputId === clickedPaymentMethodId); + if (currentTarget) { + $(currentTarget).slideDown(() => { + this.updateNextStepButtonVisibility(currentTarget); + }); + } else { + this.toggleNextStepButton(true); + } + }); + } + + updateNextStepButtonVisibility(container) { + let targetContainer = container; + + if (!targetContainer || !targetContainer.dataset.paymentInputId) { + // Fallback to currently checked input + const checkedInput = this.element.querySelector('input[id*="checkout_select_payment_payments"]:checked'); + if (checkedInput) { + targetContainer = this.triggerTargets.find(target => target.dataset.paymentInputId === checkedInput.id); + } + } + + if (!targetContainer) { + this.toggleNextStepButton(true); + return; + } + + const handlesSubmit = targetContainer.dataset.paymentInlineSubmit === 'true' || + targetContainer.querySelector('[data-payment-inline-submit="true"]') !== null; + + this.toggleNextStepButton(!handlesSubmit); + } + + toggleNextStepButton(show) { + if (!this.nextStepButton) { + this.findNextStepButton(); + } + if (!this.nextStepButton) return; + + if (show) { + this.nextStepButton.classList.remove('disabled'); + this.nextStepButton.disabled = false; + } else { + this.nextStepButton.classList.add('disabled'); + this.nextStepButton.disabled = true; + } + } + + enableNextStepButton() { + this.toggleNextStepButton(true); + } + + disableNextStepButton() { + this.toggleNextStepButton(false); + } + + handleForm() { + if ($('.checkbox-oney :radio:checked').length) { + $('.checkbox-payplug').closest('.oney-payment-choice__item, .payplug-payment-choice__item, .form-check, .payment-item').find('.payment-choice__input:checked').prop('checked', false); + } else if ($('.checkbox-payplug :radio:checked').length) { + $('.checkbox-oney').closest('.oney-payment-choice__item, .payplug-payment-choice__item, .form-check, .payment-item').find('.payment-choice__input:checked').prop('checked', false); + } + + const otherCardOther = document.querySelector('input#payplug_choice_card_other'); + if (otherCardOther) { + otherCardOther.disabled = true; + } + } +} diff --git a/assets/shop/controllers/integrated-payment_controller.js b/assets/shop/controllers/integrated-payment_controller.js new file mode 100644 index 00000000..5c85c16e --- /dev/null +++ b/assets/shop/controllers/integrated-payment_controller.js @@ -0,0 +1,259 @@ +import { Controller } from '@hotwired/stimulus'; +import WebFont from 'webfontloader'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static targets = ['container'] + static values = { + code: String, + factoryName: String, + } + initialize() { + WebFont.load({ + google: { + families: ["Poppins:400,600"], + }, + }); + } + connect() { + this.options = { + api: null, + cartId: null, + form: {}, + fieldsValid: { + cardHolder: false, + pan: false, + cvv: false, + exp: false, + }, + fieldsEmpty: { + cardHolder: true, + pan: true, + cvv: true, + exp: true, + }, + inputStyle: { + default: { + color: '#2B343D', + fontFamily: 'Poppins, Arial, sans-serif', + fontSize: '14px', + textAlign: 'left', + '::placeholder': { + color: '#969a9f', + }, + ':focus': { + color: '#2B343D', + } + }, + invalid: { + color: '#E91932' + } + }, + save_card: false, + schemes: null, + scheme: null, + }; + + // Verify if we have required data + // TODO: Pass as param + if (typeof payplug_integrated_payment_params === 'undefined') { + return; + } + + this.form = this.element.closest('form'); + + if (payplug_integrated_payment_params.has_saved_cards) { + const otherCardRadio = this.element.querySelector('#payplug_choice_card_other'); + const payplugRadio = document.querySelector(`[id*="checkout_select_payment_payments"][value="${payplug_integrated_payment_params.payment_method_code}"]`); + + // Initial check + if ( + (otherCardRadio && otherCardRadio.checked && payplugRadio && payplugRadio.checked) || + (otherCardRadio && otherCardRadio.checked && !payplugRadio && document.querySelector('.payplug-payment-choice__input:checked')) + ) { + this.openFields(); + } + + this.element.querySelectorAll('.payment-choice__input, [id*="checkout_select_payment_payments"]').forEach((element) => { + element.addEventListener('change', (e) => { + const isOtherCardChecked = this.element.querySelector('#payplug_choice_card_other')?.checked; + const isPayplugSelected = document.querySelector(`[id*="checkout_select_payment_payments"][value="${payplug_integrated_payment_params.payment_method_code}"]`)?.checked; + + if (isOtherCardChecked && isPayplugSelected) { + this.openFields(); + } + }) + }) + return; + } + + const isChecked = this.getPaymentMethodSelectors({ methodCode: payplug_integrated_payment_params.payment_method_code, checked: true }); + if (isChecked.length) { + this.openFields(); + } + + const selectPaymentMethodsField = this.getPaymentMethodSelectors(); + selectPaymentMethodsField.forEach((element) => { + // On payment method select, open fields if payplug selected + element.addEventListener('change', (e) => { + if (payplug_integrated_payment_params.payment_method_code === e.currentTarget.value && e.currentTarget.checked) { + this.openFields(); + } + }) + }); + } + + handleShow(event) { + if (this.hasContainerTarget) { + import('jquery').then(({ default: $ }) => { + $(this.containerTarget).slideDown(); + }); + this.openFields(); + this.containerTarget.dataset.paymentInlineSubmit = "true"; + this.element.dispatchEvent(new CustomEvent('payment-method-state-change', { bubbles: true })); + } + } + + handleHide(event) { + if (this.hasContainerTarget) { + import('jquery').then(({ default: $ }) => { + $(this.containerTarget).slideUp(); + }); + this.closeFields(); + this.containerTarget.dataset.paymentInlineSubmit = "false"; + this.element.dispatchEvent(new CustomEvent('payment-method-state-change', { bubbles: true })); + } + } + + getPaymentMethodSelectors({ methodCode, checked } = {}) { + const baseSelector = '[id*=checkout_select_payment_payments]'; + + if (methodCode) { + if (checked) { + return document.querySelectorAll(`${baseSelector}[value=${methodCode}]:checked`); + } + return document.querySelectorAll(`${baseSelector}[value=${methodCode}]`); + } + return document.querySelectorAll(baseSelector); + } + + openFields() { + this.containerTarget.classList.add('payplugIntegratedPayment--loaded'); + if (null === this.options.api) { + this.load(); + } + } + + closeFields() { + this.containerTarget.classList.remove('payplugIntegratedPayment--loaded'); + } + + load() { + this.options.api = new window.Payplug.IntegratedPayment(payplug_integrated_payment_params.is_test_mode); + this.options.api.setDisplayMode3ds(window.Payplug.DisplayMode3ds.LIGHTBOX); + + const container = this.hasContainerTarget ? this.containerTarget : this.element; + + this.options.form.cardHolder = this.options.api.cardHolder( + container.querySelector('.cardHolder-input-container'), + { + default: this.options.inputStyle.default, + placeholder: payplug_integrated_payment_params.cardholder + } + ); + this.options.form.pan = this.options.api.cardNumber( + container.querySelector('.pan-input-container'), + { + default: this.options.inputStyle.default, + placeholder: payplug_integrated_payment_params.pan + } + ); + this.options.form.cvv = this.options.api.cvv( + container.querySelector('.cvv-input-container'), + { + default: this.options.inputStyle.default, + placeholder: payplug_integrated_payment_params.cvv + } + ); + this.options.form.exp = this.options.api.expiration( + container.querySelector('.exp-input-container'), + { + default: this.options.inputStyle.default, + placeholder: payplug_integrated_payment_params.exp + } + ); + this.options.schemes = this.options.api.getSupportedSchemes(); + this.bindEvents(); + this.fieldValidation(); + } + bindEvents() { + const container = this.hasContainerTarget ? this.containerTarget : this.element; + const paidButton = container.querySelector('#paid'); + if (paidButton) { + paidButton.addEventListener('click', (event) => { + event.preventDefault(); + this.options.api.validateForm(); + }); + } + + this.options.api.onValidateForm(async ({ isFormValid }) => { + if (isFormValid) { + this.toggleLoader(); + const saveCardElement = this.element.querySelector('#savecard'); + if (null !== saveCardElement) { + this.options.save_card = saveCardElement.checked; + } + const chosenScheme = this.element.querySelector('input.schemeOptions:checked'); + this.options.scheme = window.Payplug.Scheme.AUTO; + if (null !== chosenScheme) { + this.options.scheme = chosenScheme.value; + } + if (payplug_integrated_payment_params.payment_id !== undefined) { + this.options.api.pay(payplug_integrated_payment_params.payment_id, this.options.scheme, {save_card: this.options.save_card}); + return; + } + const response = await fetch(payplug_integrated_payment_params.routes.init_payment, {method: 'POST'}); + const data = await response.json(); + this.options.api.pay(data.payment_id, this.options.scheme, {save_card: this.options.save_card}); + } + }); + this.options.api.onCompleted((event) => { + if (event.error) { + console.error(event.error); + return; + } + document.querySelector('input[name=payplug_integrated_payment_token]').value = event.token; + this.form.submit(); + }); + } + fieldValidation () { + const container = this.hasContainerTarget ? this.containerTarget : this.element; + Object.keys(this.options.form).forEach((key) => { + const field = this.options.form[key]; + field.onChange((err) => { + if (err.error) { + container.querySelector(`.payplugIntegratedPayment__error--${key}`).classList.remove('payplugIntegratedPayment__error--hide'); + container.querySelector(`.${key}-input-container`).classList.add('payplugIntegratedPayment__container--invalid'); + if (err.error.name === "FIELD_EMPTY") { + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".emptyField").classList.remove('payplugIntegratedPayment__error--hide'); + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".invalidField").classList.add('payplugIntegratedPayment__error--hide'); + } else { + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".invalidField").classList.remove('payplugIntegratedPayment__error--hide'); + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".emptyField").classList.add('payplugIntegratedPayment__error--hide'); + } + } else { + container.querySelector(`.payplugIntegratedPayment__error--${key}`).classList.add('payplugIntegratedPayment__error--hide'); + container.querySelector(`.${key}-input-container`).classList.remove('payplugIntegratedPayment__container--invalid'); + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".invalidField").classList.add('payplugIntegratedPayment__error--hide'); + container.querySelector(`.payplugIntegratedPayment__error--${key}`).querySelector(".emptyField").classList.add('payplugIntegratedPayment__error--hide'); + this.options.fieldsValid[key] = true; + this.options.fieldsEmpty[key] = false; + } + }); + }) + } + toggleLoader() { + const container = this.hasContainerTarget ? this.containerTarget : this.element; + container.querySelector('.sylius-shop-loader').classList.toggle('d-none'); + } +} diff --git a/assets/shop/controllers/oney-payment_controller.js b/assets/shop/controllers/oney-payment_controller.js new file mode 100644 index 00000000..bdf7d63e --- /dev/null +++ b/assets/shop/controllers/oney-payment_controller.js @@ -0,0 +1,95 @@ +import { Controller } from '@hotwired/stimulus'; +import $ from 'jquery'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static values = { + modal: String, + area: String, + route: String, + } + connect() { + this.tabs(); + window.addEventListener('resize', () => { + setTimeout(this.tabs, 100); + }); + this.tabsHandler(); + } + tabs() { + if (window.innerWidth <= 991) { + $('.oney-payment-choice__item').hide(); + setTimeout(() => { + $.each($('.oney-payment-choice__input'), (k, el) => { + if ($(el).is(':checked')) { + $(el).parent().show(); + $(`a.tablink[data-id=${$(el).val()}]`).addClass('active'); + } + }); + }, 1); + } else { + $('.oney-payment-choice__item').show(); + $('a.tablink').removeClass('active'); + } + } + tabsHandler() { + const $tabLinks = $('a.tablink'); + $.each($tabLinks, (k, el) => { + $(el).click(function (evt) { + $('a.tablink').removeClass('active'); + $(this).addClass('active'); + $('.oney-payment-choice__item').hide(); + $(`#${$(this).data('id')}`).show(); + $(`input[value=${$(this).data('id')}`).prop('checked', true); + }); + }); + } + routeValueChanged() { + if (!this.hasRouteValue) { + return; + } + this.modalAppear(); + } + modalAppear() { + let path = this.routeValue; + $.get(path).then((data) => { + const modalTpl = document.querySelector('.modal'); + this.modal = new window.bootstrap.Modal(modalTpl); + $(modalTpl).find('.modal-body').html(data); + this.modal.show(); + this.bindModalEvents(); + }); + } + modalSubmit(e) { + if (!this.hasRouteValue) { + return; + } + e.preventDefault(); + $('.sylius-shop-loader').toggleClass("d-none"); + $.ajax({ + method: 'post', + url: this.routeValue, + data: $(e.currentTarget).serialize(), + success: (res) => { + if (Array.isArray(res)) { + $(`${this.modalValue}__content`).fadeOut(() => { + $(`${this.modalValue}__success`).show(); + }); + setTimeout(() => { + this.modal.hide(); + window.location.reload(); + }, 2500); + } + }, + error: (res) => { + $(this.modalValue).html(res.responseText); + this.bindModalEvents(); + }, + complete: () => { + $('.sylius-shop-loader').toggleClass("d-none"); + } + }); + } + bindModalEvents() { + $('form[name=form]').on('submit', (e) => this.modalSubmit(e)); + } +} diff --git a/assets/shop/controllers/oney-popin_controller.js b/assets/shop/controllers/oney-popin_controller.js new file mode 100644 index 00000000..e8cc4554 --- /dev/null +++ b/assets/shop/controllers/oney-popin_controller.js @@ -0,0 +1,167 @@ +import { Controller } from '@hotwired/stimulus'; +import $ from 'jquery'; +import WebFont from 'webfontloader'; + +/* stimulusFetch: 'lazy' */ +export default class extends Controller { + static targets = ['popin', 'variantCodes']; + static values = { + eligibleUrl: String, + popinUrl: String, + productMeta: Object, + imagesMap: Object, + translations: Object, + } + inputs = { + option: "cartItem_variant", + quantity: "cartItem_quantity", + } + storage = [] + initialize() { + WebFont.load({ + google: { + families: ["Poppins:400,600"], + }, + }); + } + connect() { + if (this.hasProductMetaValue) { + this.watch(); + } + this.fade(); + this.closeHandler(); + } + watch() { + for (const prop in this.inputs) { + const $selectors = $(`[id*=${this.inputs[prop]}`); + if ($selectors.length > 0) { + this.handleProductOptionsChange($selectors, prop); + } + this.productMetaValue = { + ...this.productMetaValue, + [prop]: $selectors.val(), + }; + $selectors.on( + "input", + this.debounce((e) => { + e.preventDefault(); + if ($selectors.length > 0) { + this.handleProductOptionsChange($selectors, prop); + } + this.productMetaValue = { + ...this.productMetaValue, + [prop]: $(e.currentTarget).val(), + }; + this.check(); + }, 500) + ); + } + } + handleProductOptionsChange($selectors, prop) { + if (prop === "option") { + let selector = ""; + $selectors.each((k, v) => { + const select = $(v); + const option = select.find("option:selected").val(); + selector += `[data-${select.attr("data-option")}="${option}"]`; + }); + return (this.productMetaValue = { + ...this.productMetaValue, + product_variant_code: $(this.variantCodesTarget).find(selector).attr("data-value") + }); + } + } + check() { + this.storage = []; + this.toggleLoader(); + $.ajax({ + url: this.eligibleUrlValue, + data: this.productMetaValue, + success: (res) => { + $(this.element).find(".oney-logo").attr("src", this.imagesMapValue[res.isEligible ? 'enabled' : 'disabled']); + res.isEligible + ? $(this.popinTarget).removeClass("disabled").addClass("enabled") + : $(this.popinTarget).removeClass("enabled").addClass("disabled"); + }, + complete: () => { + this.toggleLoader(); + } + }); + } + /** + * https://davidwalsh.name/javascript-debounce-function + */ + debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; + } + fade() { + $(this.element).on("click", (e) => { + e.preventDefault(); + e.stopPropagation(); + if (this.hasEligibleUrlValue) { + if (!$(this.popinTarget).is(":empty") && $(this.popinTarget).text().trim() === this.storage) { + $(this.popinTarget).fadeIn(); + return; + } + } + // content isn't loaded yet or cart route + this.toggleLoader(); + this.load(); + }); + } + load() { + $.ajax({ + url: this.popinUrlValue, + data: this.productMetaValue, + success: (res) => { + if (res.includes(this.translationsValue.reason)) { + $(this.popinTarget).removeClass("enabled").addClass("disabled"); + } + this.storage = $(res).text().trim(); + $(this.popinTarget).html(res); + }, + error: ()=> { + $(this.popinTarget).removeClass("enabled").addClass("disabled").html(` +${this.translationsValue.reason}
+${translations.reason}
-').concat(translations.reason,"
\n{{ method.description }}
-- {% if currentRoute == 'payplug_sylius_card_account_index' %} - {{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.confirmation_modal.confirm_card_deletion'|trans }} - {% else %} - {{ 'sylius.ui.are_your_sure_you_want_to_perform_this_action'|trans }} - {% endif %} -
-{{ 'payplug_sylius_payplug_plugin.form.complete_info.success_instruction'|trans }}
-{{ reason|trans(data.trans_params) }}
- {% endfor %} -{{ reason|trans(data.trans_params) }}
- {% else %} -{{ 'payplug_sylius_payplug_plugin.ui.oney_unavailable'|trans }}
- {% endfor %} - }}){kind=logo}
- {{ 'payplug_sylius_payplug_plugin.ui.pay'|trans }}
-{{ 'payplug_sylius_payplug_plugin.ui.by_credit_cart'|trans }}
- }})
-  }})
- {{ 'payplug_sylius_payplug_plugin.form.complete_info.success_instruction'|trans }}
+{{ ('payplug_sylius_payplug_plugin.ui.oney_gateway_config.info')|trans({'%link%': 'https://support.payplug.com/hc/fr/articles/360015899980-Le-paiement-fractionn%C3%A9-garanti-avec-Oney-sur-Sylius'})|raw }}
+
-
- {{ ('payplug_sylius_payplug_plugin.ui.3x_payment')|trans }}
- - -
-
- {{ ('payplug_sylius_payplug_plugin.ui.4x_payment')|trans }}
- + {% for keyChoice, choice in form.vars.choices %} + + }})
+ {% if choice.value|split('oney_')|last not in constant('PayPlug\\SyliusPayPlugPlugin\\Gateway\\OneyGatewayFactory::ONEY_WITHOUT_FEES_CHOICES') %}
+
+ {% endif %}
+ {{ ('payplug_sylius_payplug_plugin.ui.' ~ choice.value ~ '_payment')|trans }}
+ + {% endfor %} }})
+
+  }})
+  }}){kind=logo}
+
+ {{ reason|trans(data.trans_params) }}
+ {% endfor %} +{{ reason|trans(data.trans_params) }}
+ {% else %} +{{ 'payplug_sylius_payplug_plugin.ui.oney_unavailable'|trans }}
+ {% endfor %} +
+ + {{ 'payplug_sylius_payplug_plugin.ui.pay'|trans }} + {% if is_oney_without_fees() %} + {{ 'payplug_sylius_payplug_plugin.ui.without_fees'|trans }} + {% endif %} +
+{{ 'payplug_sylius_payplug_plugin.ui.by_credit_cart'|trans }}
+ {% for key, choice in oney_supported_choices() %} + ~ 'x.svg') }})
+
+ | {{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.brand'|trans }} | {{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.mask'|trans }} | {{ 'payplug_sylius_payplug_plugin.ui.account.saved_cards.expire'|trans }} | -{{ 'sylius.ui.action'|trans }} | +{{ 'sylius.ui.action'|trans }} |
|---|---|---|---|---|
| @@ -29,7 +30,7 @@ | - ****{{ savedCard.last4 }} + **** **** **** {{ savedCard.last4 }} | {% if "now"|date("Y") > savedCard.expirationYear or ("now"|date("Y") == savedCard.expirationYear and "now"|date("m") > savedCard.expirationMonth) %}@@ -44,14 +45,13 @@ | {% endif %}- + {{ buttons.delete(path('payplug_sylius_card_account_delete', {'id': savedCard.id}), null, true, savedCard.id) }} |