将Google的reCaptcha v3与Recurly的JavaSript API集成

Question

我正在使用Recurly的JavaScript API处理订阅付款
我想在Recurly的自托管页面上实现Google的reCaptcha V3 API。

<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();
});
});

事情是，谷歌的API实现是这样的：

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

两者都有自己版本的onSubmit。如何将谷歌的一个包含在Recurly中？

Answer 1

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
<button type="submit" id="btn-submit">Submit</button>

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
{
grecaptcha.ready(function()
{
grecaptcha.execute('xxx-xxx-site-key', {action: 'submit'}).then(function(token)
{
document.getElementById("recaptchaResponse").value = token;
form.submit();
});
});
}
});