CODEWITHSUNDEEP
javascripthtmlreactjsreact-nativewebview
wc26
wc26

Reputation: 11

React Native send data to WebView

I'm rendering a HTML screen in my react-native screen with react-native-webview. It generates a little form to add or select a credit card from my Braintree account. The code below works fine, The console.log(data) prints me the response that I want from Braintree. But it works because the client_token is hard coded in my HTML file. So the only thing I have to do is to pass the client_token.

My react-native code (without passing the token):

const BraintreeWebview = () => {
   let myWebView
   const url = 'amazonaws.com/braintree-webview/test2.html'
   const myScript = `
     document.body.style.backgroundColor = '#f4f4f4';
     true; // note: this is required, or you'll sometimes get silent failures
`
return (
  <WebView
    source={{ uri: url }}
    style={{ flex: 1, marginTop: 10, width: variable.deviceWidth * 0.95 }}
    injectedJavaScript={myScript}
    onMessage={(event) => {
      const { data } = event.nativeEvent
      console.log(data)
    }}
  />
)

And my HTML (without passing the token):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
  </head>
  <body>
    <div id="dropin-container"></div>
    <div id="braintree_token"></div>
    <button id="submit-button">Request payment method</button>
    <script>
      var button = document.querySelector('#submit-button');

      braintree.dropin.create({
        authorization: "eyJ2ZXJzaW9uIjoyLCJlbnZpcm9ubWVudCI6InNhbmRib3giLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU9UQTJPVEUwTmpnc0ltcDBhU0k2SWpNMllUTmhZemRtTFRJd1l6UXRORE15TVMxaE1tTTNMVGcxTjJGbVl6RTBZMkUwWmlJc0luTjFZaUk2SW1oMFoyTTVaR1k1WkhwME56ZHViV29pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNkltaDBaMk01WkdZNVpIcDBOemR1YldvaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKamRYTjBiMjFsY2w5cFpDSTZJak0xSW4xOS5JWWVKdmVINDFOVUZFb0FaRUNGelVBZ2VuM0RUVHhvMmM1azAtckdiNEw4N0ZiUmxITS1nUlZreXQtYmhnTzZXajBsTzRTNnltRXEwcVVOalNicEtSQT9jdXN0b21lcl9pZD0iLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJoYXNDdXN0b21lciI6dHJ1ZSwiZ3JhcGhRTCI6eyJ1cmwiOiJodHRwczovL3BheW1lbnRzLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vZ3JhcGhxbCIsImRhdGUiOiIyMDE4LTA1LTA4In0sImNoYWxsZW5nZXMiOltdLCJjbGllbnRBcGlVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpIiwiYXNzZXRzVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhdXRoVXJsIjoiaHR0cHM6Ly9hdXRoLnZlbm1vLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhbmFseXRpY3MiOnsidXJsIjoiaHR0cHM6Ly9vcmlnaW4tYW5hbHl0aWNzLXNhbmQuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbS9odGdjOWRmOWR6dDc3bm1qIn0sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsInBheXBhbEVuYWJsZWQiOnRydWUsInBheXBhbCI6eyJkaXNwbGF5TmFtZSI6ImNvZGVib3h4IiwiY2xpZW50SWQiOm51bGwsInByaXZhY3lVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vcHAiLCJ1c2VyQWdyZWVtZW50VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3RvcyIsImJhc2VVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFzc2V0c1VybCI6Imh0dHBzOi8vY2hlY2tvdXQucGF5cGFsLmNvbSIsImRpcmVjdEJhc2VVcmwiOm51bGwsImFsbG93SHR0cCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOnRydWUsImVudmlyb25tZW50Ijoib2ZmbGluZSIsInVudmV0dGVkTWVyY2hhbnQiOmZhbHNlLCJicmFpbnRyZWVDbGllbnRJZCI6Im1hc3RlcmNsaWVudDMiLCJiaWxsaW5nQWdyZWVtZW50c0VuYWJsZWQiOnRydWUsIm1lcmNoYW50QWNjb3VudElkIjoiY29kZWJveHgiLCJjdXJyZW5jeUlzb0NvZGUiOiJDQUQifSwibWVyY2hhbnRJZCI6Imh0Z2M5ZGY5ZHp0NzdubWoiLCJ2ZW5tbyI6Im9mZiJ9",
        container: '#dropin-container'
      }, function (createErr, instance) {
        
        button.addEventListener('click', function () {
          instance.requestPaymentMethod(function (err, payload) {
            if(err){
              window.ReactNativeWebView.postMessage(err)
            } else {
              window.ReactNativeWebView.postMessage(payload.nonce);
            }
          });
        });
      });
    </script>
  </body>
</html>

What I've tried to send my client_token is very much from this documentation but never worked..

My react-native code now:

const BraintreeWebview = () => {
let myWebView
const url = 'https://damava-documents.s3.us-east-2.amazonaws.com/braintree-webview/test2.html'
const myScript = `
  document.body.style.backgroundColor = '#f4f4f4';
  true; // note: this is required, or you'll sometimes get silent failures
`
return (
  <WebView
    source={{ uri: url }}
    ref={(el) => (myWebView = el)}
    style={{ flex: 1, marginTop: 10, width: variable.deviceWidth * 0.95, height: 50 }}
    injectedJavaScript={myScript}
    onMessage={(event) => {
      const { data } = event.nativeEvent
      const clientResponseCode = `
      window.postMessage("client_token");
      true;`
      if (myWebView) {
        myWebView.injectJavaScript(clientResponseCode)
      }
      console.log(data)
    }}
  />
)

My HTML now :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
  </head>
  <body>
    <div id="dropin-container"></div>
    <div id="braintree_token"></div>
    <button id="submit-button">Request payment method</button>
    <script>
      var button = document.querySelector('#submit-button');

      window.addEventListener("message", message => {
      document.getElementById("braintree_token").innerHTML += `</br>${message.data}`;
      });

      braintree.dropin.create({
        authorization: "eyJ2ZXJzaW9uIjoyLCJlbnZpcm9ubWVudCI6InNhbmRib3giLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNklrRjFkR2g1SW4wLmV5SmxlSEFpT2pFMU9UQTJPVEUwTmpnc0ltcDBhU0k2SWpNMllUTmhZemRtTFRJd1l6UXRORE15TVMxaE1tTTNMVGcxTjJGbVl6RTBZMkUwWmlJc0luTjFZaUk2SW1oMFoyTTVaR1k1WkhwME56ZHViV29pTENKcGMzTWlPaUpCZFhSb2VTSXNJbTFsY21Ob1lXNTBJanA3SW5CMVlteHBZMTlwWkNJNkltaDBaMk01WkdZNVpIcDBOemR1YldvaUxDSjJaWEpwWm5sZlkyRnlaRjlpZVY5a1pXWmhkV3gwSWpwbVlXeHpaWDBzSW5KcFoyaDBjeUk2V3lKdFlXNWhaMlZmZG1GMWJIUWlYU3dpYjNCMGFXOXVjeUk2ZXlKamRYTjBiMjFsY2w5cFpDSTZJak0xSW4xOS5JWWVKdmVINDFOVUZFb0FaRUNGelVBZ2VuM0RUVHhvMmM1azAtckdiNEw4N0ZiUmxITS1nUlZreXQtYmhnTzZXajBsTzRTNnltRXEwcVVOalNicEtSQT9jdXN0b21lcl9pZD0iLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJoYXNDdXN0b21lciI6dHJ1ZSwiZ3JhcGhRTCI6eyJ1cmwiOiJodHRwczovL3BheW1lbnRzLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vZ3JhcGhxbCIsImRhdGUiOiIyMDE4LTA1LTA4In0sImNoYWxsZW5nZXMiOltdLCJjbGllbnRBcGlVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvaHRnYzlkZjlkenQ3N25tai9jbGllbnRfYXBpIiwiYXNzZXRzVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhdXRoVXJsIjoiaHR0cHM6Ly9hdXRoLnZlbm1vLnNhbmRib3guYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhbmFseXRpY3MiOnsidXJsIjoiaHR0cHM6Ly9vcmlnaW4tYW5hbHl0aWNzLXNhbmQuc2FuZGJveC5icmFpbnRyZWUtYXBpLmNvbS9odGdjOWRmOWR6dDc3bm1qIn0sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsInBheXBhbEVuYWJsZWQiOnRydWUsInBheXBhbCI6eyJkaXNwbGF5TmFtZSI6ImNvZGVib3h4IiwiY2xpZW50SWQiOm51bGwsInByaXZhY3lVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vcHAiLCJ1c2VyQWdyZWVtZW50VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3RvcyIsImJhc2VVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImFzc2V0c1VybCI6Imh0dHBzOi8vY2hlY2tvdXQucGF5cGFsLmNvbSIsImRpcmVjdEJhc2VVcmwiOm51bGwsImFsbG93SHR0cCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOnRydWUsImVudmlyb25tZW50Ijoib2ZmbGluZSIsInVudmV0dGVkTWVyY2hhbnQiOmZhbHNlLCJicmFpbnRyZWVDbGllbnRJZCI6Im1hc3RlcmNsaWVudDMiLCJiaWxsaW5nQWdyZWVtZW50c0VuYWJsZWQiOnRydWUsIm1lcmNoYW50QWNjb3VudElkIjoiY29kZWJveHgiLCJjdXJyZW5jeUlzb0NvZGUiOiJDQUQifSwibWVyY2hhbnRJZCI6Imh0Z2M5ZGY5ZHp0NzdubWoiLCJ2ZW5tbyI6Im9mZiJ9",
        container: '#dropin-container'
      }, function (createErr, instance) {
        
        button.addEventListener('click', function () {
          instance.requestPaymentMethod(function (err, payload) {
            if(err){
              window.ReactNativeWebView.postMessage(err)
            } else {
              window.ReactNativeWebView.postMessage(payload.nonce);
            }
          });
        });
      });
    </script>
  </body>
</html>

Any ideas ?

Upvotes: 1

Views: 5967

Answers (1)

Awais Rana
Awais Rana

Reputation: 184

Please try to change window.addEventListener to document.addEventListener and send client_token using WebView ref and onLoadEnd prop of WebView

onLoadEnd={() => myWebView.postMessage("client_token");}

Note: follow this article for further guidance https://dev.to/franko4don/paypal-in-react-native-4emd

Upvotes: 1

Related Questions