It seems One Page Checkout plugin breaks PayPal Express Checkout plugin

Hello,

I installed the One Page Checkout and PayPal Express Checkout plugins.  It appears the click event is not working when I click on Pay with PayPal button.  The click event is defined here: \Presentation\Nop.Web\Plugins\Payments.PayPalExpressCheckout\Views\PaymentInfo.cshtml and looks like this...

<script asp-location="Footer">
  $(document).ready(function() {
    $('#payPalExpressCheckoutImage').click(function () {
      //terms of service
      if ($('#termsofservice').length > 0) {  // It never passes this test so it never reaches the paypal url.
        //terms of service element exists
        if (!$('#termsofservice').is(':checked')) {
          $("#terms-of-service-warning-box").dialog();
        } else {
          setLocation('@Url.RouteUrl("Plugin.Payments.PayPalExpressCheckout.SubmitButton")');  // We never reach this code.
        }
      }
    });
  });
</script>

For now, I disabled One Page Checkout so the PayPal button executes as expected, but I would rather use One Page Checkout if possible.  Does anyone have a fix to this?

What version are you using ?

Hi,

I am using nopCommerce 4.20.  Both PayPal Express Checkout and One Page Checkout plugins are for 4.20.

Whose one-page checkout plugin are you using?

Hello,

I'm using the following plugins:

SevenSpikes.Nop.Plugins.RealOnePageCheckout:

{
  "Group": "7Spikes",
  "FriendlyName": "Nop One Page Checkout",
  "SystemName": "SevenSpikes.Nop.Plugins.RealOnePageCheckout",
  "Version": "4.2",
  "SupportedVersions": [ "4.20" ],
  "DependsOnSystemNames": [ "SevenSpikes.Core" ],
  "Author": "Seven Spikes Ltd",
  "DisplayOrder": 1,
  "FileName": "SevenSpikes.Nop.Plugins.RealOnePageCheckout.dll",
  "Description": "This plugin makes checkout much more simple and straightforward compared to the default checkout in nopCommerce. The reason – the whole checkout process happens on a single page."
}

and

Payments.PayPalExpressCheckout:

{
  "Group": "Payment methods",
  "FriendlyName": "PayPal Express Checkout",
  "SystemName": "Payments.PayPalExpressCheckout",
  "Version": "1.33",
  "SupportedVersions": [ "4.20" ],
  "Author": "nopCommerce team",
  "DisplayOrder": 1,
  "FileName": "Nop.Plugin.Payments.PayPalExpressCheckout.dll",
  "Description": "This plugin allows paying with PayPal Express Checkout"
}

Also would like to mention, I'm using the "Native" theme purchased at the nopCommerce marketplace.

Native Theme:

{
  "SystemName": "Native",
  "FriendlyName": "Native",
  "SupportRTL": true,
  "PreviewImageUrl": "~/Themes/Native/preview.jpg",
  "PreviewText": "The 'Native' site theme"
}

Did you check console error? If not, then open OPC, press F12, click console tab and check any javascript error is there or not.

I addressed this problem by entering the following code in \Presentation\Nop.Web\Plugins\SevenSpikes.Nop.Plugins.RealOnePageCheckout\Views\RealOnePageCheckout\RealOnePageCheckout.cshtml right above

<div class="buttons complete-button">

<div id="terms-of-service-warning-box" title="@T("Checkout.TermsOfService")" style="display:none;">
  <p>@T("Checkout.TermsOfService.PleaseAccept")</p>
</div>

Then in Plugins\Nop.Plugin.Payments.PayPalExpressCheckout\Views\PaymentInfo.cshtml I had to change the click handler to the following:

<script asp-location="Footer">
  $(document).ready(function() {
    $('#payPalExpressCheckoutImage').click(function() {
    //terms of service...
    if ($('#terms-of-service').length > 0) {
      //terms of service element exists
      if (!$('#terms-of-service').is(':checked')) {
        $("#terms-of-service-warning-box").dialog();
      } else {
        setLocation('@Url.RouteUrl("Plugin.Payments.PayPalExpressCheckout.SubmitButton")');
      }
    }
  });
});
</script>