Accept Hosted Embedded IFrame problems

[john-raber]

I am trying to use Accept Hosted to display the payment form in an embedded iframe on a django website.  I have been able to get a form token back using the following code:

headers = {"Content-Type": "application/json"}
return_options = {
    "settingName": "hostedPaymentReturnOptions",
    "settingValue": f"{{\"showReceipt\": false, \"url\": \"{order_complete_url}\"}}"
}
button_options = {
    "settingName": "hostedPaymentButtonOptions",
    "settingValue": '{\"text\": \"Pay\"}',
}
style_options = {"settingName": "hostedPaymentStyleOptions", "settingValue": '{\"bgColor\": \"blue\"}'}
payment_options = {
    "settingName": "hostedPaymentPaymentOptions",
    "settingValue": "{\"cardCodeRequired\": true, \"showCreditCard\": true, \"showBankAccount\": false}"
}
billing_options = {
    "settingName": "hostedPaymentBillingAddressOptions",
    "settingValue": "{\"show\": true, \"required\": false}"
}
iframe_communicator_options = {
    "settingName": "hostedPaymentIFrameCommunicatorUrl",
    "settingValue": f"{{\"url\": \"{communicator_url}\"}}"
}
payload = {
    "getHostedPaymentPageRequest": {
        "merchantAuthentication": self.merchant_auth,
        "transactionRequest": {
            "transactionType": "authCaptureTransaction",
            "amount": str(order.grand_total),
            "customer": {
                "email": order.email_address,
            },
            "billTo": {
                "firstName": order.billing_fname,
                "lastName": order.billing_lname,
                "address": f"{order.billing_address_1}, {order.billing_address_2}",
                "city": order.billing_city,
                "state": order.billing_state,
                "zip": order.billing_zipcode,
                "country": order.billing_country,
            },
        },
        "hostedPaymentSettings": {
            "setting": [return_options, button_options, style_options, payment_options, billing_options, iframe_communicator_options]
        }
    }
}
json_payload = json.dumps(payload)
response = requests.post("https://apitest.authorize.net/xml/v1/request.api", headers=headers, data=json_payload)

 I'm passing the form token to the front end from the view and when the page loads I submit this form to send the form token and get the form which is displayed when a credit card option is selected on the page.

<form id="send_token" action="https://test.authorize.net/payment/payment" method="post" target="add_payment">
    <input type="hidden" name="token" value="{{ payment_form_token }}" />
</form>

The form that gets displayed looks like this:

So it has the order summary, but no actual inputs for credit card or billing information which should be showing up based on the parameters I am sending in the request for the form token.  I have tried to set "showBankAccount" to true, but that didn't change the form at all.

[john-raber]

The issue ended up being that my site was using a different version of bootstrap and jquery than what the examples were using.  When I updated my versions to match up with the example app here: https://github.com/AuthorizeNet/webhooks-sample-app the inputs started to work as expected.