javascript - サンドボックス モードの Recurly.js - [テスト認証の成功] をクリックした後、ThreeDSecure が何も返さない

Question

Recurly の 3ds 検証の実装に問題があります。https://github.com/recurly/recurly-js-examples/blob/master/public/3d-secure/authenticate.htmlの例に従いました。

私の問題は、最初の iframe が正しく読み込まれていることですが、[Succeed Test Authentication] をクリックした後、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' );

2 番目の iframe