Change Payment Method button (Returning customer experience) with different total amount without page reloading issue

RomanKaliupin commented 2 years ago

General information

SDK version: 3.83.0
Environment: Sandbox
Browser and OS: Chrome 95.0.4638.69 on MacOS 11.6

Issue description

Is it possible to use the "Change Payment Method" button (Returning customer experience) in any way if the price of a product/cart can change without reloading the page? The link on this feature.

The problem is that the total amount parameter (dataAttributes.amount) must be specified to load the SDK. Loading PayPal SDK on the same page again (without page reloading) trigger the next errors in the console:

Examples of UI use-cases:

PayPal button on the product description page. Product variations have different prices and can be selected without reloading the page.
PayPal button on the checkout page. Buyer may change shipping address at checkout, so different shipping charges will apply. So, the amount passed into this param should be updated.

crookedneighbor commented 2 years ago

I have not been able to reproduce this issue so far. Can you provide a codepen or staging site that can reproduce the issue?

RomanKaliupin commented 2 years ago

Hi @crookedneighbor ,

Thank you for your response. Example attached.

test.html.zip

RomanKaliupin commented 2 years ago

But most valuable question is how to handle the case when for already rendered button we should change the total price? How to bypass dataAttributes.amount attribute?

crookedneighbor commented 2 years ago

I'm a little confused about what's happening in the example with the multiple button containers. I modified it a bit to illustrate how to reload the PayPal SDK with the new amount:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script src="https://js.braintreegateway.com/web/3.83.0/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.83.0/js/paypal-checkout.min.js"></script>
  </head>
  <body>
    <div id="paypal-buttons-container">
      <p>
        Change the amount and press "change amount" button to reload the PayPal
        SDK with new amount
      </p>
      <input id="amount-input" value="100.00" />
      <button id="change-amount">Change Amount</button>
      <div class="button"></div>
    </div>

    <script type="text/javascript">
      var token = `<TOKEN HERE>`;

      var btClientInstance = braintree.client.create({
        authorization: token,
      });
      var payPalButtonConfigs = {
        createOrder: function () {
          return paypalCheckoutInstance.createPayment({
            flow: "checkout", // Required
            amount: 100.0, // Required
            currency: "USD", // Required, must match the currency passed in with loadPayPalSDK

            intent: "authorize", // Must match the intent passed in with loadPayPalSDK

            enableShippingAddress: true,
            shippingAddressEditable: false,
            shippingAddressOverride: {
              recipientName: "Scruff McGruff",
              line1: "1234 Main St.",
              line2: "Unit 1",
              city: "Chicago",
              countryCode: "US",
              postalCode: "60652",
              state: "IL",
              phone: "123.456.7890",
            },
          });
        },

        onApprove: function (data, actions) {
          return paypalCheckoutInstance.tokenizePayment(
            data,
            function (err, payload) {
              // Submit `payload.nonce` to your server
            }
          );
        },

        onCancel: function (data) {
          console.log("PayPal payment canceled", JSON.stringify(data, 0, 2));
        },

        onError: function (err) {
          console.error("PayPal error", err);
        },
      };

      btClientInstance
        .then(function (clientInstance) {
          return braintree.paypalCheckout.create({
            autoSetDataUserIdToken: true,
            client: clientInstance,
          });
        })
        .then(function (paypalCheckoutInstance) {
          function renderButton() {
            var amount = document.getElementById("amount-input").value;

            paypalCheckoutInstance
              .loadPayPalSDK({
                dataAttributes: {
                  amount,
                },
              })
              .then(function () {
                return paypal.Buttons(payPalButtonConfigs).render(".button");
              });
          }

          document
            .getElementById("change-amount")
            .addEventListener("click", () => {
              renderButton();
            });

          renderButton();
        });
    </script>
  </body>
</html>

RomanKaliupin commented 2 years ago

Hi @crookedneighbor ,

Thanks for the example. After running this code and clicking the button a few times, I see the following errors:

Is it expected?

Let me bring more light on the use-case. The problem is if the price shown on the PDP is not final. After adding an item to your cart, we apply shipping charges and taxes (if applicable). We return the final price inside the createOrder callback. So the price specified in dataAttributes.amount will be different from the price specified in the createOrder callback. Is there a workaround out there?

crookedneighbor commented 2 years ago

I'm getting some clarification from the PayPal folks, because while we document needing to set the amount, I don't see the option for it on the PayPal documentation. https://developer.paypal.com/docs/checkout/reference/customize-sdk/#script-parameters

RomanKaliupin commented 2 years ago

Yes, the same is on my side. I haven't been able to find any specs about this on the PayPal doc side. There is no information about the amount parameter in the data attributes inside the PayPal document.

So, is dataAttributes.amount required? It would be great if not

cgdibble commented 2 years ago

@RomanKaliupin we've picked this back up and are looking into it. One question we had is what are the explicit actions you're taking to generate the initial error you reported? For example, what button specifically are you using to get to this problem?

RomanKaliupin commented 2 years ago

Hi @cgdibble The code which I shared should generate this error. But generally this error is showing when you're trying to render two (more than one) PayPal Smart buttons on the same page with different SDK configs (or with the same configs, but the core there is to load several PP SDK on the one page).

cgdibble commented 2 years ago

@RomanKaliupin On the zoid destroy all components error, that is expected because you are trying to load the SDK twice which isn't supported. Is there a specific use case for that or was this a workaround for your difficulties with dataAttributes.amount?

While there is confusion around amount, we still have no problems loading the SDK without amount present in either the dataAttributes.amount or buttonsConfig. Can you provide an example that demonstrates this and expand on the problem more?

What would be helpful is clarifying the use case at the root of the problem. Is the goal to just start without an amount? Are you actually trying to load two SDKs? If so, why? etc.

RomanKaliupin commented 2 years ago

Hi @cgdibble ,

I'm trying to use Returning customer experience by following of the guide presented on this page.

By that guide you mast set dataAttributes.amount while loading PayPal SDK. The problem is, that this attribute may have different value on one page (depending on case). For example, variations of one product on PDP may have different price. So, each time when buyer selects a different variation we should update this value. More than that, the price presented on PDP isn't final. The final price includes: tax price, promotion, shipping price.

More than that, on PayPal website there is no info regarding dataAttributes.amount param. So, my question is: do we really need this param? If yes, how to deal with the case explained above?

jplukarski commented 2 years ago

@RomanKaliupin We’re still trying to track down if the data attribute for amount is required. In our sandbox testing, it was not, but we’re looking for a more definitive answer. While you’re waiting, I’d give it a try without. It should simply not render the vaulting UI, and fallback to a regular PayPal button if it ends up being required. Our recollection is that the amount attribute is sometimes used to determine if the vaulted payment method should be rendered or not, but we still want to find direct confirmation on that.

cgdibble commented 2 years ago

@RomanKaliupin so we did confirm with the PayPal team that amount is not required. So you should be able to work without it just fine. Please re-open the issue if you have issues that arise from leaving amount off.

braintree / braintree-web

Change Payment Method button (Returning customer experience) with different total amount without page reloading issue #600

General information

Issue description