How To integrate Authorize Payment to your website

Authorize.net Payment method to accept payment with validation, form of authorize fully hosted payment solution that you can redirect your customers to or embed as an iFrame within your page.

Create a developer Account here

Generating and Using the Public Client Key

To generate the Client Key, log into the Merchant Interface as an Administrator and navigate to Account > Settings > Security Settings > General Security Settings > Manage Public Client Key

These test Card numbers to work for testing. The expiration date must be the current date or later
- American Express Test Card: 370000000000002
- Discover Test Card: 6011000000000012
- Visa Test Card: 4007000000027
- Second Visa Test Card: 4012888818888
- JCB: 3088000000000017
- Diners Club/ Carte Blanche: 38000000000006

Create index.php file

and this Javascript to index.php use in live server if possible

LOADING THE JAVASCRIPT LIBRARY

SANDBOX

<script type="text/javascript"
src="https://jstest.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>

<script type="text/javascript"
src="https://jstest.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>

PRODUCTION

<script type="text/javascript"
src="https://js.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>

<script type="text/javascript"
src="https://js.authorize.net/v3/AcceptUI.js"
charset="utf-8">

</script>

ADD this form to the index.php and your api login id and client public key also

<form id="paymentForm"

method="POST"

action="">

<button type="button"

class="AcceptUI"

data-billingAddressOptions='{"show":true, "required":false}'

data-apiLoginID="YOUR API LOGIN ID"

data-clientKey="YOUR PUBLIC CLIENT KEY"

data-acceptUIFormBtnTxt="Submit"

data-acceptUIFormHeaderTxt="Card Information"

data-responseHandler="responseHandler">Pay

</button>

</form>

Add in this API login id and Transaction given in your developer account

$transRequestXml=new SimpleXMLElement($transRequestXmlStr);
$loginId = getenv("API_LOGIN_ID");
$transactionKey = getenv("TRANSACTION_KEY");
$transRequestXml->merchantAuthentication->addChild('name',$loginId);
$transRequestXml->merchantAuthentication->addChild('transactionKey',$transactionKey);
$transRequestXml->transactionRequest->amount=$_POST['amount'];
$transRequestXml->transactionRequest->payment->opaqueData->dataDescriptor=$_POST['dataDesc'];

$transRequestXml->transactionRequest->payment->opaqueData->dataValue=$_POST['dataValue'];

Example of the Complete index.php Page

Following this example of a complete sample HTML page, constructed from all of the sample code snippets above:

<?php

if($_POST) {
$transRequestXmlStr=<<<XML
<?xml version="1.0" encoding="UTF-8"?>
<createTransactionRequest xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd">
<merchantAuthentication></merchantAuthentication>
<transactionRequest>
<transactionType>authCaptureTransaction</transactionType>
<amount>assignAMOUNT</amount>
<currencyCode>USD</currencyCode>
<payment>
<opaqueData>
<dataDescriptor>assignDD</dataDescriptor>
<dataValue>assignDV</dataValue>
</opaqueData>
</payment>
</transactionRequest>
</createTransactionRequest>
XML;
$transRequestXml=new SimpleXMLElement($transRequestXmlStr);
$loginId = getenv("API_LOGIN_ID");
$transactionKey = getenv("TRANSACTION_KEY");
$transRequestXml->merchantAuthentication->addChild('name',$loginId);
$transRequestXml->merchantAuthentication->addChild('transactionKey',$transactionKey);
$transRequestXml->transactionRequest->amount=$_POST['amount'];
$transRequestXml->transactionRequest->payment->opaqueData->dataDescriptor=$_POST['dataDesc'];
$transRequestXml->transactionRequest->payment->opaqueData->dataValue=$_POST['dataValue'];
if($_POST['dataDesc'] === 'COMMON.VCO.ONLINE.PAYMENT')
{
$transRequestXml->transactionRequest->addChild('callId',$_POST['callId']);
}
if(isset($_POST['paIndicator'])){
$transRequestXml->transactionRequest->addChild('cardholderAuthentication');
$transRequestXml->transactionRequest->addChild('authenticationIndicator',$_POST['paIndicator']);
$transRequestXml->transactionRequest->addChild('cardholderAuthenticationValue',$_POST['paValue']);
}
$url="https://apitest.authorize.net/xml/v1/request.api";
//print_r($transRequestXml->asXML());
try{ //setting the curl parameters.
$ch = curl_init();
if (FALSE === $ch)
throw new Exception('failed to initialize');
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/xml'));
curl_setopt($ch, CURLOPT_POSTFIELDS, $transRequestXml->asXML());
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 300);
// The following two curl SSL options are set to "false" for ease of development/debug purposes only.
// Any code used in production should either remove these lines or set them to the appropriate
// values to properly use secure connections for PCI-DSS compliance.
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //for production, set value to true or 1
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); //for production, set value to 2
curl_setopt($ch, CURLOPT_DNS_USE_GLOBAL_CACHE, false );
$content = curl_exec($ch);
if (FALSE === $content)
throw new Exception(curl_error($ch), curl_errno($ch));
curl_close($ch);

$xmlResult=simplexml_load_string($content);
$jsonResult=json_encode($xmlResult);

echo $jsonResult;

}catch(Exception $e) {
trigger_error(sprintf('Curl failed with error #%d: %s', $e->getCode(), $e->getMessage()), E_USER_ERROR);
}
}
?>

<!DOCTYPE html>
<html>



<head>
<title>Sample form</title>
</head>

<body>

<script type="text/javascript"
src="https://jstest.authorize.net/v3/AcceptUI.js"
charset="utf-8">
</script>

<form id="paymentForm"
method="POST"
action="https://YourServer/PathToExistingPaymentProcessingScript">
<input type="hidden" name="dataValue" id="dataValue" />
<input type="hidden" name="dataDescriptor" id="dataDescriptor" />

<input type="text" name="amount" id="amount" />

<button type="button"
class="AcceptUI"
data-billingAddressOptions='{"show":true, "required":false}'
data-apiLoginID="YOUR API LOGIN "
data-clientKey="YOUR PUBLIC CLIENT KEY"
data-acceptUIFormBtnTxt="Submit"
data-acceptUIFormHeaderTxt="Card Information"
data-responseHandler="responseHandler">Pay
</button>
</form>

<script type="text/javascript">

function responseHandler(response) {
if (response.messages.resultCode === "Error") {
var i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ": " +
response.messages.message[i].text
);
i = i + 1;
}
} else {
paymentFormUpdate(response.opaqueData);
}
}

function paymentFormUpdate(opaqueData) {
document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
document.getElementById("dataValue").value = opaqueData.dataValue;

// If using your own form to collect the sensitive data from the customer,
// blank out the fields before submitting them to your server.
// document.getElementById("cardNumber").value = "";
// document.getElementById("expMonth").value = "";
// document.getElementById("expYear").value = "";
// document.getElementById("cardCode").value = "";

document.getElementById("paymentForm").submit();
}
</script>

</body>
</html>