diff --git a/composer.json b/composer.json
index e391935c..26f9f806 100644
--- a/composer.json
+++ b/composer.json
@@ -7,7 +7,7 @@
     "require": {
         "php": "^7.3",
 
-        "sylius/sylius": "^1.7",
+        "sylius/sylius": "1.7.*",
         "nyholm/append-query-string": "^0.1.1",
         "phpseclib/phpseclib": "^2.0"
     },
diff --git a/src/Controller/CancelPayPalCheckoutPaymentAction.php b/src/Controller/CancelPayPalCheckoutPaymentAction.php
deleted file mode 100644
index 523db726..00000000
--- a/src/Controller/CancelPayPalCheckoutPaymentAction.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Sylius\PayPalPlugin\Controller;
-
-use Sylius\PayPalPlugin\Manager\PaymentStateManagerInterface;
-use Sylius\PayPalPlugin\Provider\PaymentProviderInterface;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\HttpFoundation\Session\Flash\FlashBagInterface;
-
-final class CancelPayPalCheckoutPaymentAction
-{
-    /** @var PaymentProviderInterface */
-    private $paymentProvider;
-
-    /** @var PaymentStateManagerInterface */
-    private $paymentStateManager;
-
-    public function __construct(
-        PaymentProviderInterface $paymentProvider,
-        PaymentStateManagerInterface $paymentStateManager
-    ) {
-        $this->paymentProvider = $paymentProvider;
-        $this->paymentStateManager = $paymentStateManager;
-    }
-
-    public function __invoke(Request $request): Response
-    {
-        $content = (array) json_decode((string) $request->getContent(false), true);
-
-        $payment = $this->paymentProvider->getByPayPalOrderId((string) $content['payPalOrderId']);
-
-        /** @var FlashBagInterface $flashBag */
-        $flashBag = $request->getSession()->getBag('flashes');
-        $flashBag->add('error', 'sylius.pay_pal.something_went_wrong');
-
-        $this->paymentStateManager->cancel($payment);
-
-        return new Response('', Response::HTTP_NO_CONTENT);
-    }
-}
diff --git a/src/Controller/CompletePayPalOrderAction.php b/src/Controller/CompletePayPalOrderAction.php
index e7a24936..fa18fefc 100644
--- a/src/Controller/CompletePayPalOrderAction.php
+++ b/src/Controller/CompletePayPalOrderAction.php
@@ -4,9 +4,13 @@
 
 namespace Sylius\PayPalPlugin\Controller;
 
-use Sylius\Component\Core\Model\PaymentInterface;
+use Doctrine\Persistence\ObjectManager;
+use SM\Factory\FactoryInterface;
+use Sylius\Component\Core\Model\OrderInterface;
+use Sylius\Component\Core\OrderCheckoutTransitions;
 use Sylius\PayPalPlugin\Manager\PaymentStateManagerInterface;
 use Sylius\PayPalPlugin\Provider\OrderProviderInterface;
+use Sylius\PayPalPlugin\Provider\PaymentProviderInterface;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
@@ -20,28 +24,50 @@ final class CompletePayPalOrderAction
     /** @var UrlGeneratorInterface */
     private $router;
 
+    /** @var PaymentProviderInterface */
+    private $paymentProvider;
+
     /** @var OrderProviderInterface */
     private $orderProvider;
 
+    /** @var FactoryInterface */
+    private $stateMachineFactory;
+
+    /** @var ObjectManager */
+    private $orderManager;
+
     public function __construct(
         PaymentStateManagerInterface $paymentStateManager,
         UrlGeneratorInterface $router,
-        OrderProviderInterface $orderProvider
+        PaymentProviderInterface $paymentProvider,
+        OrderProviderInterface $orderProvider,
+        FactoryInterface $stateMachineFactory,
+        ObjectManager $orderManager
     ) {
         $this->paymentStateManager = $paymentStateManager;
         $this->router = $router;
+        $this->paymentProvider = $paymentProvider;
         $this->orderProvider = $orderProvider;
+        $this->stateMachineFactory = $stateMachineFactory;
+        $this->orderManager = $orderManager;
     }
 
     public function __invoke(Request $request): Response
     {
-        $token = (string) $request->attributes->get('token');
-        $order = $this->orderProvider->provideOrderByToken($token);
-        /** @var PaymentInterface $payment */
-        $payment = $order->getLastPayment(PaymentInterface::STATE_PROCESSING);
+        $id = (string) $request->query->get('id');
+        $payment = $this->paymentProvider->getByPayPalOrderId($id);
+        /** @var OrderInterface $order */
+        $order = $payment->getOrder();
 
         $this->paymentStateManager->complete($payment);
 
+        $stateMachine = $this->stateMachineFactory->get($order, OrderCheckoutTransitions::GRAPH);
+        $stateMachine->apply(OrderCheckoutTransitions::TRANSITION_COMPLETE);
+
+        $this->orderManager->flush();
+
+        $request->getSession()->set('sylius_order_id', $order->getId());
+
         return new JsonResponse([
             'orderID' => $payment->getDetails()['paypal_order_id'],
             'status' => $payment->getState(),
diff --git a/src/Controller/PayPalButtonsController.php b/src/Controller/PayPalButtonsController.php
index f2a577ce..8a5caf79 100644
--- a/src/Controller/PayPalButtonsController.php
+++ b/src/Controller/PayPalButtonsController.php
@@ -4,11 +4,16 @@
 
 namespace Sylius\PayPalPlugin\Controller;
 
+use Sylius\Bundle\PayumBundle\Model\GatewayConfigInterface;
 use Sylius\Component\Channel\Context\ChannelContextInterface;
 use Sylius\Component\Core\Model\ChannelInterface;
 use Sylius\Component\Core\Model\OrderInterface;
+use Sylius\Component\Core\Model\PaymentInterface;
+use Sylius\Component\Core\Model\PaymentMethodInterface;
 use Sylius\Component\Core\Repository\OrderRepositoryInterface;
 use Sylius\Component\Locale\Context\LocaleContextInterface;
+use Sylius\PayPalPlugin\Api\CacheAuthorizeClientApiInterface;
+use Sylius\PayPalPlugin\Api\IdentityApiInterface;
 use Sylius\PayPalPlugin\Processor\LocaleProcessorInterface;
 use Sylius\PayPalPlugin\Provider\AvailableCountriesProviderInterface;
 use Sylius\PayPalPlugin\Provider\PayPalConfigurationProviderInterface;
@@ -43,6 +48,12 @@ final class PayPalButtonsController
     /** @var LocaleProcessorInterface */
     private $localeProcessor;
 
+    /** @var CacheAuthorizeClientApiInterface */
+    private $authorizeClientApi;
+
+    /** @var IdentityApiInterface */
+    private $identityApi;
+
     public function __construct(
         Environment $twig,
         UrlGeneratorInterface $router,
@@ -51,7 +62,9 @@ public function __construct(
         PayPalConfigurationProviderInterface $payPalConfigurationProvider,
         OrderRepositoryInterface $orderRepository,
         AvailableCountriesProviderInterface $availableCountriesProvider,
-        LocaleProcessorInterface $localeProcessor
+        LocaleProcessorInterface $localeProcessor,
+        CacheAuthorizeClientApiInterface $authorizeClientApi,
+        IdentityApiInterface $identityApi
     ) {
         $this->twig = $twig;
         $this->router = $router;
@@ -61,6 +74,8 @@ public function __construct(
         $this->orderRepository = $orderRepository;
         $this->availableCountriesProvider = $availableCountriesProvider;
         $this->localeProcessor = $localeProcessor;
+        $this->authorizeClientApi = $authorizeClientApi;
+        $this->identityApi = $identityApi;
     }
 
     public function renderProductPageButtonsAction(Request $request): Response
@@ -135,4 +150,39 @@ public function renderPaymentPageButtonsAction(Request $request): Response
             return new Response('');
         }
     }
+
+    public function renderPayPalPaymentAction(Request $request): Response
+    {
+        $orderId = $request->attributes->getInt('orderId');
+        /** @var OrderInterface $order */
+        $order = $this->orderRepository->find($orderId);
+        /** @var PaymentInterface $payment */
+        $payment = $order->getLastPayment();
+        /** @var PaymentMethodInterface $paymentMethod */
+        $paymentMethod = $payment->getMethod();
+        /** @var GatewayConfigInterface $gatewayConfig */
+        $gatewayConfig = $paymentMethod->getGatewayConfig();
+        /** @var string $clientId */
+        $clientId = $gatewayConfig->getConfig()['client_id'];
+        /** @var string $partnerAttributionId */
+        $partnerAttributionId = $gatewayConfig->getConfig()['partner_attribution_id'];
+
+        /** @var OrderInterface $order */
+        $order = $payment->getOrder();
+
+        $token = $this->authorizeClientApi->authorize($paymentMethod);
+        $clientToken = $this->identityApi->generateToken($token);
+
+        return new Response($this->twig->render('@SyliusPayPalPlugin/payWithPaypal.html.twig', [
+            'available_countries' => $this->availableCountriesProvider->provide(),
+            'billing_address' => $order->getBillingAddress(),
+            'client_id' => $clientId,
+            'client_token' => $clientToken,
+            'currency' => $order->getCurrencyCode(),
+            'locale' => $this->localeProcessor->process((string) $order->getLocaleCode()),
+            'merchant_id' => $gatewayConfig->getConfig()['merchant_id'],
+            'order_id' => $order->getId(),
+            'partner_attribution_id' => $partnerAttributionId,
+        ]));
+    }
 }
diff --git a/src/Controller/PayWithPayPalFormAction.php b/src/Controller/PayWithPayPalFormAction.php
deleted file mode 100644
index 8e2ace2c..00000000
--- a/src/Controller/PayWithPayPalFormAction.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Sylius\PayPalPlugin\Controller;
-
-use Sylius\Bundle\PayumBundle\Model\GatewayConfigInterface;
-use Sylius\Component\Core\Model\OrderInterface;
-use Sylius\Component\Core\Model\PaymentInterface;
-use Sylius\Component\Core\Model\PaymentMethodInterface;
-use Sylius\Component\Core\Repository\PaymentRepositoryInterface;
-use Sylius\PayPalPlugin\Api\CacheAuthorizeClientApiInterface;
-use Sylius\PayPalPlugin\Api\IdentityApiInterface;
-use Sylius\PayPalPlugin\Provider\AvailableCountriesProviderInterface;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Twig\Environment;
-
-final class PayWithPayPalFormAction
-{
-    /** @var Environment */
-    private $twig;
-
-    /** @var PaymentRepositoryInterface */
-    private $paymentRepository;
-
-    /** @var AvailableCountriesProviderInterface */
-    private $countriesProvider;
-
-    /** @var CacheAuthorizeClientApiInterface */
-    private $authorizeClientApi;
-
-    /** @var IdentityApiInterface */
-    private $identityApi;
-
-    public function __construct(
-        Environment $twig,
-        PaymentRepositoryInterface $paymentRepository,
-        AvailableCountriesProviderInterface $countriesProvider,
-        CacheAuthorizeClientApiInterface $authorizeClientApi,
-        IdentityApiInterface $identityApi
-    ) {
-        $this->twig = $twig;
-        $this->paymentRepository = $paymentRepository;
-        $this->countriesProvider = $countriesProvider;
-        $this->authorizeClientApi = $authorizeClientApi;
-        $this->identityApi = $identityApi;
-    }
-
-    public function __invoke(Request $request): Response
-    {
-        /** @var PaymentInterface $payment */
-        $payment = $this->paymentRepository->find($request->attributes->get('id'));
-        /** @var PaymentMethodInterface $paymentMethod */
-        $paymentMethod = $payment->getMethod();
-
-        /** @var GatewayConfigInterface $gatewayConfig */
-        $gatewayConfig = $paymentMethod->getGatewayConfig();
-        /** @var string $clientId */
-        $clientId = $gatewayConfig->getConfig()['client_id'];
-        /** @var string $partnerAttributionId */
-        $partnerAttributionId = $gatewayConfig->getConfig()['partner_attribution_id'];
-
-        /** @var OrderInterface $order */
-        $order = $payment->getOrder();
-
-        $token = $this->authorizeClientApi->authorize($paymentMethod);
-        $clientToken = $this->identityApi->generateToken($token);
-
-        return new Response($this->twig->render('@SyliusPayPalPlugin/payWithPaypal.html.twig', [
-            'available_countries' => $this->countriesProvider->provide(),
-            'billing_address' => $order->getBillingAddress(),
-            'client_id' => $clientId,
-            'client_token' => $clientToken,
-            'currency' => $order->getCurrencyCode(),
-            'locale' => $request->getLocale(),
-            'merchant_id' => $gatewayConfig->getConfig()['merchant_id'],
-            'order_token' => $order->getTokenValue(),
-            'partner_attribution_id' => $partnerAttributionId,
-        ]));
-    }
-}
diff --git a/src/Resources/config/services/controller.xml b/src/Resources/config/services/controller.xml
index 1127c00e..aee9aba6 100644
--- a/src/Resources/config/services/controller.xml
+++ b/src/Resources/config/services/controller.xml
@@ -25,17 +25,13 @@
             <argument type="service" id="sylius.order_processing.order_payment_processor.checkout" />
         </service>
 
-        <service id="Sylius\PayPalPlugin\Controller\CancelPayPalCheckoutPaymentAction">
-            <argument type="service" id="Sylius\PayPalPlugin\Provider\PaymentProviderInterface" />
-            <argument type="service" id="Sylius\PayPalPlugin\Manager\PaymentStateManagerInterface" />
-        </service>
-
         <service id="Sylius\PayPalPlugin\Controller\CompletePayPalOrderAction">
             <argument type="service" id="Sylius\PayPalPlugin\Manager\PaymentStateManagerInterface" />
             <argument type="service" id="router" />
+            <argument type="service" id="Sylius\PayPalPlugin\Provider\PaymentProviderInterface" />
             <argument type="service" id="Sylius\PayPalPlugin\Provider\OrderProviderInterface" />
-            <argument type="service" id="Sylius\PayPalPlugin\Api\AuthorizeClientApiInterface" />
-            <argument type="service" id="Sylius\PayPalPlugin\Api\CompleteOrderApiInterface" />
+            <argument type="service" id="sm.factory" />
+            <argument type="service" id="sylius.manager.order" />
         </service>
 
         <service id="Sylius\PayPalPlugin\Controller\CreatePayPalOrderFromPaymentPageAction" public="true">
@@ -84,12 +80,6 @@
             <argument type="service" id="sylius.repository.order" />
             <argument type="service" id="Sylius\PayPalPlugin\Provider\AvailableCountriesProviderInterface" />
             <argument type="service" id="Sylius\PayPalPlugin\Processor\LocaleProcessorInterface" />
-        </service>
-
-        <service id="Sylius\PayPalPlugin\Controller\PayWithPayPalFormAction">
-            <argument type="service" id="twig" />
-            <argument type="service" id="sylius.repository.payment" />
-            <argument type="service" id="Sylius\PayPalPlugin\Provider\AvailableCountriesProviderInterface" />
             <argument type="service" id="Sylius\PayPalPlugin\Api\CacheAuthorizeClientApiInterface" />
             <argument type="service" id="Sylius\PayPalPlugin\Api\IdentityApiInterface" />
         </service>
diff --git a/src/Resources/config/shop_routing.yaml b/src/Resources/config/shop_routing.yaml
index 835c8ed1..e237f7c3 100644
--- a/src/Resources/config/shop_routing.yaml
+++ b/src/Resources/config/shop_routing.yaml
@@ -1,11 +1,5 @@
-sylius_paypal_plugin_pay_with_paypal_form:
-    path: /pay-with-paypal/{id}
-    methods: [GET]
-    defaults:
-        _controller: Sylius\PayPalPlugin\Controller\PayWithPayPalFormAction
-
 sylius_paypal_plugin_create_paypal_order:
-    path: /create-pay-pal-order/{token}
+    path: /create-pay-pal-order/{id}
     methods: [POST]
     defaults:
         _controller: Sylius\PayPalPlugin\Controller\CreatePayPalOrderAction
@@ -17,7 +11,7 @@ sylius_paypal_plugin_create_paypal_order_from_cart:
         _controller: Sylius\PayPalPlugin\Controller\CreatePayPalOrderFromCartAction
 
 sylius_paypal_plugin_complete_paypal_order:
-    path: /complete-pay-pal-order/{token}
+    path: /complete-pay-pal-order
     methods: [POST]
     defaults:
         _controller: Sylius\PayPalPlugin\Controller\CompletePayPalOrderAction
@@ -116,12 +110,6 @@ sylius_paypal_plugin_cancel_payment:
     defaults:
         _controller: Sylius\PayPalPlugin\Controller\CancelPayPalPaymentAction
 
-sylius_paypal_plugin_cancel_checkout_payment:
-    path: /cancel-pay-pal-checkout-payment
-    methods: [POST]
-    defaults:
-        _controller: Sylius\PayPalPlugin\Controller\CancelPayPalCheckoutPaymentAction
-
 sylius_paypal_plugin_payment_error:
     path: /pay-pal-payment-error
     methods: [POST]
diff --git a/src/Resources/views/bundles/SyliusShopBundle/Checkout/Complete/_navigation.html.twig b/src/Resources/views/bundles/SyliusShopBundle/Checkout/Complete/_navigation.html.twig
new file mode 100644
index 00000000..cfa985ca
--- /dev/null
+++ b/src/Resources/views/bundles/SyliusShopBundle/Checkout/Complete/_navigation.html.twig
@@ -0,0 +1,7 @@
+{% if order.lastPayment.method.gatewayConfig.factoryName == 'sylius.pay_pal' and order.lastPayment.state == 'cart' %}
+    {{ render(controller('Sylius\\PayPalPlugin\\Controller\\PayPalButtonsController:renderPayPalPaymentAction', {'orderId': order.id})) }}
+{% 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 %}
diff --git a/src/Resources/views/payWithPaypal.html.twig b/src/Resources/views/payWithPaypal.html.twig
index 1d604120..9c8bcb91 100644
--- a/src/Resources/views/payWithPaypal.html.twig
+++ b/src/Resources/views/payWithPaypal.html.twig
@@ -1,247 +1,248 @@
 {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Pay with PayPal</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        {% block stylesheets %}
-            <style>
-                .container {
-                    padding: 30px;
-                    align-items: center;
-                    display: grid;
-                    justify-content: center;
-                    grid-template-rows: 30vh auto;
-                    width: 400px;
-                    margin: auto;
-                    font-family: 'Roboto', verdana, sans-serif;
-                }
-
-                #sylius-logo {
-                    width: 100%;
-                }
-
-                .padding {
-                    padding: 10px;
-                }
+    {% block stylesheets %}
+        <style>
+            .container {
+                align-items: center;
+                display: grid;
+                justify-content: center;
+                margin: auto;
+                font-family: 'Roboto', verdana, sans-serif;
+            }
 
-                .back-button-container {
-                    position: absolute;
-                    padding: 20px;
-                    top: 0;
-                    left: 0;
-                }
+            #sylius-logo {
+                width: 100%;
+            }
 
-                .back-button {
-                    cursor: pointer;
-                    display: inline-block;
-                    min-height: 1em;
-                    outline: 0;
-                    border: none;
-                    vertical-align: baseline;
-                    color: rgba(0,0,0,.6);
-                    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
-                    padding: .78571429em 1.5em .78571429em;
-                    text-transform: none;
-                    text-shadow: none;
-                    font-weight: 700;
-                    line-height: 1em;
-                    font-style: normal;
-                    text-align: center;
-                    text-decoration: none;
-                    border-radius: .28571429rem;
-                    background-color: #1abb9c;
-                    color: #fff;
-                    margin:auto;
-                }
+            .padding {
+                padding: 10px;
+            }
 
-                #paypal-payment-container {
-                    min-height: 100%;
-                    height: auto;
-                    width: 100%;
-                }
+            #paypal-payment-container {
+                min-height: 100%;
+                height: auto;
+                width: 100%;
+            }
 
-                .input {
-                    height: 30px;
-                    padding: 5px;
-                    margin-bottom: 10px;
-                }
+            .input {
+                height: 30px;
+                padding: 5px;
+                margin-bottom: 10px;
+            }
 
-                .low-opacity {
-                    opacity: 0.9;
-                }
+            .low-opacity {
+                opacity: 0.9;
+            }
 
-                .hidden {
-                    display: none;
-                }
+            .hidden {
+                display: none;
+            }
 
-                input, .input {
-                    font-size: 14px;
-                    font-family: 'Product Sans', sans-serif;
-                    color: #3a3a3a;
-                    cursor: auto;
-                    width: 100%;
-                    padding: 5px;
-                    height: 30px;
-                    margin-bottom: 5px;
-                    margin-top: 2px;
-                    border: 1px solid lightgray;
-                    -webkit-transition: border-color 160ms;
-                    transition: border-color 160ms;
-                    border-radius: 5px;
-                }
+            input, .input {
+                font-size: 14px;
+                font-family: 'Product Sans', sans-serif;
+                color: #3a3a3a;
+                cursor: auto;
+                width: 100%;
+                padding: 5px;
+                height: 30px;
+                margin-bottom: 5px;
+                margin-top: 2px;
+                border: 1px solid lightgray;
+                -webkit-transition: border-color 160ms;
+                transition: border-color 160ms;
+                border-radius: 5px;
+            }
 
-                input:focus, .input:focus {
-                    outline: none;
-                    border-color: #777;
-                }
+            input:focus, .input:focus {
+                outline: none;
+                border-color: #777;
+            }
 
-                .braintree-hosted-fields-focused {
-                    border-color: #777;
-                }
+            .braintree-hosted-fields-focused {
+                border-color: #777;
+            }
 
-                .braintree-hosted-fields-invalid {
-                    border-color: tomato;
-                }
+            .braintree-hosted-fields-invalid {
+                border-color: tomato;
+            }
 
-                .braintree-hosted-fields-valid {
-                    border-color: limegreen;
-                }
+            .braintree-hosted-fields-valid {
+                border-color: limegreen;
+            }
 
-                .checkbox-grid {
-                    display: grid;
-                    grid-template-columns: 20px auto;
-                    align-items: center;
-                    grid-gap: 10px;
-                    grid-template-rows: 30px;
-                    margin-bottom: 5px;
-                }
+            .checkbox-grid {
+                display: grid;
+                grid-template-columns: 20px auto;
+                align-items: center;
+                grid-gap: 10px;
+                grid-template-rows: 30px;
+                margin-bottom: 5px;
+            }
 
-                #card-image {
-                    position: absolute;
-                    top: 3.1em;
-                    right: 1.7em;
-                    width: 44px;
-                    height: 28px;
-                    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/346994/card_sprite.png);
-                    background-size: 86px 458px;
-                    border-radius: 1px;
-                    background-position: -100px 0;
-                    background-repeat: no-repeat;
-                    margin-bottom: 1em;
-                }
+            #card-image {
+                position: absolute;
+                top: 3.1em;
+                right: 1.7em;
+                width: 44px;
+                height: 28px;
+                background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/346994/card_sprite.png);
+                background-size: 86px 458px;
+                border-radius: 1px;
+                background-position: -100px 0;
+                background-repeat: no-repeat;
+                margin-bottom: 1em;
+            }
 
-                #card-image.visa {
-                     background-position: 0 -398px;
-                }
+            #card-image.visa {
+                 background-position: 0 -398px;
+            }
 
-                #card-image.master-card {
-                     background-position: 0 -281px;
-                }
+            #card-image.master-card {
+                 background-position: 0 -281px;
+            }
 
-                #card-image.american-express {
-                     background-position: 0 -370px;
-                }
+            #card-image.american-express {
+                 background-position: 0 -370px;
+            }
 
-                #card-image.discover {
-                     background-position: 0 -163px;
-                }
+            #card-image.discover {
+                 background-position: 0 -163px;
+            }
 
-                #card-image.maestro {
-                     background-position: 0 -251px;
-                }
+            #card-image.maestro {
+                 background-position: 0 -251px;
+            }
 
-                #card-image.jcb {
-                     background-position: 0 -221px;
-                }
+            #card-image.jcb {
+                 background-position: 0 -221px;
+            }
 
-                #card-image.diners-club {
-                     background-position: 0 -133px;
-                }
+            #card-image.diners-club {
+                 background-position: 0 -133px;
+            }
 
-                #billing-info {
-                    height: 20px;
-                    margin: 0;
-                }
+            #billing-info {
+                height: 20px;
+                margin: 0;
+            }
 
-                label {
-                    padding: 2px;
-                    margin-bottom: 2px;
-                }
+            label {
+                padding: 2px;
+                margin-bottom: 2px;
+            }
 
-                #paypal-button-container {
-                    display: grid;
-                    grid-gap: 10px;
-                }
-            </style>
-        {% endblock %}
-    </head>
-    <body>
-    <div id="paypal-payment-container" class="ui segment loadable">
-        <div class="back-button-container">
-            <a href="{{ path('sylius_shop_order_show', {'tokenValue': order_token}) }}" class="back-button">
-                {{ 'sylius.pay_pal.back_to_store'|trans }}
-            </a>
+            #paypal-button-container {
+                display: grid;
+                grid-gap: 10px;
+                justify-items: center;
+            }
+        </style>
+    {% endblock %}
+<div id="paypal-payment-container" class="ui segment loadable">
+    <div class="container ui fluid">
+        <div id="tabs" class="ui top attached tabular menu">
+            <div class="active item" data-tab="paypal">PayPal</div>
+            <div class="item" data-tab="card">Card</div>
         </div>
-        <div class="container">
-            {% include '@SyliusShop/_flashes.html.twig' %}
-            <div class="header padding"><img draggable="false" id="sylius-logo" src="https://paypal.sylius.com/assets/img/logo.png" alt="logo"/></div>
-            <div id="tabs" class="ui top attached tabular menu">
-                <div class="active item" data-tab="paypal">PayPal</div>
-                <div class="item" data-tab="card">Card</div>
+        <div class="ui bottom attached active tab segment" data-tab="paypal">
+            <div class="button-container padding">
+                <div id="paypal-button-container"></div>
             </div>
-            <div class="ui bottom attached active tab segment" data-tab="paypal">
-                <div class="button-container padding">
-                    <div id="paypal-button-container"></div>
-                </div>
-            </div>
-            <div class="ui bottom attached tab segment" data-tab="card">
-                <div class="button-container padding">
-                    <div id="advanced-cards-container"></div>
-                    <form id="advanced-cards-form">
-                        <label for="card-number">{{ 'sylius.pay_pal.credit_card_number'|trans }}</label>
-                        <div id="card-number" class="input"><div id="card-image"></div></div>
-                        <label for="expiration-date">{{ 'sylius.pay_pal.expiration_date'|trans }}</label>
-                        <div id="expiration-date" class="input"></div>
-                        <label for="cvv">{{ 'sylius.pay_pal.cvv'|trans }}</label>
-                        <div id="cvv" class="input"></div>
-                        <label for='card-holder-name'>{{ 'sylius.form.credit_card.cardholder_name'|trans }}</label>
-                        <br/><input type='text' id='card-holder-name' name='card-holder-name' autocomplete='off' placeholder='{{ 'sylius.form.credit_card.cardholder_name'|trans }}' value="{{ billing_address.fullName }}"/>
-                        <div class="checkbox-grid">
-                            <input type="checkbox" id="billing-info" checked />
-                            <label for="billing-info">{{ 'sylius.pay_pal.billing_info'|trans }}</label>
-                        </div>
-                        <div id="billing-container" class="hidden">
-                            <br/><label for='card-billing-address-street'>{{ 'sylius.ui.billing_address'|trans }}</label>
-                            <br/><input type='text' id='card-billing-address-street' name='card-billing-address-street' autocomplete='off' placeholder='{{ 'sylius.ui.street'|trans }}' value="{{ billing_address.street }}"/>
-                            <input type='text' id='card-billing-address-city' name='card-billing-address-city' autocomplete='off' placeholder='{{ 'sylius.ui.city'|trans }}' value="{{ billing_address.city }}"/>
-                            <input type='text' id='card-billing-address-state' name='card-billing-address-state' autocomplete='off' placeholder='{{ 'sylius.ui.state'|trans }}' value="{{ billing_address.provinceName }}"/>
-                            <input type='text' id='card-billing-address-zip' name='card-billing-address-zip' autocomplete='off' placeholder='{{ 'sylius.ui.postcode'|trans }}' value="{{ billing_address.postcode }}"/>
-                            <input type='text' id='card-billing-address-country' name='card-billing-address-country' autocomplete='off' placeholder='{{ 'sylius.ui.country'|trans }}' value="{{ billing_address.countryCode }}" />
-                        </div>
-                        <button value="submit" id="submit" class="ui button yellow fluid">{{ 'sylius.pay_pal.pay_with_card'|trans }}</button>
-                    </form>
+        </div>
+        <div class="ui bottom attached tab segment" data-tab="card">
+            <div class="button-container padding">
+                <div id="advanced-cards-container">
+                    <label for="card-number">{{ 'sylius.pay_pal.credit_card_number'|trans }}</label>
+                    <div id="card-number" class="input"><div id="card-image"></div></div>
+                    <label for="expiration-date">{{ 'sylius.pay_pal.expiration_date'|trans }}</label>
+                    <div id="expiration-date" class="input"></div>
+                    <label for="cvv">{{ 'sylius.pay_pal.cvv'|trans }}</label>
+                    <div id="cvv" class="input"></div>
+                    <label for='card-holder-name'>{{ 'sylius.form.credit_card.cardholder_name'|trans }}</label>
+                    <br/><input type='text' id='card-holder-name' name='card-holder-name' autocomplete='off' placeholder='{{ 'sylius.form.credit_card.cardholder_name'|trans }}' value="{{ billing_address.fullName }}"/>
+                    <div class="checkbox-grid">
+                        <input type="checkbox" id="billing-info" checked />
+                        <label for="billing-info">{{ 'sylius.pay_pal.billing_info'|trans }}</label>
+                    </div>
+                    <div id="billing-container" class="hidden">
+                        <br/><label for='card-billing-address-street'>{{ 'sylius.ui.billing_address'|trans }}</label>
+                        <br/><input type='text' id='card-billing-address-street' name='card-billing-address-street' autocomplete='off' placeholder='{{ 'sylius.ui.street'|trans }}' value="{{ billing_address.street }}"/>
+                        <input type='text' id='card-billing-address-city' name='card-billing-address-city' autocomplete='off' placeholder='{{ 'sylius.ui.city'|trans }}' value="{{ billing_address.city }}"/>
+                        <input type='text' id='card-billing-address-state' name='card-billing-address-state' autocomplete='off' placeholder='{{ 'sylius.ui.state'|trans }}' value="{{ billing_address.provinceName }}"/>
+                        <input type='text' id='card-billing-address-zip' name='card-billing-address-zip' autocomplete='off' placeholder='{{ 'sylius.ui.postcode'|trans }}' value="{{ billing_address.postcode }}"/>
+                        <input type='text' id='card-billing-address-country' name='card-billing-address-country' autocomplete='off' placeholder='{{ 'sylius.ui.country'|trans }}' value="{{ billing_address.countryCode }}" />
+                    </div>
+                    <button id="submit-card" class="ui button yellow fluid">{{ 'sylius.pay_pal.pay_with_card'|trans }}</button>
                 </div>
             </div>
         </div>
     </div>
-    </body>
-    {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
-    <script src="https://www.paypal.com/sdk/js?components=hosted-fields,buttons,funding-eligibility&locale={{ locale }}&currency={{ currency }}&vault=false&client-id={{ client_id }}&merchant-id={{ merchant_id }}&intent=capture" data-partner-attribution-id="{{ partner_attribution_id }}" data-enable-3ds data-client-token="{{ client_token }}"></script>
-    <script>
-        let createPayPalOrderUrl = "{{ path('sylius_paypal_plugin_create_paypal_order', {'token': order_token}) }}";
-        let completePayPalOrderUrl = "{{ path('sylius_paypal_plugin_complete_paypal_order', {'token': order_token }) }}"
-        let errorPayPalPaymentUrl = "{{ path('sylius_paypal_plugin_payment_error') }}";
-        let availableCountries = {{ available_countries|json_encode|raw }};
-        let cancelPayPalPaymentUrl = "{{ path('sylius_paypal_plugin_cancel_checkout_payment') }}";
-        let updatePayPalOrderUrl = "{{ path('sylius_paypal_plugin_update_paypal_order') }}";
-        let validForm = false;
-        let invalidFormMessage = "{{ 'sylius.pay_pal.invalid_form'|trans }}";
-
-        paypal.Buttons({
-            locale: '{{ locale }}',
-            style: { label: 'pay' },
+</div>
+{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
+<script src="https://www.paypal.com/sdk/js?components=hosted-fields,buttons,funding-eligibility&locale={{ locale }}&currency={{ currency }}&vault=false&client-id={{ client_id }}&merchant-id={{ merchant_id }}&intent=capture" data-partner-attribution-id="{{ partner_attribution_id }}" data-enable-3ds data-client-token="{{ client_token }}"></script>
+<script>
+    let createPayPalOrderUrl = "{{ path('sylius_paypal_plugin_create_paypal_order_from_payment_page', { 'id': order_id }) }}";
+    let completePayPalOrderUrl = "{{ path('sylius_paypal_plugin_complete_paypal_order') }}"
+    let errorPayPalPaymentUrl = "{{ path('sylius_paypal_plugin_payment_error') }}";
+    let availableCountries = {{ available_countries|json_encode|raw }};
+    let cancelPayPalPaymentUrl = "{{ path('sylius_paypal_plugin_cancel_payment') }}";
+    let updatePayPalOrderUrl = "{{ path('sylius_paypal_plugin_update_paypal_order') }}";
+    let validForm = false;
+    let invalidFormMessage = "{{ 'sylius.pay_pal.invalid_form'|trans }}";
+
+    paypal.Buttons({
+        locale: '{{ locale }}',
+        style: { label: 'pay' },
+        createOrder: function(data, actions) {
+            return fetch(createPayPalOrderUrl, {
+                method: 'post'
+            }).then(res => {
+                document.querySelector('#paypal-payment-container').classList.add('loading');
+                document.querySelector('#paypal-button-container').classList.add('low-opacity');
+                return res.json();
+            }).then(data => data.order_id);
+        },
+        onApprove: function(data, actions) {
+            return fetch(completePayPalOrderUrl+'?id='+data.orderID, {
+                method: 'post'
+            }).then(res => res.json()).then(details => window.location.href = details.return_url);
+        },
+        onError: function (err) {
+            return fetch(errorPayPalPaymentUrl, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(err)
+            }).then(() => {setTimeout(window.location.reload, 300)});
+        },
+        onShippingChange: function(data, actions) {
+            if (!availableCountries.filter(country => country === data.shipping_address.country_code).length) {
+                return actions.reject();
+            }
+
+            return fetch(updatePayPalOrderUrl, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(data)
+            }).then(res => {
+                if (!res || res.error) {
+                    return actions.reject();
+                }
+
+                return actions.resolve();
+            });
+        },
+        onCancel: function (data, actions) {
+            return fetch(cancelPayPalPaymentUrl, {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ payPalOrderId: data.orderID })
+            }).then(window.location.reload());
+        }
+    }).render('#paypal-button-container');
+
+    paypal.getFundingSources().forEach(function(fundingSource) {
+        var button = paypal.Buttons({
+            fundingSource: fundingSource,
             createOrder: function(data, actions) {
                 return fetch(createPayPalOrderUrl, {
                     method: 'post'
@@ -249,7 +250,7 @@
                     document.querySelector('#paypal-payment-container').classList.add('loading');
                     document.querySelector('#paypal-button-container').classList.add('low-opacity');
                     return res.json();
-                }).then(data => data.orderID);
+                }).then(data => data.order_id);
             },
             onApprove: function(data, actions) {
                 return fetch(completePayPalOrderUrl, {
@@ -263,23 +264,6 @@
                     body: error
                 }).then(window.location.reload());
             },
-            onShippingChange: function(data, actions) {
-                if (!availableCountries.filter(country => country === data.shipping_address.country_code).length) {
-                    return actions.reject();
-                }
-
-                return fetch(updatePayPalOrderUrl, {
-                    method: 'post',
-                    headers: { 'content-type': 'application/json' },
-                    body: JSON.stringify(data)
-                }).then(res => {
-                    if (!res || res.error) {
-                        return actions.reject();
-                    }
-
-                    return actions.resolve();
-                });
-            },
             onCancel: function (data, actions) {
                 return fetch(cancelPayPalPaymentUrl, {
                     method: 'post',
@@ -287,176 +271,141 @@
                     body: JSON.stringify({ payPalOrderId: data.orderID })
                 }).then(window.location.reload());
             }
-        }).render('#paypal-button-container');
-
-        //once we add onshippingchange button doesnt render anymore
-        paypal.getFundingSources().forEach(function(fundingSource) {
-            var button = paypal.Buttons({
-                fundingSource: fundingSource,
-                createOrder: function(data, actions) {
-                    return fetch(createPayPalOrderUrl, {
-                        method: 'post'
-                    }).then(res => {
-                        document.querySelector('#paypal-payment-container').classList.add('loading');
-                        document.querySelector('#paypal-button-container').classList.add('low-opacity');
-                        return res.json();
-                    }).then(data => data.orderID);
-                },
-                onApprove: function(data, actions) {
-                    return fetch(completePayPalOrderUrl, {
-                        method: 'post'
-                    }).then(res => res.json()).then(details => window.location.href = details.return_url);
-                },
-                onError: function (err) {
-                    return fetch(errorPayPalPaymentUrl, {
-                        method: 'post',
-                        headers: { 'content-type': 'application/json' },
-                        body: JSON.stringify(err)
-                    }).then(window.location.reload());
-                },
-                onCancel: function (data, actions) {
-                    return fetch(cancelPayPalPaymentUrl, {
-                        method: 'post',
-                        headers: { 'content-type': 'application/json' },
-                        body: JSON.stringify({ payPalOrderId: data.orderID })
-                    }).then(window.location.reload());
-                }
-            });
-
-            if (button.isEligible() && fundingSource != 'paypal' && fundingSource != 'card') {
-                button.render('#paypal-button-container');
-            }
         });
 
-        if (paypal.HostedFields.isEligible() === true) {
-            paypal.HostedFields.render({
-                createOrder: function(data, actions) {
-                    document.querySelector('#paypal-payment-container').classList.add('loading');
-                    document.querySelector('#paypal-button-container').classList.add('low-opacity');
+        if (button.isEligible() && fundingSource != 'paypal' && fundingSource != 'card') {
+            button.render('#paypal-button-container');
+        }
+    });
 
-                    return fetch(createPayPalOrderUrl, {
-                        method: 'POST'
-                    }).then(function(res) {
-                        return res.json();
-                    }).then(function(data) {
-                        return data.orderID;
-                    });
+    if (paypal.HostedFields.isEligible() === true) {
+        paypal.HostedFields.render({
+            createOrder: function(data, actions) {
+                document.querySelector('#paypal-payment-container').classList.add('loading');
+                document.querySelector('#paypal-button-container').classList.add('low-opacity');
+
+                return fetch(createPayPalOrderUrl, {
+                    method: 'POST'
+                }).then(function(res) {
+                    return res.json();
+                }).then(function(data) {
+                    return data.order_id;
+                });
+            },
+            styles: {
+                'input': {
+                    'font-size': '14px',
+                    'font-family': 'Product Sans',
+                    'color': '#3a3a3a',
                 },
-                styles: {
-                    'input': {
-                        'font-size': '14px',
-                        'font-family': 'Product Sans',
-                        'color': '#3a3a3a',
-                    },
-                    ':focus': {
-                        'color': '#000'
-                    }
+                ':focus': {
+                    'color': '#000'
+                }
+            },
+            fields: {
+                number: {
+                    selector: '#card-number',
+                    placeholder: '{{ 'sylius.pay_pal.credit_card_number'|trans }}',
+                    required: 'required',
                 },
-                fields: {
-                    number: {
-                        selector: '#card-number',
-                        placeholder: '{{ 'sylius.pay_pal.credit_card_number'|trans }}',
-                        required: 'required',
-                    },
-                    cvv: {
-                        selector: '#cvv',
-                        placeholder: '123',
-                        required: 'required',
-                    },
-                    expirationDate: {
-                        selector: '#expiration-date',
-                        placeholder: 'MM/YYYY',
-                        required: 'required',
-                    }
+                cvv: {
+                    selector: '#cvv',
+                    placeholder: '123',
+                    required: 'required',
+                },
+                expirationDate: {
+                    selector: '#expiration-date',
+                    placeholder: 'MM/YYYY',
+                    required: 'required',
                 }
-            }).then(hostedFields => {
-                hostedFields.on('validityChange', function (event) {
-                    let field = event.fields[event.emittedBy];
-
-                    if (field.isValid) {
-                        field.container.classList.remove('invalid-field');
-                    } else if (field.isPotentiallyValid) {
-                        field.container.classList.add('invalid-field');
-                    } else {
-                        field.container.classList.add('invalid-field');
-                    }
-                });
+            }
+        }).then(hostedFields => {
+            hostedFields.on('validityChange', function (event) {
+                let field = event.fields[event.emittedBy];
+
+                if (field.isValid) {
+                    field.container.classList.remove('invalid-field');
+                } else if (field.isPotentiallyValid) {
+                    field.container.classList.add('invalid-field');
+                } else {
+                    field.container.classList.add('invalid-field');
+                }
+            });
 
-                hostedFields.on('cardTypeChange', function (event) {
-                    if (event.cards.length === 1) {
-                        document.querySelector('#advanced-cards-form').classList = [];
-                        document.querySelector('#advanced-cards-form').classList.add(event.cards[0].type);
-                        document.querySelector('#card-image').classList = [];
-                        document.querySelector('#card-image').classList.add(event.cards[0].type);
-                        // Change the CVV length for AmericanExpress cards
-                        if (event.cards[0].code.size === 4) {
-                            hostedFieldsInstance.setAttribute({
-                                field: 'cvv',
-                                attribute: 'placeholder',
-                                value: '1234'
-                            });
-                        }
-                    } else {
-                        hostedFields.setAttribute({
+            hostedFields.on('cardTypeChange', function (event) {
+                if (event.cards.length === 1) {
+                    document.querySelector('#advanced-cards-container').classList = [];
+                    document.querySelector('#advanced-cards-container').classList.add(event.cards[0].type);
+                    document.querySelector('#card-image').classList = [];
+                    document.querySelector('#card-image').classList.add(event.cards[0].type);
+                    // Change the CVV length for AmericanExpress cards
+                    if (event.cards[0].code.size === 4) {
+                        hostedFieldsInstance.setAttribute({
                             field: 'cvv',
                             attribute: 'placeholder',
-                            value: '123'
+                            value: '1234'
                         });
-                        document.querySelector('#card-image').classList = [];
-                        document.querySelector('#advanced-cards-form').classList = [];
                     }
-                });
+                } else {
+                    hostedFields.setAttribute({
+                        field: 'cvv',
+                        attribute: 'placeholder',
+                        value: '123'
+                    });
+                    document.querySelector('#card-image').classList = [];
+                    document.querySelector('#advanced-cards-container').classList = [];
+                }
+            });
 
-                document.querySelector('#advanced-cards-form').addEventListener('submit', event => {
-                    event.preventDefault();
+            document.querySelector('#submit-card').addEventListener('click', event => {
+                event.preventDefault();
 
-                    let state = hostedFields.getState();
-                    let formValid = Object.keys(state.fields).every(function (key) {
-                        if (!state.fields[key].isValid) state.fields[key].container.classList.add('invalid-field');
-                        else state.fields[key].container.classList.remove('invalid-field')
-                        return state.fields[key].isValid;
-                    });
+                let state = hostedFields.getState();
+                let formValid = Object.keys(state.fields).every(function (key) {
+                    if (!state.fields[key].isValid) state.fields[key].container.classList.add('invalid-field');
+                    else state.fields[key].container.classList.remove('invalid-field')
+                    return state.fields[key].isValid;
+                });
 
-                    if (formValid) {
-                        hostedFields.submit({
-                            cardholderName: document.getElementById('card-holder-name').value,
-                            billingAddress: {
-                                streetAddress: document.getElementById('card-billing-address-street').value,
-                                region: document.getElementById('card-billing-address-state').value,
-                                locality: document.getElementById('card-billing-address-city').value,
-                                postalCode: document.getElementById('card-billing-address-zip').value,
-                                countryCodeAlpha2: document.getElementById('card-billing-address-country').value
+                if (formValid) {
+                    hostedFields.submit({
+                        cardholderName: document.getElementById('card-holder-name').value,
+                        billingAddress: {
+                            streetAddress: document.getElementById('card-billing-address-street').value,
+                            region: document.getElementById('card-billing-address-state').value,
+                            locality: document.getElementById('card-billing-address-city').value,
+                            postalCode: document.getElementById('card-billing-address-zip').value,
+                            countryCodeAlpha2: document.getElementById('card-billing-address-country').value
+                        }
+                    }).then(payload => {
+                        return fetch(completePayPalOrderUrl, {
+                            method: 'post'
+                        }).then(function(res) {
+                            return res.json();
+                        }).then(function(data) {
+                            if (data.status == 'processing') {
+                                return fetch(cancelPayPalPaymentUrl, {
+                                    method: 'post',
+                                    headers: { 'content-type': 'application/json' },
+                                    body: JSON.stringify({ payPalOrderId: data.orderID })
+                                }).then(window.location.reload());
                             }
-                        }).then(payload => {
-                            return fetch(completePayPalOrderUrl, {
-                                method: 'post'
-                            }).then(function(res) {
-                                return res.json();
-                            }).then(function(data) {
-                                if (data.status == 'processing') {
-                                    return fetch(cancelPayPalPaymentUrl, {
-                                        method: 'post',
-                                        headers: { 'content-type': 'application/json' },
-                                        body: JSON.stringify({ payPalOrderId: data.orderID })
-                                    }).then(window.location.reload());
-                                }
-
-                                window.location.href = data.return_url;
-                            });
+
+                            window.location.href = data.return_url;
                         });
-                    } else {
-                        alert(invalidFormMessage);
-                    }
-                });
-            });
-        }
+                    });
+                } else {
+                    alert(invalidFormMessage);
+                }
+            })
+        });
+    }
 
-        document.querySelector('#billing-info').addEventListener('change', e => {
-            document.querySelector('#billing-container').classList.toggle('hidden');
-        })
+    document.querySelector('#billing-info').addEventListener('change', e => {
+        document.querySelector('#billing-container').classList.toggle('hidden');
+    })
 
-        $(document).ready(function() {
-            $('#tabs').tab()
-        });
-    </script>
-</html>
+    $(document).ready(function() {
+        $('#tabs').tab()
+    });
+</script>