React Native отправляет данные в WebView - PullRequest
Новая
       70

React Native отправляет данные в WebView

0 голосов
/ 27 мая 2020

Я визуализирую экран HTML на моем собственном экране реакции с помощью response-native-webview . Он генерирует небольшую форму для добавления или выбора кредитной карты из моей учетной записи Braintree. Приведенный ниже код работает нормально, console.log (data) выводит мне ответ, который я хочу от Braintree. Но это работает, потому что client_token жестко закодирован в моем HTML файле . Итак, единственное, что мне нужно сделать, это передать client_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)
    }}
  />
)

И мой HTML (без передачи токен): 

<!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>

То, что я пытался отправить свой client_token, очень похоже на эту документацию , но так и не сработало ..

Моя реакция- собственный код сейчас: 

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)
    }}
  />
)

Мой HTML сейчас: 

<!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>

Есть идеи?

1 Ответ

0 голосов
/ 28 мая 2020

Попробуйте изменить window.addEventListener на document.addEventListener и отправить client_token , используя WebView ref и onLoadEnd prop WebView 

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

Примечание: следуйте этой статье для получения дополнительной информации https://dev.to/franko4don/paypal-in-react-native-4emd

...