accept hosted form button... with YOUR API LOGIN ID

[jlhutto]

I'm currently testing and integrating accept.js 

I'm using the form button in the api for integration of the hosted form (below)

But I'm concerned that it exposes my api login and public key?

When I did a source screen it shows my information.   Can't anyone then use it to process a credit card with my credentials ?   

data-apiLoginID="YOUR API LOGIN ID" 
data-clientKey="YOUR PUBLIC CLIENT KEY"

<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-responseHandler="responseHandler">Pay
</button>
</form>

[Renaissance]

That is something else. I’m not the best person to answer this I think, but without knowing any simpler way, I would be tempted to do some sort of encrypt/decrypt function or at least a base64 encode or decode, or something. Your payment script is presumably not visible in the browser, so you could have it decrypt your credentials from the post data.

But I am being far too complicated. There has to be an easier way to fix this. I’m going to stay tuned to this one out of mere curiosity. I’ve never done a js integration but this is a good heads up for when I do.

[RichardH]

Hello @jlhutto

Your API Login is not sensitive information and is used with the public key to encrypt the payment information and return a payment nonce. 

You then submit the nonce to the gateway securely from your server using your API Login and Transaction Key or with OAuth. 

Richard

[paguilar2287]

sorry to post on this with a question, but I am new to Authorize.net and finding it really difficult to understand the docs clearly. They are a little vague. Can anyone tell me what https://YourServer/PathToExistingPaymentProcessingScript means? Am I supposed to have a separate server to use accept.js? I am trying to implement accept.js into my website, but I do not have a separate server that I interact with. Do I need to build a php server to use a javascript library?

[allermidev123]

I would like to bump this quesiton. 

I also have no idea what "https://YourServer/PathToExistingPaymentProcessingScript" is supposed to mean or how it is intended to be used. I also keep having issues with authentication: 

{code: "E_WC_21", text: "User authentication failed due to invalid authentication values."}

Here is the form:

<form
  id="paymentForm"
  method="POST"
  action="https://YourServer/PathToExistingPaymentProcessingScript"
  //"https://api.authorize.net/xml/v1/request.api"
>
  <input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber" />
  <input type="text" name="expMonth" id="expMonth" placeholder="expMonth" />
  <input type="text" name="expYear" id="expYear" placeholder="expYear" />
  <input type="text" name="cardCode" id="cardCode" placeholder="cardCode" />
  <input type="hidden" name="dataValue" id="dataValue" />
  <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
  <button type="button" onClick={this.sendPaymentDataToANet}>
    Pay
  </button>
</form>

Here is the button's submit method:

sendPaymentDataToANet = () => {
    var authData = {};
    authData.clientKey = process.env.REACT_APP_AUTHORIZE_NET_TRANSACTION_KEY;
    // authData.clientKey = process.env.REACT_APP_AUTHORIZE_NET_PUBLIC_CLIENT_KEY;
    authData.apiLoginID = process.env.REACT_APP_AUTHORIZE_NET_API_LOGIN_ID;

    var cardData = {};
    cardData.cardNumber = document.getElementById('cardNumber').value;
    cardData.month = document.getElementById('expMonth').value;
    cardData.year = document.getElementById('expYear').value;
    cardData.cardCode = document.getElementById('cardCode').value;

    var secureData = {};
    secureData.authData = authData;
    secureData.cardData = cardData;
    // If using banking information instead of card information,
    // send the bankData object instead of the cardData object.
    //
    // secureData.bankData = bankData;

    window.Accept.dispatchData(secureData, this.handleANetResponse);
  };

I've spent 2 hours on this problem, searching through various docs and questions/responses on this site. I have found nothing useful. I've tried changing and resetting the keys multiple times. I've set the accounts to live mode instead of test mode. I've tried various combinations of clientKey and loginID. I have tried with both sandbox keys and live merchant account keys.

Please advice as this project is on a very tight deadline.

Thanks in advance

[mksocay]

Hello everyone,
I am not the best person to answer this I think, but without knowing any simpler way, I would be tempted to do some sort of encrypt/ decrypt function or at least a base64 encode or decode, or something. Your payment script is presumably not visible in the browser, so you could have it decrypt your credentials from the post data.