cancel
Showing results for 
Search instead for 
Did you mean: 

Unclear basic workflow documentation - Accept.js

Where can I get examples of how to pull user payment info (from Authorize.net payment profile) using Accept.js (client side), so that said info never touches the server?

Then, how do I edit/save the payment info using Accept.js

 

Also, how do I create a new payment profile using Accept.js, again, so that the info never touches the server?

 

The documentation provided by Authorize.net is very jumbled and incomplete, with not a lot of coherence. I've read, re-read and scratched my head. Also, emailing support isn't really any help either, because all htey do is reply with cannexd responses that are links to the disjointed documentation that I've already read (and that didn't help).

 

Thank you.

jima
Regular Contributor
21 REPLIES 21

Hi @jima,

 

Accept.js is for one-time transactions. For working with payment profiles stored on the Authorize.Net side, you'd want to check out our Customer Profiles API.

 

One of the uses of the Customer Profiles API is to use the Accept Customer hosted forms to allow customers to enter their credit card details directly, never touching your server.

 

Have a look at the Customer Profiles documentation, and if there are things that are still unclear, please let us know.

Aaron
All Star

Accept.js is STILL for one-time transactions? I read, back in 2011, that it would "soon be upgraded" to eliminate that limitation. I guess that never happened?

 

I have read a lot about, and played with the Customer Profiles API as well. Same basic problems exist there too, as regards unclear documentation that is quite disjointed, with no clear process flow. This solution, as far as I understand it, isn't ideal because it doesn't seem to offer such things as pre-loading of existing payment data into payment forms (for editing), and I cannot seem to find a way to retrieve the payment data (client-side), for display into our own form, and even if I could, I'm not seeing a method to submit the edit (using my own form) that doesn't involve the data touching our server(s).

 

In part, I understand that there are a lot of potential variances to workflow, but there are at least a couple of really rudimentary/basic workflows that could be clearly walked-through, tutorial style, that would help a ton of people trying to implement.

 

Is there ANY possibility of getting a direct phone call or Skype conversation with someone who could help walk me through this?

jima
Regular Contributor

Hi @jima,

 

Accept.js has only been in existence less than a year, so I'm not sure what you might have read there. You can use the payment nonce returned from an Accept.js call in an API call to our Customer Profiles API, so maybe that's what you had seen. You can use this payment nonce in most API calls that might have previously required you to send an actual credit card number.

 

An example would be if you created your own form to manage a customer's payment profile. You can load the existing payment profile information (with masked card numbers) using our API. Then you can have the customer enter their new credit card number which you convert to a nonce using Accept.js. Then, you'd call updateCustomerPaymentProfileRequest (for example), sending this block:

    <payment>
      <opaqueData>
        <dataDescriptor>COMMON.ACCEPT.INAPP.PAYMENT</dataDescriptor>
        <dataValue>9471056021205027705001</dataValue>
      </opaqueData>  
    </payment>

instead of this block:

    <payment>
      <creditCard>
        <cardNumber>4111111111111111</cardNumber>
        <expirationDate>2026-01</expirationDate>
      </creditCard>
    </payment>

So, if that's the kind of usage you're referring to, my apologies for the misunderstanding. I'll clarify my earlier statement. Instead of saying "Accept.js is for one-time transactions", it'd be more clear to say "Accept.js is for the conversion of payment card data into a single use payment token (or 'payment nonce') that can be used in place of the card data in a subsequent request to the Authorize.Net API". So, Accept.js doesn't directly support profiles, but it doesn't directly support anything. It's just the preparatory step to get you back some data that can be used in whatever your next step is.

 

Accept.js documentation is currently in the middle of a big revamp internally, so I'll make sure that some additional text gets added clarifying that concept.

 

Our other documentation (including the Customer Profile documentation) will be getting that kind of revamp soon. We know there could be more information there, in a clearer fashion. It's a big priority of mine personally to make it happen. We just aren't able to turn it around overnight.

 

I'm happy to help walk you through all of this, but I'd prefer to do it here so that the process can be documented for anyone coming by looking for help later.

 

Let's start by describing your workflow. Are you trying to have every form for profile creation or update hosted on your site, but not have the card data hit your server? If so, you can definitely accomplish that using a combination of Accept.js and the Customer Profiles section of our API.

 

Or, are you wanting to use hosted forms on our side (like for ease of development)? That would use the "Accept Customer" forms detailed in the Customer Profiles documentation. You'd request a token with the details of what you want to do, then use that token in a form post from the customer's browser to our server. The customer's browser then loads up a form customized to what you were trying to do (create a profile, update a profile, etc.)

Aaron, thank you for your response and for your follow-up questions. I appreciate it.

 

You asked about a workflow scenario, so here's a basic starting point. In this particular example, there is no need to perform any sort of charge/authorization transaction, it simply needs to be able to populate pre-saved payment info into a form (our form), and display it to the user so that they can review it, and update it if necessary.

 

Basic use case:

User logs into the system and visits their user profile (where they have stored their payment info). In the profile section, they have the option to review and/or update their creadit card info.

 

So, given that (first) basic scenario, how can we  - using Accept.js - load the form with the pre-saved payment info so that they can review it? I understand that I can use the API to pull that info, I've done that, but doing that means the payment info (while obfuscated) touches our server, which we want to not do.

 

After loading the data into the form, how then do we update said payment data, should the user need to make changes? Through the nonce token, right?

 

Again, thanks for the assistance on this. This really seems like the most basic use scenario, but I can't seem to find any documentation for it.

jima
Regular Contributor

Another (followup) question I have is, can we use Accept.js to simply save payment information without performing a chage? Something similar to the createCustomerPaymentProfile() method that is found in the API?

Use case:

User logs into the system and visits their user profile, where they have option to save their payment info, but have not. They would now like to input their payment info and save it for future use, but they are not paying for anything at this time.

jima
Regular Contributor

@jima

 

Yes, you can use a payment nonce received from Accept.js to create a customer profile, just replace the payment object with the nonce data instead of credit card data.

 

Richard

Thanks Richard, can you provide some example of doing that?

I'm still seeing an issue with payment info still being passed through our server though. What am I missing (when relating it to the 2 use case examples I previously provided)?

jima
Regular Contributor

Use this when creating a customer profile using a payment nonce, use this block

 

    <payment>
      <opaqueData>
        <dataDescriptor>COMMON.ACCEPT.INAPP.PAYMENT</dataDescriptor>
        <dataValue>9471056021205027705001</dataValue>
      </opaqueData>  
    </payment>

instead of this block:

 

    <payment>
      <creditCard>
        <cardNumber>4111111111111111</cardNumber>
        <expirationDate>2026-01</expirationDate>
      </creditCard>
    </payment>

 Richard

That helps, but can you give a more complete example? Something a little less disjointed? I mean, that's literally the exact same code snippet that was provided earlier in this very thread.

jima
Regular Contributor