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 cwTpayShop = CommerceWeaversSyliusTpay.getWebpackShopConfig(path.resolve(__dirname));

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

3. Adjust models

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

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

  {# ... #}

+ {# >>> 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 <<< #}

  {# rest of code #}

5. Build frontend

yarn install && yarn build

or

npm install && npm run build

6. Clear cache

bin/console cache:clear

Manual installation process

1. Installing the package

composer require commerce-weavers/sylius-tpay-plugin

2. Import routes

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

3. Import configs

config.yaml:

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

4. Add environment value PAYUM_CYPHER_KEY

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

5. Add to Order entity new trait and interface:

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

6. Configure Webpack

webpack.config.js:

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

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

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

7. Customize template

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

  {# ... #}

+ {# >>> 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 <<< #}

  {# rest of code #}

8. Build frontend

yarn install && yarn build

or

npm install && npm run build

9. Clear cache

bin/console cache:clear