我在为 Recurly 实施 3ds 验证时遇到问题,我遵循了https://github.com/recurly/recurly-js-examples/blob/master/public/3d-secure/authenticate.html中的示例
我的问题是第一个 iframe 加载正确,但是在单击“成功测试身份验证”后,我的 threeDSecure.on('token' funcition(){}) 没有返回任何内容。它会在 iframe 中加载信息“要完成结帐过程,请关闭此浏览器选项卡并返回到您的结帐表单。” 感谢您的任何回复。
我的视图文件 https://pastebin.com/irCuGr48
<form id="pm-recurly-form-3ds" method="post" action="<?php echo esc_url( get_permalink( get_queried_object_id() ) ); ?>subscription/pay/">
<div id="container-3ds-authentication" class="three-d-secure-auth-container col-12 " ></div>
<div class="three-d-secure-submitting-messagge col-12">
Authenticating your payment method...
</div>
<?php wp_nonce_field( 'pm-register-subscription-nonce' ); ?>
<input type="hidden" name="pm-form-request" value="register-subscription" />
<input type="hidden" name="pm-price-plan" value="<?php echo esc_attr( $pm_price_plan ); ?>">
<input type="hidden" name="three-d-secure-token" id="three-d-secure-token" value="">
<input type="hidden" name="recurly-token" id="recurly-token" value="">
</form>
我的 JS 文件 https://pastebin.com/7zYDAEJs
// We expect this page to load with the following parameter pattern
// `/3d-secure.html#token_id=xxx&action_token_id`
// This is a simple parser for that pattern. You may use window.URLSearchParams
// instead if IE11 support is not needed
var hashParams = location.hash.substr(1).split('&').reduce(function (acc, i) {
var [k,v] = i.split('=');
acc[k]=v;
return acc;
}, {});
// Configure Recurly.js
recurly.configure(recurly_key);
// In order to remain backend agnostic, this example passes the Recurly.js credit card token
// to this page via the URL hash. Here we add it to the form so that it will be passed
// to our backend
document.querySelector('#recurly-token').setAttribute('value',hashParams.token_id);
// Now we construct the 3-D Secure authentication flow
var risk = recurly.Risk();
var threeDSecure = risk.ThreeDSecure({ actionTokenId: hashParams.action_token_id });
var container = document.querySelector('#container-3ds-authentication');
// Handle errors that occur during 3-D Secure authentication
threeDSecure.on('error', error);
// 'token' is called when your user completes the 3-D Secure authentication flow
threeDSecure.on('token', function (token) {
console.log(token);
// place the result token in your form so that it will be submitted
// when the customer re-submits
document.querySelector('#three-d-secure-token').setAttribute('value',token.id);
// Hide the container once we have a token
container.style.display = "none";
// Show the loading message
document.querySelector('.three-d-secure-submitting-messagge').style.display = "block";
// submit the form automatically
recurly_form_verify.submit();
});
// Attach our 3D Secure session to the container
threeDSecure.attach(container);
// Show the container
container.style.display = "block";
// runs some simple animations for the page
document.querySelector('body').classList.add( 'show' );
第二个 iframe