沙盒模式下的 Recurly.js - ThreeDSecure 在单击“成功测试身份验证”后不返回任何内容

Question

我在执行 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

Answer 1

已通过 recurly-js 存储库中的问题解决：
https://github.com/recurly/recurly-js/issues/553