1. Installation

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

Installed and configured Symfony Flex package
Configured Sylius Recipes flex endpoint

1. Installing the package

composer require commerce-weavers/sylius-tpay-plugin

2. 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];

3. 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;
}

4. 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;
}

5. 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

# ...

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

mkdir -p templates/bundles/SyliusShopBundle/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusShopBundle/* templates/bundles/SyliusShopBundle/

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.

7. 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

8. Run migrations

bin/console doctrine:migrations:migrate

9. Clear cache

bin/console cache:clear

Manual installation process

1. Installing the package

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

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

<?php

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

3. 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}))?$

4. Import configs

config/packages/commerce_weavers_tpay_plugin.yaml:

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

5. Add environment value PAYUM_CYPHER_KEY

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

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/
cp -R vendor/commerce-weavers/sylius-tpay-plugin/templates/bundles/SyliusShopBundle/* templates/bundles/SyliusShopBundle/

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.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1. Installation

Automated installation process

Pre-requirements

1. Installing the package

2. Configure Webpack

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

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

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

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

7. Build frontend

8. Run migrations

9. Clear cache

Manual installation process

1. Installing the package

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

3. Import routes

4. Import configs

5. Add environment value PAYUM_CYPHER_KEY

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

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

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

9. Configure Webpack

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

11. Build frontend

12. Run migrations

13. Clear cache

Clone this wiki locally

1. Installation

Automated installation process

Pre-requirements

1. Installing the package

2. Configure Webpack

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

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

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

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

7. Build frontend

8. Run migrations

9. Clear cache

Manual installation process

1. Installing the package

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

3. Import routes

4. Import configs

5. Add environment value PAYUM_CYPHER_KEY

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

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

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

9. Configure Webpack

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

11. Build frontend

12. Run migrations

13. Clear cache

Clone this wiki locally

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

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

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

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

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