Cybersource Developer Community Cybersource Developer Community

mwilliams · ‎10-09-2018

We're implementing the iFrame version of the Accept Customer Hosted Form for Customer Profiles, providing a hostedProfileIFrameCommunicatorUrl to communicate back to our page in order to take action should a form of payment be successfully added. The communicator is firing only for "manage" with "resizeWindow". "resizeWindow" is the only action ever returned when interacting with the form, even when adding a new payment type. I am specifically looking for Changes Saved messages to come back.

Am I missing a setting somewhere, or does the test API only return the one action?

The only messages I see printed to the dev console when interacting with the form, adding payment types, removing, etc.:

[action: "resizeWindow", height: "245"]
manage
[action: "resizeWindow", height: "245"]
manage
[action: "resizeWindow", width: "806", height: "245"]
manage
[action: "resizeWindow", width: "806", height: "245"]
manage
[action: "resizeWindow", height: "245"]
manage

communicationHandler.html (this is copy/pasted from the sample application IFrameCommunicator.html)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IFrame Communicator</title>

    <!--
     To securely communicate between our Accept Hosted form and your web page,
     we need a communicator page which will be hosted on your site alongside
     your checkout/payment page. You can provide the URL of the communicator
     page in your token request, which will allow Authorize.Net to embed the
     communicator page in the payment form, and send JavaScript messaging through
     your communicator page to a listener script on your main page.
     This page contains a JavaScript that listens for events from the payment
     form and passes them to an event listener in the main page.
   -->


    <script type="text/javascript">
        function callParentFunction(str) {
            if (str && str.length > 0 &&     window.parent && window.parent.parent
                && window.parent.parent.CommunicationHandler && window.parent.parent.CommunicationHandler.onReceiveCommunication) {
                var referrer = document.referrer;
                window.parent.parent.CommunicationHandler.onReceiveCommunication({qstr: str, parent: referrer});
            }
        }

        function receiveMessage(event) {
            if (event && event.data) {
                callParentFunction(event.data);
            }
        }

        if (window.addEventListener) {
            window.addEventListener("message", receiveMessage, false);
        } else if (window.attachEvent) {
            window.attachEvent("onmessage", receiveMessage);
        }

        if (window.location.hash && window.location.hash.length > 1) {
            callParentFunction(window.location.hash.substring(1));
        }
    </script>
</head>
<body>
</body>
</html>

The call for getHostedProfilePageRequest:

static retrieveAuthorizeNetToken(authorizeNetId) {

        const { apiLoginKey, transactionKey } = config
        const body = {
            getHostedProfilePageRequest: {
                merchantAuthentication: {
                    name: apiLoginKey,
                    transactionKey
                },
                customerProfileId: authorizeNetId,
                hostedProfileSettings: {
                    setting: [
                        {
                            settingName: 'hostedProfileManageOptions',
                            settingValue: 'showPayment'
                        },
                        {
                            settingName: 'hostedProfilePaymentOptions',
                            settingValue: 'showAll'
                        },
                        {
                            settingName: 'hostedProfileBillingAddressRequired',
                            settingValue: true
                        },
                        {
                            settingName: 'hostedProfileCardCodeRequired',
                            settingValue: true
                        },
                        {
                            settingName: 'hostedProfilePageBorderVisible',
                            settingValue: false
                        },
                        {
                            settingName: 'hostedProfileHeadingBgColor',
                            settingValue: '#3777bc'
                        },
                        {
                            settingName: 'hostedProfileIFrameCommunicatorUrl',
                            settingValue: 'OUR_INTERNAL_URL'
                        }
                    ]
                }

            }
        }

        const requestInstance = axios.create({
            withCredentials: false,
            headers: {
                'Content-Type': 'text/plain; charset=utf-8',
                Accept: 'text/plain'
            }
        })

        return requestInstance.post(`${authorizeNetUrl}/xml/v1/request.api`, body)

    }

Where we display the form, automatically submitting with the authorizeNetToken we retrieved:

<div>
    <iframe
        id="load_payment"
        className="embed-responsive-item"
        name="load_payment"
        width="100%"
        height="650px"
        frameBorder="0"
        scrolling="no"
    />
    <form id="send_hptoken" action="https://test.authorize.net/customer/manage" method="post"
        target="load_payment" ref={this.setIframeFormRef} hidden={true}>
        <input type="hidden" name="token" value={this.props.shop.authorizeNetToken}/>
    </form>
</div>

menudwai · ‎04-14-2021

HOSTED_PROFILE_RETURN_URL("hostedProfileReturnUrl"),
HOSTED_PROFILE_RETURN_URL_TEXT("hostedProfileReturnUrlText"),
HOSTED_PROFILE_HEADING_BG_COLOR("hostedProfileHeadingBgColor"),
HOSTED_PROFILE_PAGE_BORDER_VISIBLE("hostedProfilePageBorderVisible"),
HOSTED_PROFILE_IFRAME_COMMUNICATOR_URL("hostedProfileIFrameCommunicatorUrl"),
HOSTED_PROFILE_VALIDATION_MODE("hostedProfileValidationMode");

postalexperience.com/pos

Cybersource Developer Community Cybersource Developer Community

hostedProfileIFrameCommunicatorUrl only returning resizeWindow for iFrame