Showing results for 
Search instead for 
Did you mean: 

Accept Hosted Embedded IFrame problems

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 ="", 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="" method="post" target="add_payment">
    <input type="hidden" name="token" value="{{ payment_form_token }}" />


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.


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: the inputs started to work as expected.