Displaying the Form
To implement hosted customer profile management access by using a redirect to Authorize.Net, follow these steps:
Step 1 - When you receive the token returned by the
GetHostedProfilePageResponse function call, put a hidden form somewhere on your page (the value for the token will be the value returned by the function call).
If you are using the test environment, replace
<form method="post" action="https://accept.authorize.net/customer/manage">
<input type="hidden" name="token" value="pfGaUNntEKMGfyWPmI4p+Bb4TJf2F0NCoCBp3cOXB7"/>
<input type="submit" value="Manage my payment and shipping information"/>
Step 2 - Add a button on your page that redirects the customer to Authorize.Net's secure site. You can customize the text:
<input type="button" onclick= "document.getElementById( 'formAuthorizeNetPage').submit();">Manage my payment and shipping information</input>
In this example, the
Manage my payment and shipping information button directs users to the Authorize.Net Accept Customer hosted page, where they can:
- Create a new payment profile
- Update or delete current credit card or bank information
- Enter a new shipping address
- Update or delete current shipping address
This channel of communication is used to pass a few basic messages back to a listener script running on your main page (the page that calls the form):
- Ideal height and width of the window - allows you to resize the frame and avoid any scrollbars from appearing.
- Changes Saved - returned whenever the customer saves changes to their profile. You can use this notification to know when to look for those changes through the Customer Profiles API.
- Request Cancelled - returned when the customer backs out of the hosted form.
Note: If you plan to host our form in an IFrame, you must include the address to your IFrameCommunicator page in the
hostedPaymentIFrameCommunicatorUrl parameter in the
Note: You must use HTTPS in the URL to your IFrameCommunicator page.
For an example of an IFrameCommunicator page and more information about the messages passed, see our sample IFrameCommunicator.html in our sample application on GitHub.