search

braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

Drop-in requestPaymentMethod throws postMessage error. #404

Closed pawel-n closed 6 years ago

pawel-n commented 6 years ago

General information

Issue description

I reproduce demo where there is existing bug. When I provide new card data, and execute 'requestPaymentMethod' it's stuck on 'pending' state and produce error in console log: hosted-fields-frame.min.html:1 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'. at e.reply.e.reply (https://assets.braintreegateway.com/web/3.31.0/html/hosted-fields-frame.min.html:1:12317) at https://assets.braintreegateway.com/web/3.31.0/html/hosted-fields-frame.min.html:1:65690 Code:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
    <title>Braintree payment</title>

    <script src="https://js.braintreegateway.com/web/dropin/1.10.0/js/dropin.min.js"></script>
  </head>
  <body>
    <div id="dropin-container"></div>
    <script>
      let createBraintree = () => {
        window.dropinHandler = braintree.dropin.create({
          authorization: 'sandbox_**********************,
          container: '#dropin-container'
        }, function (createErr, instance) {
          window.addEventListener('requestPayment', function () {
            instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
              alert('Im in!');
            });
          });
        });
      };

      createBraintree();
    </script>
  </body>
</html>

I'm not reach the 'alert' code. Validation working perfectly. After I enter valid card (4111...) and execute my event (using console): window.dispatchEvent(new Event('requestPayment')) the error comes.

My code evolve from yesterday, but I sure in 50% that it was working.

crookedneighbor commented 6 years ago

You'll receive that error if you attempt to run this code over the file protocol instead of on a webserver.

If you have npm installed on your machine, you can run that same code over a simple webserver, and it will not error.

npm install --global http-server
# run this in the same directory as your index.html file above
http-server

By default, it should run it on localhost:8080, if you try the same thing, then it should work.

stravi commented 4 years ago

I am looking to integrate Braintree Web drop-in into my react-native application using WebView. And I am facing this same error. Is there a work around to make this work from file protocol without the need for a web server? @crookedneighbor do you have any thoughts?

crookedneighbor commented 4 years ago

@stravi contact our support team for assistance https://help.braintreepayments.com/

chenxing-luckysky commented 3 years ago

@stravi do you get the solution? I got the same problem

stravi commented 3 years ago

@stravi do you get the solution? I got the same problem

In my react-native project I have create new module that is using the braintreepayments.api.dropin

chenxing-luckysky commented 3 years ago

on the braintree website, it only provide the html way. can you give me a reference that use api.dropin

stravi commented 3 years ago

Take a look here: https://github.com/braintree/braintree-android-drop-in This is the module I have created. Keep in mind that current version for braintree-android-drop-in is 5.2 while when I wrote this it was 4 something https://pastebin.pl/view/274b28b2 Here is how I use it from react-native: https://pastebin.pl/view/bcba96b3

chenxing-luckysky commented 3 years ago

@stravi thank you for your help!!! problem solved

PeterNdomano commented 1 year ago

I just got the same error on React project bootstrapped by create-react-app. Any ideas please @crookedneighbor braintree

crookedneighbor commented 1 year ago

@PeterNdomano this is a benign error due to a patch we applied during some maintenance last week. The error in the console does not affect the code execution at all.

There's a new version of Drop-in being released today or tomorrow that resolves the console error.

Pinging @cgdibble to update here with the new version number when it is available.

PeterNdomano commented 1 year ago

@crookedneighbor Thanks for your reply. But on my end I see it affects even code execution coz the callback passed in requestPaymentMethod does not run at all

crookedneighbor commented 1 year ago

If you can spin up an example repo that reproduces it, we'll be glad to take a look. My guess though is that the console.error you are seeing and the problem you are having are unrelated.

Please open up a new Github issue once you have something for us to look at.

PeterNdomano commented 1 year ago

If you can spin up an example repo that reproduces it, we'll be glad to take a look. My guess though is that the console.error you are seeing and the problem you are having are unrelated.

Please open up a new Github issue once you have something for us to look at.

@crookedneighbor My Repo is here

But I just figured out the problem and fixed it. My code was un-mounting the dropin container then replace it with a loader when credit card is submitted.

So you were right before, the console error and the problem I was facing were unrelated.

Gratias...