authorizenet / accept-sample-app Goto Github PK

index.php attempts to start the PHP session on line 5 after headers and three lines of output, which throws a PHP Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/public_html/accept/index.php:4) in /home/public_html/accept/index.php on line 5

Hi

What should be the production URL for the below sandbox URL
https://test.authorize.net/customer/

Looks very exciting. It would be worth putting a link in the readme to the product page or documentation pages on authorize.net.

I'm attempting use the AcceptUI.js hosted form by copying and pasting the HTML code block provided by Authorize.net. The form relies on three variables to connect to an account: data-apiLoginID, data-clientKey, and an attribute in the hosted form called action, for which it reads action="https://YourServer/PathToExistingPaymentProcessingScript". I'm not sure what piece of information belongs there, and it's preventing me from using the form. Does anybody know what I should be doing here?!? Thanks in advance!

I like this plugin, very simple and it does what I want.

I have it display an invoice field and an amount field and those values get sent to the authorize.net page for processing.

Ideally I'd like to figure out a way to pre-fill those invoice values and amounts with a URL link, something like ?amount=333.33&invoice=12345 but that might not be possible.

if that is not possible, is there a way to force the amount field to be a valid number? currently it seems if I put in something like $123.50 and click "Make a payment" it kicks that value out and puts in the default value from the WP admin page. I can absolutely see someone not noticing that and paying the wrong amount.

what do you think?

thanks in advance,
Adam

I'm not able to run this sample app because jstest.authorize.net isn't serving AcceptCore.js. This is requested directly in this Sample App, but it's also requested within the sandbox script (which is being served, strangely) that's suggested on this page.

XMLHttpRequest cannot load https://jstest.authorize.net/v1/AcceptCore.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://authorize.dev' is therefore not allowed access.

Accept.js documentation is here: https://developer.authorize.net/api/reference/features/acceptjs.html#Usage_With_Your_Own_Payment_Form

Under the section: INTERCEPTING THE FORM SUBMISSION you present an example that explains how to implement sending credit card details to Authorize.net so that they are not sent to the merchant server. This claims to achieve PCI compliance.

<form id="paymentForm"
    method="POST"
    action="https://YourServer/PathToExistingPaymentProcessingScript">
    <input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber"/> <br><br>
    <input type="text" name="expMonth" id="expMonth" placeholder="expMonth"/> <br><br>
    <input type="text" name="expYear" id="expYear" placeholder="expYear"/> <br><br>
    <input type="text" name="cardCode" id="cardCode" placeholder="cardCode"/> <br><br>
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
    <button>Pay</button>
</form>

Consider the HTML5 standard behavior for buttons https://www.w3.org/TR/2017/REC-html51-20171003/sec-forms.html#element-attrdef-button-type the default behavior for buttons is to submit the form.

The Authorize.net implementation guide only states:

For our sample HTML payment form above, we would replace line number 10 with the following. The sendPaymentDataToAnet() method will be defined in the next section.

This is insufficient. You should also specify that the attribute type="button" MUST be added.

As current, an implementation which follows your instructions as above will violate PCI since it may send payment details to the merchant. Also, this may be difficult to diagnose because you will only notice with clients that have javascript turned off.

This repo is a mess to navigate, there are examples of many different things. It would help if the repo was better organized, and if the examples were as independent and minimal as possible.

I have gotten the form to display in an iframe on my page following README-AcceptHosted.md

The communicator seems to be working. I have a console.log printing any time onmessage fires.

If I make the browser window wide or narrow it does not fire resizeWindow (bug)

If I start with a wide window, then drag to a narrow window, the submit button is clipped off. I can, at that point, click on the alternative payment method (i.e. toggle between credit card or bank account) and it triggers a resizeWindow event. This then shows the button. But the simple act of resizing the window does not seem to be triggering an event.

Sometimes users will maximize or resize their window, and I can't seem to figure out a way to handle that gracefully without being able to access the height of the hosted form.

1. Why do I need to have a customer ID number just to see the checkout page?

2. What is the customer ID number?

I would like to set things like the user's name and the invoice number. Is it possible to do this with the secureData that is passed to Accept.dispatchData?

var secureData = {},
authData = {},
cardData = {};

cardData.cardNumber = document.getElementById('CARDNUMBER_ID').value;
cardData.month = document.getElementById('EXPIRY_MONTH_ID').value;
cardData.year = document.getElementById('EXPIRY_YEAR_ID').value;
cardData.zip  = document.getElementById('ZIP_CODE').value;
cardData.cardCode  = document.getElementById('CARD_CODE').value;
   
authData.clientKey = 'xxx';
authData.apiLoginID = 'xxx';

secureData.cardData = cardData;
secureData.authData = authData;

/* Something like this? */
secureData.userFields = {
  jobNumber: document.getElementById('JOB_NUMBER').value
};

/* Or this? */
secureData.jobNumber = document.getElementById('JOB_NUMBER').value

I got the sample up and running by doing the following:
I created a sandbox account on authorize.net and set the API_LOGIN_ID and TRANSACTION_KEY in the environment. Then I added a profile using the Customer Information Manage on sandbox.authorize.net.
I'm running on Windows 10, php 5.6. I'm running using the php built in webserver: php -S localhost:8000
(It would have been nice to have more explicit step by step instructions for setting up an account, test profile, and running php)

When I click the Payment tab, fill out the info with a test card then click Save. I always get the error: "Address and Zip are required"

I've tried adding a shipping address which works, but then going back and adding a payment method results in the same error.

Going to Profile Tab and then Add a New Payment Method also always results in the same error

I have the site redirecting to the hosted Customer Profile page, but then there is no button to redirect back to my previous page. This is when testing against the sandbox. Please let me know what might be the issue. Thank you!

Here is an associated Stack Overflow question.

If the customer has a payment profile already saved to their account, is there suppose to be an option to select that existing payment profile to make a payment?
I have a example customer with a credit card saved to their account and I don't see where I can select that CC to make a payment. I have to enter the CC info for each payment.

I am trying to implement authorize.net into a website I am building. It has not been pleasant. I initially was using the AIM/SIM and it gave me an error saying it could not find a certain file that was not included anywhere in the github download. This issue was previously brought up in the forum but did not have any corrective answers provided. When I did an online chat the rep could offer no help but directed to the JScaller and accept Hosted stating that this was your new implementation. I uploaded your sample so that I could make heads or tails of what i needed to extract from the code and what belonged to the multiple other stuff and after removing all the login stuff from the code seeings that no matter what was used for the login id it said login invalid, the sample does not run. I put my card number in and the only thing that happens is the button opaques and says processing and doesn't go anywhere. The people I am developing the website for are now becoming irate because it has been a number of days since I told them all I needed to do was implement the payment gateway, and here we are. Hands tied. Some useable integration guidelines would be great. Thanks.

I'd love someday to get a few Apple Pay improvements:

• Review for compliance with everything in the Apple interface and style guidelines.
• Error handling to display appropriate messages in cases where Apple Pay can't be used.
• When used on a system that's capable of Apple Pay but isn't currently set up, display the "Set up Apple Pay" button.

Not high priority, but thought I'd log an issue as a reminder for me to look into these someday.

Hello,

I have downloaded and setup the sample code. When I enter the details and hit "Pay" button it shows "Processing..." and no further response is displayed on screen, whereas I can see the response in Network tab returned by Authorize.net

Can anyone help with it.

It's not clear if this repository accepts contributions or not, and of what type.

A CONTRIBUTING.md file would resolve this ambiguity by explaining if the repo is open to contributors.

On my Linux computer, I have a local HTTPS server set up with Apache 2.4, but the sample app does not look right.

In Mozilla Firefox, the background is tiled, and there is raw PHP code plastered over the page:

In Google Chrome, it doesn't even render anything and instead simply displays the index.php file as text:

It won't let me just run index.php, is there a way to circumvent this?

According to your documentation:

"Accept.js contains built-in data type validation for these fields. While Accept.js validates the data, it doesn’t do any authorization of the card number or any check to see if the expiration date, postal code, or card code are correct for that card. Those steps will happen later in the process when you submit the payment nonce as part of a transaction request."
SOURCE: https://developer.authorize.net/api/reference/features/acceptjs.html#Integrating_Accept.js_into_Your_Payment_Form

This becomes a problem on subscriptions. On payments, you see an immediate failure right away when that Accept.js nonce tries to execute a charge. Not so on subscriptions, at least immediately like payments. So, I can setup a subscription with a bad expiration date and bad CVV/CVC code, and if my receipt does something like issue a software license key then, then my customer can use the product. But then, when that first charge happens on the 20th of the month, and fails, a webhook fires and tells my license server that the payment failed and thus the software license should be cancelled. Okay, fine, but there's a whole lot of confusion there because a customer will tell us that they paid, that their card was accepted, but their software product became unlicensed for some unknown reason. Sure, our call center reps can chase the transaction down and see that their card failed. However, the customer will ask why the card was accepted in the first place if it had a bad expiration date or CVV/CVC code on it.

I propose that you change Accept.js so that you check card expirations and CVV/CVC codes as well.

Sorry if this is not the right place to open an issue. I didn't find the accept.js repo (don't even know if it exists)

We are using Ionic framework which lets you write multi platform apps using html/css/js. I would like to include accept.js in this types of applications, the problem though, is that accept.js requires a https connection in which the form is being passed to the customer, however the form will be already in the client's device, the application itself will contain it. So when trying to use accept.js it throws the expected error:

E_WC_02: A HTTPS connection is required.

Would it be possible for accept.js to let non-https served pages make payments, after all, if I didn't misunderstood, the real encryption is needed when contacting authorize.net servers, which I suppose accept.js is already ensuring.

Thanks in advance.

Transaction fails with error code 153.
Here var_dump SimpleXMLElement object with payment request:

object(SimpleXMLElement)#659 (2) {
["merchantAuthentication"]=>
object(SimpleXMLElement)#345 (2) {
["name"]=>
string(9) "3x27URbWp"
["transactionKey"]=>
string(16) "672HMz5WP6czF26K"
}
["transactionRequest"]=>
object(SimpleXMLElement)#698 (4) {
["transactionType"]=>
string(22) "authCaptureTransaction"
["amount"]=>
string(4) "1.00"
["currencyCode"]=>
string(3) "USD"
["payment"]=>
object(SimpleXMLElement)#339 (1) {
["opaqueData"]=>
object(SimpleXMLElement)#692 (2) {
["dataDescriptor"]=>
string(26) "COMMON.APPLE.INAPP.PAYMENT"
["dataValue"]=>
string(4946) "eyJkYXRhIjoieUR1....oiRUNfdjEifQ"
}
}
}
}

And json encoded response

"{"messages":{"resultCode":"Error","message":{"code":"E00027","text":"The transaction was unsuccessful."}},"transactionResponse":{"responseCode":"3","authCode":{},"avsResultCode":"P","cvvResultCode":{},"cavvResultCode":{},"transId":"0","refTransID":{},"transHash":"8FE725322ECC38B5D6B566144CCCF45A","testRequest":"0","accountNumber":{},"accountType":{},"errors":{"error":{"errorCode":"153","errorText":"There was an error processing the payment data. Unable to decrypt data."}},"transHashSha2":{}}}"

Why transaction may fail?

Receiving this error as a final message:

{"messages":{"resultCode":"Error","message":{"code":"E00116","text":"OTS Token access violation"}},"transactionResponse":{}}

Any thoughts on how I might fix my setup are appreciated.

Researched Clues to solve this problem

• Verified api login id and transaction key match sandbox account
• Verified signature key generated for sandbox account (though have not found a place to provide this to the sample app)

Setup

• Sample App installed on a VM running ubuntu1204 server with php_curl enabled
• self-signed SSL cert on VM, browser ignoring security setting warning
• apache redirect directive sends all http requests to https on the VM
• api login id and transacton id placed in httpd.conf using setenv directive
• PHP 5.3, Apache 2.2.22
• created a single Customer ID at the sandbox
• the Customer Profile ID from the sandbox passes sample app login

Other

• sample app correctly pulls credit card number for customer profile (4111111111111111) when presenting payment screen;
• have successfully used the sample app to change credit card expiry details; changes appear at sandbox web site, so connectivity looks good;

DevTools Screen Grab

Thanks,
Cary

I'm encountering issues integrating a Salesforce Apex controller with a Lightning Web Component to process payments using Authorize.Net.

Errors:

"Missing or invalid token": When I click "Create Token," I receive this error, preventing me from redirecting to the Authorize.Net payment page.

"Cannot read properties of null (reading 'billTo')": This error occurs in the LWC's JavaScript (main.bundle.js). It suggests an issue with how the billing address data is being sent to Authorize.Net.

Environment:

Salesforce Org Type: [Sandbox]

Steps to Reproduce:

Set up Authorize.Net Sandbox:
    Create a sandbox account on https://developer.authorize.net/
    Create a customer profile in the Customer Information Manager.
Deploy Code:
    Deploy the Apex class and LWC to your Salesforce org.
Access the LWC:
    Go to the component's URL within the Salesforce UI.
Trigger the Error:
    Click the "Create Token" button.

Observations:

I've verified my API_LOGIN_ID and TRANSACTION_KEY in the Apex controller.

Request:

Troubleshooting Guidance: Please help identify the root cause of the "Missing or invalid token" and "Cannot read properties of null" errors and provide solutions.
Best Practices: Are there any best practices or optimizations for this type of integration?

It would be nice if the repo used as little PHP as possible, instead replacing that functionality with JavaScript.

I reported these errors here but hoping maybe this is a more active place to get help:

https://community.developer.authorize.net/t5/Integration-and-Testing/Using-accept-js-in-a-single-page-app-react-js/m-p/60893

Any chance someone knows how to solve the issues in that forum post?

If I already know the customers billing address info, how can I pass it along to the Payment form so the end user does not have to fill it in?

does not work for the login page. Am i missing something?

is there any workaround for localhost when working with hosted form or payment button.
i have a already developed a plugin using SIM module but now i wanted to upgrade this plugin to latest APIs.
i dont have an ssl enable website to test kindly share a workaround so that i can update this plugin working locally.

It would be helpful if this Readme contained detailed instructions on how to implement Accept Customer. Thanks

We have issues running the iFrame option so in the meantime we were looking at the Redirect option. It seems to be working, but when returning to the returnURL we do not get any receipt / transactionID back. Our goal is to eventually get the authorization code and store in our database so we can offer our customers the option to CAPTURE the funds.
How do we get the transId or authorization code after the redirect?
The only way to do something like this is to use the getUnsettledTransactionListRequest and scan trough all transactions looking for an invoice number (this is our unique ID) - and then we pull the info. It MUST be a better way of doing this. Something like: getUnsettledTransactionbyInvoiceNumber , right?

Thanks.

Can you please explain how you generated the PEM file for merchant authentication?
apple-pay-test-cert.pem

I have tried getting my CSR file from auth.net and uploaded it in the apple developer account to get a .cer file. But that .cer file does not have a private key. How did you get a cert with a private key?

Thanks so much for your help.
@brianmc

I'm getting the following error on PHP 7 when creating a transaction via the API

simplexml_load_string(): namespace warning : xmlns: URI AnetApi/xml/v1/schema/AnetApiSchema.xsd is not absolute

The XML namespace in the request is clearly not absolute in createTransactionWithProfile.php:
xmlns="AnetApi/xml/v1/schema/AnetApiSchema.xsd"

Seems to be the same issue as referenced in the SDK here: AuthorizeNet/sdk-php#135

When will we be able to use accept.js (or another library) in order to capture a payment nonce for bank accounts?

Is there a required library that I need to install or something?

It seems if you call the acceptJSCaller() function and if you try to serialize the form data into an object within the response handler it triggers something with Accept.js which causes it to run the response handler a second which then triggers an error with the following error code: E_WC_14:Accept.js encryption failed.

It appears as soon as I run the jquery serializeObject method on my form object Accept.js intercepts that call or something and then tries to run my responsehandler a second time which causes it to fail since the CC info is no longer present.

Here's my log output:

responseHandler
acceptJSCaller.js:84 COMMON.ACCEPT.INAPP.PAYMENT
acceptJSCaller.js:85 ==dataValue==
acceptJSCaller.js:40 createTransact()
acceptJSCaller.js:93 Clearing CC info...
acceptJSCaller.js:50 Amount = 150.00
acceptJSCaller.js:54 serialize form...
acceptJSCaller.js:76 responseHandler
acceptJSCaller.js:80 E_WC_14:Accept.js encryption failed.

As you can see, the console.log statement after the serializeObject call doesn't even run.

Here's the code I am currently using:

// The result of the transaction processing will be returned from the processing script as a JSON object. Parse the object to determine success or failure, and alert the user.
function messageFunc(msg)
{
    try{
        responseObj=JSON.parse(msg);
        if(responseObj.transactionResponse.responseCode == '1'){
            message="Transaction Successful!<br>Transaction ID: "+responseObj.transactionResponse.transId;
        } else {
            message="Transaction Unsuccessful.";//+responseObj.messages.message[0].text;

            if(responseObj.transactionResponse.errors!=null)//to do: take care of errors[1] array being parsed into single object
            {
                message+=responseObj.transactionResponse.errors.error.errorText;
            }
            /*else if(responseObj.transactionResponse.errors[0]!=null)
            {
                for(i=0;i<responseObj.transactionResponse.errors.length;i++)
                {
                    message+="<br>";
                    message+=responseObj.transactionResponse.errors[i].error.errorText;
                }
            }*/
            if(responseObj.transactionResponse.transId!=null)
            {
                message+="<br>";
                message+=("Transaction ID: "+responseObj.transactionResponse.transId)
            }
        }
    }
    catch(error){
        console.log("Couldn't parse result string");
        message="Error.";
    }

    alert(message);
}

// Do an AJAX call to submit the transaction data and the payment none to a separate PHP page to do the actual transaction processing.
function createTransact(dataObj) {
    console.log('createTransact()');

    paymentFormUpdate();

    // Set Amount for demo purposes if not set by callers form
    var myAmt = document.querySelector('#authnet-form [type="hidden"][name="amount"]').value;

    if(!myAmt) {
        throw new Error('Missing amount.');
    }
    console.log('Amount = '+myAmt);

    var $form = $('#authnet-form');

    console.log('serialize form...')
    console.log($form.serializeObject())
    console.log('after serialize')

    $.ajax({
        url: '/payment/submit',
        data: {amount: myAmt},
        method: 'POST',
        timeout: 5000
    }).done(function(data){
        console.log('Success');
    }).fail(function(){
        console.log('Error');
    }).always(function(textStatus){
        console.log(textStatus);
        messageFunc(textStatus);
    })
}

// Process the response from Authorize.Net to retrieve the two elements of the payment nonce.
// If the data looks correct, record the OpaqueData to the console and call the transaction processing function.
function  responseHandler(response) {
    console.log('responseHandler')

    if (response.messages.resultCode === 'Error') {
        for (var i = 0; i < response.messages.message.length; i++) {
            console.log(response.messages.message[i].code + ':' + response.messages.message[i].text);
        }
        alert("acceptJS library error!")
    } else {
        console.log(response.opaqueData.dataDescriptor);
        console.log(response.opaqueData.dataValue);

        createTransact(response.opaqueData);
    }
}

function paymentFormUpdate()
{
    console.log('Clearing CC info...');

    document.getElementById('credit-card-number').value = '';
    document.getElementById('credit-card-cvv').value = '';
    document.getElementById('credit-card-expiry-date').value = '';
}

function acceptJSCaller()
{
    var secureData = {}, authData = {}, cardData = {};

    // Extract the card number and expiration date.
    cardData.cardNumber  =  document.getElementById('credit-card-number').value;
    cardData.cardCode = document.getElementById('credit-card-cvv').value;

    var expiryDate = document.getElementById('credit-card-expiry-date').value;
    expiryDate = (expiryDate && expiryDate.length === 4) ? expiryDate.match(/.{1,2}/g) : [];

    cardData.month  =  expiryDate[0] || '';
    cardData.year  =  expiryDate[1] || '';

    secureData.cardData  =  cardData;

    // The Authorize.Net Client Key is used in place of the traditional Transaction Key. The Transaction Key
    // is a shared secret and must never be exposed. The Client Key is a public key suitable for use where
    // someone outside the merchant might see it.

    authData.clientKey  =  '==REDACTED==';
    authData.apiLoginID  =  '==REDACTED==';
    secureData.authData  =  authData;

    // Pass the card number and expiration date to Accept.js for submission to Authorize.Net.
    Accept.dispatchData(secureData, 'responseHandler');
}

I'm just starting to play with the sample and trying to get it to work. When I click Hosted Pay I get a Make Payment box that says: Missing or invalid token.
I created a sandbox account on authorize.net and set the API_LOGIN_ID and TRANSACTION_KEY in the environment. Then I added a profile using the Customer Information Manage on sandbox.authorize.net.
I'm running on Windows 10, php 5.6. I'm running using the php built in webserver: php -S localhost:8000
(It would have been nice to have more explicit step by step instructions for setting up an account, test profile, and running php)

I'm getting this error from php:
/getHostedPaymentForm.php - Call to undefined function curPageURL() in accept-sample-app-master\getHostedPaymentForm.php on line 112

I fixed that error, but still get the same result.

The Pay button doesn't work, but I think it's because it requires to be https

The Profile, Payment and Shipping Tabs do bring up info from my test customer. So the API_LOGIN_ID and TRANSACTION_KEY appear to be correct.

But trying to add a new payment method always says "Address and Zip are required" I will add a seperate issue for this.

Hi Guys,

Im using the AcceptHosted solution on our application.

The question that I have is after the payment has successful processed and I get the response, the user should not receive an email form authorize with the invoice or receipt for the payment?

That is something I will need to configure? Or I have to doit my self?

Dose authorize have that service?

Thanks for your help!