I am using Recurly’s JavaScript API to process subscriptions payments.
I want to implement Google’s reCaptcha V3 API to the Recurly’s self-hosted page.
<script src="https://js.recurly.com/v4/recurly.js"></script>
recurly.configure({
publicKey : 'xxx-xxx',
required : ['cvv', 'address1', 'city', 'state', 'country', 'postal_code'],
});
// When a customer hits their 'enter' key while in a field
recurly.on('field:submit', function (event) {
$('form').submit();
});
// On form submit, we stop submission to go get the token
$('form').on('submit', function (event) {
// Prevent the form from submitting while we retrieve the token from Recurly
event.preventDefault();
// Reset the errors display
$('#errors').text('');
$('input').removeClass('error');
// Disable the submit button
$('button').prop('disabled', true);
var form = this;
// Now we call recurly.token with the form. It goes to Recurly servers
// to tokenize the credit card information, then injects the token into the
// data-recurly="token" field above
recurly.token(form, function (err, token) {
// send any errors to the error function below
if (err) error(err);
// Otherwise we continue with the form submission
else form.submit();
});
});
Things is, Google’s API implementation is something like this :
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<button type="submit" id="btn-submit" class="g-recaptcha" data-sitekey="xxxxxxxxx" data-callback='onSubmit' data-action='submit'>Submit</button>
<script>
function onSubmit(token)
{
document.getElementById("recaptchaResponse").value = token;
document.getElementById("frm-subscribe").submit();
}
</script>
Both have their own version of onSubmit. How do I include Google’s one into Recurly’s ?