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.
01-24-2023 01:31 PM
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.
01-30-2023 12:39 PM