Skip to content

Commit

Permalink
Update README-AcceptHosted.md
Browse files Browse the repository at this point in the history
  • Loading branch information
adavidw authored Feb 16, 2017
1 parent 21f38bc commit e70f185
Showing 1 changed file with 26 additions and 23 deletions.
49 changes: 26 additions & 23 deletions README-AcceptHosted.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@

# Accept Hosted Step-by-Step
Accept Hosted provides a fully hosted payment transaction solution. Authorize.Net takes care of the payment form, the transaction itself and (optionally) the receipt generation. This example demonstrates using an embedded iFrame to display the page, but you could also use a lightbox style popup iFrame. See our [developer documentation](http://developer.authorize.net/api/reference/features/accept_hosted.html) for more details.
Accept Hosted provides a fully hosted payment transaction solution. Authorize.Net takes care of the payment form, the transaction itself and (optionally) the receipt generation. This example demonstrates using an embedded iframe to display the page, but you could also use a lightbox style popup iframe. See our [developer documentation](http://developer.authorize.net/api/reference/features/accept_hosted.html) for more details.
Remember all these steps are reflected in this sample app which you can set up and run yourself.


## Step 1. Create a Secure Form Token
## Step 1. Request a Secure Form Token

In this step we will request an Accept Hosted form token using the Authorize.Net API.
You can try out the call in our sandbox API Explorer here: http://developer.authorize.net/api/reference/#payment-transactions-get-an-accept-payment-page
You can see the details of the API request and interactively try out the call in our sandbox API Explorer here: http://developer.authorize.net/api/reference/#payment-transactions-get-an-accept-payment-page

**NOTE: This should be a fully authenticated server-side call for your application, for example if you had a .NET application this call would be in the code-behind .cs files, for a mobile app this could be in your node.js backend, etc**
**NOTE: This should be a fully authenticated server-side call for your application. For example if you had a .NET application this call would be in the code-behind .cs files; for a mobile app this could be in your node.js backend, etc**

In this Accept Sample application you can find the sample code in https://github.com/AuthorizeNet/accept-sample-app/blob/master/getHostedPaymentForm.php
In this Accept Sample application's respository you can find the sample code for this API request in [getHostedPaymentForm.php](getHostedPaymentForm.php).

With this method you can (1) specify how you want the payment form to look and behave, e.g. if it shows the Billing Address, text on the buttons, etc and (2) provide any information you want to be prepopulated on the form or passed along with the payment. See the **Requesting a Token** section on our Feature Details page: http://developer.authorize.net/api/reference/features/accept_hosted.html


See below for an example of the output from getHostedPaymentPage method. The important response data is the token element as you will use this for the next step:
See below for an example of the response from the getHostedPaymentPage API request. The important response data is the token element as you will use this for the next step:

````xml
```xml
<getHostedPaymentPageResponse>
<messages>
<resultCode>Ok</resultCode>
Expand All @@ -31,27 +31,30 @@ See below for an example of the output from getHostedPaymentPage method. The im
66oTeT0c6/r39pwCcfkNpcjF+I01JUvaULhkE3qWzfzOYbXu0xGbd+Toc5FGTK2WZFP0GbMRbLD7I3tkW2vLEwUkBSMn9WZcuCkNF/jzXi19To1sk+Z8K7aOHs04dhTF1el1qLC+eeWcOsZTYA8GioV6XTNMTQ7j6lLp9HZtci3541iRJET61/VMvhp1iTc5qbWJIAF/DwqxWS5JReAQP9NZE6hvwxJ2s4CpgQwAB8IidWsSpTE+n13otQd/DciRwsZCnz1oXmcqjKoaBoNm3HO0ZI2lDF13sJtBPa6wPB1gbIi/SoPGqY56Qu26VTHGTNlh6tXpda7q/L8sJtBw0oPLXqvhGthBD5JIzFOfQOvo24cgF6B88v2xOnYRkZPh+YeyngQ3z7d4vuouFrQkzQxbvoScA/JRbR09Z69CQ1xZyB0GZYBcPg8QPiWyhQ4sycS10W+hL5BeKqb6Sud1rIcZVmX7/YodESBjPUarjbLbLMJxDXtBobJ00UjNl2o0cFWllujS91qQCa3I2S0EO65m+5WH4YuFbYafoUSj7eCgI4Bm9jIYTYQpgJQ8GNPC1WcqDMhMxsr9R0PXj4tbUqwuizRyFQU7E86Jkhu/lGgvOUmKU/GobNZbgpTsvloMMrS39a/w6mk036Jz42CorSomAqTf9dEFqwA0T6KmEWcm/XplpaEEeoARHdX0x+n/GL5niAp3blDhbJubTyQDPQ6jqFP4NifhICcCFV2oVLcYhG1Hr70A+Y0HA+V58czHysQDu8RyV97Ssz7FY8nChFQXqpHzIhMdygliKx8+sizarzdDbX3KDjK5QhsYDk13xU4epF5X9L6lHMokEOuJ9UAoXZfxmuy3Uhs8tBkya3A+XFi+fIn/ilrJwOyMtMdm8iBVgs+CstNzH49rCWCrU5en4Yjt93tSqrCuNouvCbY=.89nE4Beh
</token>
</getHostedPaymentPageResponse>
````
```

## Step 2. Incorporate Accept Hosted form into your payment flow.

In this step we will embed the payment form in a web page using an iFrame and complete the payment transaction.
In this step we will embed the payment form in a web page using an iframe and complete the payment transaction.

See our sample code, https://github.com/AuthorizeNet/accept-sample-app/blob/master/index.php

Here's an example of the iFrame which will contain the Accept Hosted page:
````html
<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="100%" height="650px" frameborder="0" scrolling="no" hidden="true">
</iframe>
````
See our sample code in this Accept Sample application's respository: [index.php](index.php).

You could then load the Accept Hosted from into your iFrame like this:
````html
<form id="send_hptoken" action="https://test.authorize.net/payment/payment" method="post" target="load_payment" >
<input type="hidden" name="token" value="<?php echo $hostedPaymentResponse->token ?>" />
</form>
````
**NOTE: The token passed to Accept Hosted is generated in Step 1 above.**
Here's an example of the iframe which will contain the Accept Hosted page:

```html
<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="100%" height="650px" frameborder="0" scrolling="no" hidden="true">
</iframe>
```

You could then load the Accept Hosted form into your iframe like this:

```html
<form id="send_hptoken" action="https://test.authorize.net/payment/payment" method="post" target="load_payment" >
<input type="hidden" name="token" value="<?php echo $hostedPaymentResponse->token ?>" />
</form>
```

**NOTE: The token passed to Accept Hosted is generated in Step 1 above.**

The Accept Hosted page should appear in your iFrame like this:

Expand Down

0 comments on commit e70f185

Please sign in to comment.