Skip to content

1. Installation

Kevin Kaniaburka edited this page Dec 17, 2024 · 13 revisions

The installation process of Sylius Tpay Plugin is aimed to be simple and require as few steps as possible. Sylius Tpay Plugin can be installed in an automatic way, with tools like Symfony Flex or in a traditional way, where you need to do every step by hand.

Automated installation process

Pre-requirements

1. Installing the package

composer require commerce-weavers/sylius-tpay-plugin

2. Add environment value PAYUM_CYPHER_KEY

For more information about encrypting gateway configs and generating PAYUM_CYPHER_KEY click here

3. Configure Webpack

webpack.config.js:

+const CommerceWeaversSyliusTpay = require('./vendor/commerce-weavers/sylius-tpay-plugin/index');
...

+const cwTpayShop = CommerceWeaversSyliusTpay.getWebpackShopConfig(path.resolve(__dirname));
+const cwTpayAdmin = CommerceWeaversSyliusTpay.getWebpackAdminConfig(path.resolve(__dirname));

-module.exports = [shopConfig, adminConfig, appShopConfig, appAdminConfig];
+module.exports = [shopConfig, adminConfig, appShopConfig, appAdminConfig, cwTpayShop, cwTpayAdmin];

4. Add a new trait and interface to the Order entity:

src/Entity/Order/Order.php:

<?php

// ...

+use CommerceWeavers\SyliusTpayPlugin\Model\OrderLastNewPaymentAwareInterface;
+use CommerceWeavers\SyliusTpayPlugin\Model\OrderLastNewPaymentAwareTrait;

// ...

#[ORM\Entity]
#[ORM\Table(name: 'sylius_order')]
-class Order extends BaseOrder
+class Order extends BaseOrder implements OrderLastNewPaymentAwareInterface
{
+    use OrderLastNewPaymentAwareTrait;
}

5. Add a new trait and interface to the PaymentMethodRepository:

src/Repository/Payment/PaymentMethodRepository.php:

<?php

declare(strict_types=1);

namespace App\Repository\Payment;

use CommerceWeavers\SyliusTpayPlugin\Repository\PaymentMethodTrait;
use CommerceWeavers\SyliusTpayPlugin\Repository\PaymentMethodRepositoryInterface;
use Sylius\Bundle\CoreBundle\Doctrine\ORM\PaymentMethodRepository as BasePaymentMethodRepository;

final class PaymentMethodRepository extends BasePaymentMethodRepository implements PaymentMethodRepositoryInterface
{
    use PaymentMethodTrait;
}

6. Configure Order and PaymentMethod resources to use your customized entities and repositories:

config/packages/_sylius.yaml:

# ...

sylius_order:
    resources:
        order:
            classes:
                model: App\Entity\Order\Order

sylius_payment:
    resources:
        payment_method:
            classes:
                repository: App\Repository\Payment\PaymentMethodRepository

# ...

7. Copy Sylius templates overridden in plugin to your templates' directory (e.g templates/bundles/)

mkdir -p templates/bundles/SyliusShopBundle/
mkdir -p templates/bundles/SyliusAdminBundle/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusShopBundle/* templates/bundles/SyliusShopBundle/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusAdminBundle/* templates/bundles/SyliusAdminBundle/
or if you already have these templates customized in your app, apply the following changes:

templates/bundles/SyliusShopBundle/Checkout/Complete/_navigation.html.twig:

  {% set payment = order.lastCartPayment() %}

+ {# >>> SyliusTpayPlugin customization #}
+ {% set payment_type = cw_tpay_get_gateway_config_value(payment.method.gatewayConfig, 'type') %}
+
+ {% if payment_type in ['apple_pay', 'google_pay'] %}
+     {{ sylius_template_event('cw.tpay.shop.checkout.complete.navigation', { form, order, payment }) }}
+ {% else %}
+     <button type="submit" class="ui huge primary fluid icon labeled button" {{ sylius_test_html_attribute('confirmation-button') }}>
+         <i class="check icon"></i> {{ 'sylius.ui.place_order'|trans }}
+     </button>
+ {% endif %}
+ {# SyliusTpayPlugin customization <<< #}

TIP: Add SyliusTpayPlugin customization at the end of the file.

templates/bundles/SyliusShopBundle/Checkout/SelectPayment/_choice.html.twig:

  <div class="item" {{ sylius_test_html_attribute('payment-item') }}>
      <div class="field">
          <div class="ui radio checkbox" {{ sylius_test_html_attribute('payment-method-checkbox') }}>
              {{ form_widget(form, sylius_test_form_attribute('payment-method-select')) }}
          </div>
      </div>
      <div class="content">
          <a class="header">{{ form_label(form, null, {'label_attr': {'data-test-payment-method-label': ''}}) }}</a>
          {{ sylius_template_event('sylius.shop.checkout.select_payment.choice_item_content', {'method': method}) }}
+ 
+         {# >>> SyliusTpayPlugin customization #}
+         {{ sylius_template_event('cw.tpay.shop.select_payment.choice_item_form', {'form': form.parent.parent, 'method': method}) }}
+         {# SyliusTpayPlugin customization <<< #}
      </div>
  </div>

TIP: Add SyliusTpayPlugin customization at the end inside the div.content element.

templates/bundles/SyliusAdminBundle/PaymentMethod/_form.html.twig:

{# ... #}

<div class="ui segment">
    <h4 class="ui dividing header">{{ 'sylius.ui.gateway_configuration'|trans }}</h4>

    {# ... #}

+   {# >>> SyliusTpayPlugin customization #}
+   {{ sylius_template_event('cw.tpay.admin.payment_method.form', _context) }}
+   {# SyliusTpayPlugin customization <<< #}
</div>

{# ... #}

TIP: Add SyliusTpayPlugin customization at the end inside the div.ui.segment element with sylius.ui.gateway_configuration header.

8. Build frontend

yarn add --dev "@commerce-weavers/sylius-tpay@file:vendor/commerce-weavers/sylius-tpay-plugin"
yarn install
yarn build

or

npm add --save-dev "@commerce-weavers/sylius-tpay@file:vendor/commerce-weavers/sylius-tpay-plugin"
npm install
npm run build

9. Run migrations

bin/console doctrine:migrations:migrate

10. Clear cache

bin/console cache:clear

Manual installation process

1. Installing the package

composer require commerce-weavers/sylius-tpay-plugin --no-scripts

2. Add environment value PAYUM_CYPHER_KEY

For more information about encrypting gateway configs and generating PAYUM_CYPHER_KEY click here

3. Add the plugin to config/bundles.php if not added:

<?php

return [
    //..
    CommerceWeavers\SyliusTpayPlugin\CommerceWeaversSyliusTpayPlugin::class => ['all' => true],
];

4. Import routes

config/routes/commerce_weavers_tpay_plugin.yaml:

commerce_weavers_tpay_webhook:
    resource: "@CommerceWeaversSyliusTpayPlugin/config/routes_webhook.php"
commerce_weavers_tpay_shop:
    resource: "@CommerceWeaversSyliusTpayPlugin/config/routes_shop.php"
    prefix: /{_locale}
    requirements:
        _locale: ^[A-Za-z]{2,4}(_([A-Za-z]{4}|[0-9]{3}))?(_([A-Za-z]{2}|[0-9]{3}))?$
commerce_weavers_sylius_tpay_admin:
    resource: "@CommerceWeaversSyliusTpayPlugin/config/routes_admin.php"
    prefix: /admin

5. Import configs

config/packages/commerce_weavers_tpay_plugin.yaml:

imports:
    - { resource: "@CommerceWeaversSyliusTpayPlugin/config/config.php" }

6. Add a new trait and interface to the Order entity:

src/Entity/Order/Order.php:

<?php

// ...

+use CommerceWeavers\SyliusTpayPlugin\Model\OrderLastNewPaymentAwareInterface;
+use CommerceWeavers\SyliusTpayPlugin\Model\OrderLastNewPaymentAwareTrait;

// ...

#[ORM\Entity]
#[ORM\Table(name: 'sylius_order')]
-class Order extends BaseOrder
+class Order extends BaseOrder implements OrderLastNewPaymentAwareInterface
{
+    use OrderLastNewPaymentAwareTrait;
}

7. Add a new trait and interface to the PaymentMethodRepository:

src/Repository/Payment/PaymentMethodRepository.php:

<?php

declare(strict_types=1);

namespace App\Repository\Payment;

use CommerceWeavers\SyliusTpayPlugin\Repository\PaymentMethodTrait;
use CommerceWeavers\SyliusTpayPlugin\Repository\PaymentMethodRepositoryInterface;
use Sylius\Bundle\CoreBundle\Doctrine\ORM\PaymentMethodRepository as BasePaymentMethodRepository;

final class PaymentMethodRepository extends BasePaymentMethodRepository implements PaymentMethodRepositoryInterface
{
    use PaymentMethodTrait;
}

8. Configure Order and PaymentMethod resources to use your customized entities and repositories:

config/packages/_sylius.yaml:

# ...

sylius_order:
    resources:
        order:
            classes:
                model: App\Entity\Order\Order

sylius_payment:
    resources:
        payment_method:
            classes:
                repository: App\Repository\Payment\PaymentMethodRepository

# ...

9. Configure Webpack

webpack.config.js:

+const CommerceWeaversSyliusTpay = require('./vendor/commerce-weavers/sylius-tpay-plugin/index');
...

+const cwTpayShop = CommerceWeaversSyliusTpay.getWebpackShopConfig(path.resolve(__dirname));
+const cwTpayAdmin = CommerceWeaversSyliusTpay.getWebpackAdminConfig(path.resolve(__dirname));

-module.exports = [shopConfig, adminConfig, appShopConfig, appAdminConfig];
+module.exports = [shopConfig, adminConfig, appShopConfig, appAdminConfig, cwTpayShop, cwTpayAdmin];

10. Copy Sylius templates overridden in plugin to your templates' directory (e.g templates/bundles/)

mkdir -p templates/bundles/SyliusShopBundle/
mkdir -p templates/bundles/SyliusAdminBundle/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusShopBundle/* templates/bundles/SyliusShopBundle/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusAdminBundle/* templates/bundles/SyliusAdminBundle/
or if you already have these templates customized in your app, apply the following changes:

templates/bundles/SyliusShopBundle/Checkout/Complete/_navigation.html.twig:

  {% set payment = order.lastCartPayment() %}

+ {# >>> SyliusTpayPlugin customization #}
+ {% set payment_type = cw_tpay_get_gateway_config_value(payment.method.gatewayConfig, 'type') %}
+
+ {% if payment_type in ['apple_pay', 'google_pay'] %}
+     {{ sylius_template_event('cw.tpay.shop.checkout.complete.navigation', { form, order, payment }) }}
+ {% else %}
+     <button type="submit" class="ui huge primary fluid icon labeled button" {{ sylius_test_html_attribute('confirmation-button') }}>
+         <i class="check icon"></i> {{ 'sylius.ui.place_order'|trans }}
+     </button>
+ {% endif %}
+ {# SyliusTpayPlugin customization <<< #}

TIP: Add SyliusTpayPlugin customization at the end of the file.

templates/bundles/SyliusShopBundle/Checkout/SelectPayment/_choice.html.twig:

  <div class="item" {{ sylius_test_html_attribute('payment-item') }}>
      <div class="field">
          <div class="ui radio checkbox" {{ sylius_test_html_attribute('payment-method-checkbox') }}>
              {{ form_widget(form, sylius_test_form_attribute('payment-method-select')) }}
          </div>
      </div>
      <div class="content">
          <a class="header">{{ form_label(form, null, {'label_attr': {'data-test-payment-method-label': ''}}) }}</a>
          {{ sylius_template_event('sylius.shop.checkout.select_payment.choice_item_content', {'method': method}) }}
+ 
+         {# >>> SyliusTpayPlugin customization #}
+         {{ sylius_template_event('cw.tpay.shop.select_payment.choice_item_form', {'form': form.parent.parent, 'method': method}) }}
+         {# SyliusTpayPlugin customization <<< #}
      </div>
  </div>

TIP: Add SyliusTpayPlugin customization at the end inside the div.content element.

templates/bundles/SyliusAdminBundle/PaymentMethod/_form.html.twig:

{# ... #}

<div class="ui segment">
    <h4 class="ui dividing header">{{ 'sylius.ui.gateway_configuration'|trans }}</h4>

    {# ... #}

+   {# >>> SyliusTpayPlugin customization #}
+   {{ sylius_template_event('cw.tpay.admin.payment_method.form', _context) }}
+   {# SyliusTpayPlugin customization <<< #}
</div>

{# ... #}

TIP: Add SyliusTpayPlugin customization at the end inside the div.ui.segment element with sylius.ui.gateway_configuration header.

11. Build frontend

yarn add --dev "@commerce-weavers/sylius-tpay@file:vendor/commerce-weavers/sylius-tpay-plugin"
yarn install
yarn build

or

npm add --save-dev "@commerce-weavers/sylius-tpay@file:vendor/commerce-weavers/sylius-tpay-plugin"
npm install
npm run build

12. Run migrations

bin/console doctrine:migrations:migrate

13. Clear cache

bin/console cache:clear