Announcement

Collapse
No announcement yet.

PayPal "Buy now pay later" BNPL Swift V2

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PayPal "Buy now pay later" BNPL Swift V2

    Having a lot of issues implementing BNPL in Swift V2 in SD 18.2 - There are significant omissions in the KB articles giving instructions:

    Code:
    https://community.sellerdeck.com/forum/knowledge-base/payment-service-providers/554374-enabling-paypal-buy-now-pay-later-messages
    https://community.sellerdeck.com/forum/knowledge-base/payment-service-providers/555324-paypal%E2%80%99s-buy-now-pay-later-styling-and-configuration-part-1
    https://community.sellerdeck.com/forum/knowledge-base/payment-service-providers/555335-paypal%E2%80%99s-buy-now-pay-later-styling-and-configuration-part-2
    And here:
    Please Note: To use 'Buy Now Pay Later' you will first need to apply for it, see: https://www.paypal.com/uk/webapps/mpp/paypal-virtual-credit
    1. Although it is included in the 18.2 blog there could do with being a reminder to upgrade to the new widget extension (https://www.sellerdeck.co.uk/2022/06...sktop-v18-2-0/)

    2. There is no mention/reminder to check the new checkbox in the PayPal dialogue box in Payments and Security

    3. KB #555335 says to add the BNPL banners in the ‘Checkout Shopping Cart Grid’ layout directly below the ‘checkout’ table element. However Swift does not use the ‘Checkout Shopping Cart Grid’ in the Checkout, it uses the ‘Small Checkout Shopping Cart Grid’ and there are NO instructions about placement of the two BNPL layouts in Swift v2, just this image in the KB:

    Click image for larger version  Name:	kb-image.png Views:	0 Size:	80.8 KB ID:	555390

    3 [Continued]. Do you put the BNPL banners in the 'Checkout 2' layout below the 'Payment Phase' layout or do you put the BNPOL banners at the end of the ‘Small Checkout Shopping Cart Grid’ ?

    4. Indeed, do the two BNPL laypouts go at the bottom or top of every checkout page?

    Click image for larger version

Name:	two-bnpl-layouts-checkout.jpg
Views:	192
Size:	6.1 KB
ID:	555391

    5. Is there a clear and comprehensive instruction KB from Start to Finish covering 18.2 Desktop and 18.2 Swift.?

    To quote other forum contributors -
    "Has anyone made this work?"
    Thank you!
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    #2
    Swift template could work a bit differently.
    Say SD Support

    So why not covered in the KB articles?
    say I...
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

    Comment


      #3
      If in Swift I add
      Code:
      <actinic:variable name="BuyNowPayLater" value="Buy Now Pay Later Cart/Checkout Message" />            
      <actinic:variable name="BuyNowPayLater" value="Buy Now Pay Later Cart/Checkout Code" />
      to the Total Row of the
      Code:
      <actinic:variable name="ShoppingCartGrid" value="Small Checkout Shopping Cart Grid Swift" />
      and publish to a test site you will see from the attached image that the code is present but the javascript is not executing.

      Cart
      Code:
      <div id="cartMessage"><div id="pp-pay-later-message" class="pp-pay-later-message" data-pp-amount="155.75" data-pp-message="" data-pp-style-layout="flex" data-pp-style-ratio="20x1" data-pp-style-color="white"></div></div>
      Checkout
      Code:
      <div id="cartMessage"><div id="pp-pay-later-message" class="pp-pay-later-message" data-pp-amount="155.75" data-pp-message="" data-pp-style-layout="flex" data-pp-style-ratio="20x1" data-pp-style-color="white"></div></div>
      Click image for larger version  Name:	code-present-no-executionv2.jpg Views:	2 Size:	278.1 KB ID:	555395

      Any thoughts anyone?

      This is the code in the Javascript Header Functions:

      Code:
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e%20AND%20%28%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27%20OR%0d%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%29" >
      <script>g_PayPalPayLater=<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e" >true</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%20%3d%3d%20false" >false</actinic:block></script>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Shopping%20Cart%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%200%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%202%27" >
      <script src="https://www.paypal.com/sdk/js?components=messages&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20&currency=<actinic:variable name="DefaultIntCurrencySymbol" />" data-partner-attribution-id="<actinic:variable name="PayPalPartnerId" />""></script>
      </actinic:block>
      <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >
      <Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
      <script src="https://www.paypal.com/sdk/js?components=buttons<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCardsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >,hosted-fields</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e">,messages&enable-funding=paylater</actinic:block>&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27" >&commit=false</actinic:block>" data-partner-attribution-id="<actinic:variable name="PayPalPartnerId" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCardsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >data-client-token="your-client-token"</actinic:block>></script>
      </Actinic:PAYPALSDKLIBRARY>
      </actinic:block>
      </actinic:block>
      
      <script type="text/javascript">
      /***********************************************************************
      *
      * polyFillsLoaded - called when the Poly Fill JS bundle has loaded
      * Note the defer attribute so that it only runs after the page is loaded
      * PolyFills are required to support Fetch and promises in IE11
      *
      ************************************************************************/
      
      function polyFillsLoaded()
      {
      //
      // Now okay to do anything that depends on fetch
      //
      $(".usesFetch").show();
      }
      </script>
      <!-- Load polyfills with defer attribute so that it loads after the page is loaded -->
      <script defer crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=polyFillsLoaded&features=fetch%2CPromise"></script>
      
      <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e%20AND%20%28%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27%29">
      <Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
      <script src="https://www.paypal.com/sdk/js?components=buttons&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27">&commit=false</actinic:block>" data-client-token="your-client-token"></script>
      </Actinic:PAYPALSDKLIBRARY>
      </actinic:block>
      <script type="text/javascript">
      /***********************************************************************
      *
      * polyFillsLoaded - called when the Poly Fill JS bundle has loaded
      * Note the defer attribute so that it only runs after the page is loaded
      * PolyFills are required to support Fetch and promises in IE11
      *
      ************************************************************************/
      
      function polyFillsLoaded()
      {
      //
      // Now okay to do anything that depends on fetch
      //
      $(".usesFetch").show();
      }
      </script>
      <!-- Load polyfills with defer attribute so that it loads after the page is loaded -->
      <script defer crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=polyFillsLoaded&features=fetch,Promise"></script>
      See the expression data-client-token="your-client-token">
      "your-client-token" gets changed to an actual line of data on upload

      Thank you

      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


        #4
        An URL would help.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          Thank you Norman - I am checking with the site owner. Best wishes.
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


            #6
            Ste owner is happy to share: https://www.devotedly-discus.co.uk/jctry/
            Jonathan Chappell
            Website Designer
            SellerDeck Website Designer
            Actinic to SellerDeck upgrades
            Graphicz Limited - www.graphicz.co.uk

            Comment


              #7
              Checkout show this JavaScript error:

              jquery-3.3.1.min.js:2 Uncaught TypeError: paypal.Messages is not a function
              at RenderPayPalPayLaterMessages (actinicextras.js?DAYNO=WGDB:4286:4)

              So it looks like whatever code loads the paypal.Messages function is not executed before paypal.Messages called.
              Norman - www.drillpine.biz
              Edinburgh, U K / Bitez, Turkey

              Comment


                #8
                Thank you Norman - I checked Sellerdeck.min.js and 'PayPalPayLaterMessages' was absent, so I deleted Sellerdeck.min.js and recompressed the javascript. Something else worth mentioning in the KB?

                However with the revised Sellerdeck.min.js (containing instances of 'PayPalPayLaterMessages') and I still get the Console Errors on Checkout 02 thus:

                Click image for larger version

Name:	ppmessagesconsolewarning.jpg
Views:	192
Size:	55.8 KB
ID:	555402

                I searched the library in Sellerdeck and 'paypal.Messages' is not found.

                Javascript Header functions contains the PayPal code:

                Click image for larger version

Name:	ppjhf.jpg
Views:	170
Size:	201.7 KB
ID:	555403

                Code:
                <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e%20AND%20%28%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27%20OR%0d%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%29" >
                <script>g_PayPalPayLater=<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e" >true</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%20%3d%3d%20false" >false</actinic:block></script>
                <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Shopping%20Cart%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%200%27%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%27Checkout%20Page%202%27" >
                <script src="https://www.paypal.com/sdk/js?components=messages&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20&currency=<actinic:variable name="DefaultIntCurrencySymbol" />" data-partner-attribution-id="<actinic:variable name="PayPalPartnerId" />""></script>
                </actinic:block>
                <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >
                <Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
                <script src="https://www.paypal.com/sdk/js?components=buttons<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCardsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >,hosted-fields</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalBuyNowPayLaterEnabled%22%20%2f%3e">,messages&enable-funding=paylater</actinic:block>&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27" >&commit=false</actinic:block>" data-partner-attribution-id="<actinic:variable name="PayPalPartnerId" />" <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCardsEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27" >data-client-token="your-client-token"</actinic:block>></script>
                </Actinic:PAYPALSDKLIBRARY>
                </actinic:block>
                </actinic:block>
                
                <script type="text/javascript">
                /***********************************************************************
                *
                * polyFillsLoaded - called when the Poly Fill JS bundle has loaded
                * Note the defer attribute so that it only runs after the page is loaded
                * PolyFills are required to support Fetch and promises in IE11
                *
                ************************************************************************/
                
                function polyFillsLoaded()
                {
                //
                // Now okay to do anything that depends on fetch
                //
                $(".usesFetch").show();
                }
                </script>
                <!-- Load polyfills with defer attribute so that it loads after the page is loaded -->
                <script defer crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=polyFillsLoaded&features=fetch%2CPromise"></script>
                
                <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPayPalCheckoutEnabled%22%20%2f%3e%20AND%20%28%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%202%27%29" >
                <Actinic:PAYPALSDKLIBRARY PAGETYPE="<actinic:variable name="PageType" />">
                <script src="https://www.paypal.com/sdk/js?components=buttons&client-id=<actinic:variable name="PayPalCheckoutClientKey" />&integration-date=2020-02-20<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Shopping%20Cart%27%20OR%0d%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%27Checkout%20Page%200%27">&commit=false</actinic:block>" data-client-token="your-client-token"></script>
                </Actinic:PAYPALSDKLIBRARY>
                </actinic:block>
                <script type="text/javascript">
                /***********************************************************************
                *
                * polyFillsLoaded - called when the Poly Fill JS bundle has loaded
                * Note the defer attribute so that it only runs after the page is loaded
                * PolyFills are required to support Fetch and promises in IE11
                *
                ************************************************************************/
                
                function polyFillsLoaded()
                {
                //
                // Now okay to do anything that depends on fetch
                //
                $(".usesFetch").show();
                }
                </script>
                <!-- Load polyfills with defer attribute so that it loads after the page is loaded -->
                <script defer crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&callback=polyFillsLoaded&features=fetch,Promise"></script>
                At a bit of a loss really! Thank you...
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment


                  #9
                  Bingo! - I had missed the following from https://community.sellerdeck.com/for...later-messages as it looked so similar to the code added by the Upgrader that I overlooked the subtle differences - my bad:

                  Click image for larger version

Name:	whoopsii.jpg
Views:	166
Size:	90.6 KB
ID:	555406

                  All now displaying correctly, thank you again Norman for being the key to the puzzle.
                  Attached Files
                  Jonathan Chappell
                  Website Designer
                  SellerDeck Website Designer
                  Actinic to SellerDeck upgrades
                  Graphicz Limited - www.graphicz.co.uk

                  Comment


                    #10
                    Here are the differences:

                    Click image for larger version

Name:	whoopsiv.jpg
Views:	167
Size:	62.5 KB
ID:	555408
                    Jonathan Chappell
                    Website Designer
                    SellerDeck Website Designer
                    Actinic to SellerDeck upgrades
                    Graphicz Limited - www.graphicz.co.uk

                    Comment


                      #11
                      Sellerdeck quotes https://www.laddersandscaffoldtowers.co.uk/ as an example of BNPL working although it is not a Swift site.

                      They have the PayPal BNBPL appearing as a choice in the payment options - how is this done?

                      Click image for larger version

Name:	asapaymentoption.jpg
Views:	178
Size:	47.3 KB
ID:	555414

                      Click image for larger version

Name:	asapaymentoptionii.jpg
Views:	153
Size:	42.8 KB
ID:	555415
                      Jonathan Chappell
                      Website Designer
                      SellerDeck Website Designer
                      Actinic to SellerDeck upgrades
                      Graphicz Limited - www.graphicz.co.uk

                      Comment


                        #12
                        Actually looks like that is just some fancy styling as checking out with Pay in Three is the same as checking out regularly with PayPal as the choice is made after logging into PayPal:

                        Click image for larger version

Name:	ppcheckout.jpg
Views:	175
Size:	48.5 KB
ID:	555418
                        Jonathan Chappell
                        Website Designer
                        SellerDeck Website Designer
                        Actinic to SellerDeck upgrades
                        Graphicz Limited - www.graphicz.co.uk

                        Comment


                          #13
                          Gary has now published a KB article on v18.2:

                          https://community.sellerdeck.com/for...18-2-0-onwards
                          Jonathan Chappell
                          Website Designer
                          SellerDeck Website Designer
                          Actinic to SellerDeck upgrades
                          Graphicz Limited - www.graphicz.co.uk

                          Comment

                          Working...
                          X