shukerullah/ReCaptcha.js

## ReCaptcha.js
import React from 'react';
import {WebView} from 'react-native-webview';

const getReCaptchaContent = (captchaKey, action) => {
  const webForm = `<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <meta
        name="viewport"
        content="width=device-width; initial-scale=1; maximum-scale=1"
      />
      <style>
        .text-xs-center {
          text-align: center;
        }
        .g-recaptcha {
          display: inline-block;
        }
      </style>
      <script src="https://www.google.com/recaptcha/api.js?render=${captchaKey}"></script>
      <script type="text/javascript">
        grecaptcha.ready(function () {
          grecaptcha
            .execute("${captchaKey}", {
              action: "${action}",
            })
            .then(function (token) {
              window.ReactNativeWebView.postMessage(token);
            });
        });
      </script>
    </head>
  </html>
  `;
  return webForm;
};

type Props = {
  action?: string,
  domain: string,
  captchaKey: string,
  onSuccess?: Function,
};
export default class ReCaptcha extends React.PureComponent<Props> {
  webview: WebView;

  static defaultProps = {
    action: 'verify',
    onSuccess: () => {},
  };

  render() {
    const {domain, captchaKey, action, onSuccess} = this.props;
    return (
      <WebView
        ref={ref => {
          this.webview = ref;
        }}
        onMessage={({nativeEvent}: Object) => {
          onSuccess(nativeEvent.data);
        }}
        source={{
          baseUrl: domain,
          html: getReCaptchaContent(captchaKey, action),
        }}
      />
    );
  }
}
	import React from 'react';
	import {WebView} from 'react-native-webview';

	const getReCaptchaContent = (captchaKey, action) => {
	const webForm = `<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width; initial-scale=1; maximum-scale=1"
	/>
	<style>
	.text-xs-center {
	text-align: center;
	}
	.g-recaptcha {
	display: inline-block;
	}
	</style>
	<script src="https://www.google.com/recaptcha/api.js?render=${captchaKey}"></script>
	<script type="text/javascript">
	grecaptcha.ready(function () {
	grecaptcha
	.execute("${captchaKey}", {
	action: "${action}",
	})
	.then(function (token) {
	window.ReactNativeWebView.postMessage(token);
	});
	});
	</script>
	</head>
	</html>
	`;
	return webForm;
	};

	type Props = {
	action?: string,
	domain: string,
	captchaKey: string,
	onSuccess?: Function,
	};
	export default class ReCaptcha extends React.PureComponent<Props> {
	webview: WebView;

	static defaultProps = {
	action: 'verify',
	onSuccess: () => {},
	};

	render() {
	const {domain, captchaKey, action, onSuccess} = this.props;
	return (
	<WebView
	ref={ref => {
	this.webview = ref;
	}}
	onMessage={({nativeEvent}: Object) => {
	onSuccess(nativeEvent.data);
	}}
	source={{
	baseUrl: domain,
	html: getReCaptchaContent(captchaKey, action),
	}}
	/>
	);
	}
	}