I have problem with implementation of 3ds verification for Recurly, i have followed example from https://github.com/recurly/recurly-js-examples/blob/master/public/3d-secure/authenticate.html
My problem is that first iframe is loading correctly, but after clicking " Succeed Test Authentication" returns nothing to my threeDSecure.on('token' funcition(){}). It loads iframe with information "To complete your checkout process, please close this browser tab and return to your checkout form." Thanks for any responses.
My view file 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>
My JS file 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' );
First iframe
Second iframe
Resolved via issue in recurly-js repo:
https://github.com/recurly/recurly-js/issues/553
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.