[Authorize.net](https://www.authorize.net/) workflow
===

## Table of Contents

[TOC]

## Registration

Use of the Authorize.Net APIs requires having an account on the Authorize.Net system. You can find these details in the Settings section. If you don't currently have a production Authorize.Net account, [sign up for a sandbox account.](https://developer.authorize.net/sandbox/)

### Authentication

To authenticate with the Authorize.Net API, use your account's API Login ID and Transaction Key. If you don't have these credentials, you can obtain them from our Merchant Interface site. For production accounts, the Merchant Interface is located at (https://account.authorize.net/); and for sandbox accounts, at (https://sandbox.authorize.net).

Once you have your keys simply load them into the appropriate variables in your code, as per the below sample code dealing with the authentication part of the API request.

## Configuration backend
To set your API credentials for an API request:

var merchantAuthenticationType = new ApiContracts.MerchantAuthenticationType();
merchantAuthenticationType.setName('YOUR_API_LOGIN_ID');
merchantAuthenticationType.setTransactionKey('YOUR_TRANSACTION_KEY');

> Never include your Login ID and Transaction Key directly in a file that's in a publicly accessible portion of your website. As a best practice, define the API Login ID and Transaction Key in a constants file, and reference those constants in the appropriate place in your code.

### Switching between the sandbox environment and the production environment

Authorize.Net maintains a complete sandbox environment for testing and development purposes. The sandbox environment is an exact replica of our production environment, with simulated transaction authorization and settlement. By default, this SDK is configured to use with the sandbox environment. To switch to the production environment, call setEnvironment on the controller variable before execute. For example:

// For PRODUCTION use
ctrl.setEnvironment(SDKConstants.endpoint.production);

API credentials are different for each environment, so be sure to switch to the appropriate credentials when switching environments.

## Configuration frontend
> Refer: [https://developer.authorize.net/api/reference/features/acceptjs.html](https://developer.authorize.net/api/reference/features/acceptjs.html)

### Accept.js

> Accept.js is a JavaScript library for sending secure payment data directly to Authorize.net. Accept.js captures the payment data and submits it directly to us, in exchange for a one-time-use token, or payment nonce. You can use this payment nonce in the place of payment data in a follow-on createTransactionRequest API call.

### Generating and Using the Public Client Key

Before using Accept.js, you must generate a Public Client Key. There are two ways to generate the Public Client Key: using the API or the Merchant Interface.

#### GENERATING THE PUBLIC CLIENT KEY USING THE API
Call the `getMerchantDetailsRequest` API request. The response contains the field publicClientKey, which contains the value of the key.

NOTE: If you are a merchant, use your login ID and API Key to call `getMerchantDetailsRequest`. If you are a partner submitting this request on a merchant's behalf, use your OAuth credentials.

#### GENERATING THE PUBLIC CLIENT KEY USING THE MERCHANT INTERFACE
To generate the Client Key, log in to the Merchant Interface as an Administrator and navigate to `Account > Settings > Security Settings > General Security Settings > Manage Public Client Key`. If the Public Client Key does not yet exist, answer your security question to generate the key.

## Workflow

1. Add the Accept.js library to a page on your site.

2. Using the HTML form tag, create a submit button on the page with the Accept.js library. Set the action parameter of the form to point at your response handler script, and configure the button to interact with the AcceptUI portion of the Accept.js library. The customer will click the button to open the payment information form.

3. During checkout, the customer clicks the button to open the payment information form. The customer fills out and submits the form.

4. The Accept script sends the payment information directly to Authorize.net and receives a payment nonce. The script passes the payment nonce to the response handler function that you specified when you defined the button in step 1.

5. Your response handler sends the nonce and any other necessary information from your page back to your server, which sends a transaction request (for example createTransactionRequest) to Authorize.net using the payment nonce in place of the account number and other payment information.

## Integrating the JavaScript Library into Your Page

Loading the javascrip library (with the hosted form)

> Sanbox

<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>

Building your Payment Form

Add bellow script to your page

<form id="paymentForm"
    method="POST"
    action="https://YourServer/PathToExistingPaymentProcessingScript">
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
    <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-paymentOptions='{"showCreditCard": true, "showBankAccount": true}' 
        data-responseHandler="responseHandler">Pay
    </button>
</form>

---