Pre-Fill Accept.js fields

[rob]

Sorry if this has been asked but I couldn't find it by Googling and the forum was changing the search "accept.js prefill" to "accept.PS refill" ;)

Can I pre-fill first & last name and the zip code field(s)?  We already collect that and don't want to have the customer re-enter it.  I'm looking at the hosted Accept.js form.  TIA

[NexusSoftware]

Hello @rob, 

Yes, prefilling the form for Accept.js is very simple. Just pre-populate the form fields by dynamically generating the page or you can make an Ajax request to retrieve the values based on a criteria, such as customer ID.

[rob]

Thank you @NexusSoftware! Can you confirm this works for "Accept.js *Hosted*" (link below)?

https://developer.authorize.net/api/reference/features/acceptjs.html#Integrating_the_Hosted_Payment_...

I assume for security / PCI that I don't have access to the form elements of the iframe.

Stripe has a version of this where you pass the pre-filled fields via the form itself similar to how `data-acceptUIFormBtnTxt` works (https://stripe.com/docs/legacy-checkout#integration-simple-options).

Thank you!

[NexusSoftware]

Yes, you can pass all of the same fields with an Accept nonce/token that you can with a credit card. When sending an Accept nonce/token, you can use any of the fields specified in the API Reference: Create an Accept Payment Transaction.

When you have the address fields set to display in the form, you can pre-populate them in your token request. If the fields are not set to display, any address information sent in the token request is discarded.

[rob]

@NexusSoftwareThanks again.  I'm not sure if we're on the same page, though.  Our current flow is:

1. customer picks item
2. adds to cart
3. goes to order detail
4. fills out name, email, zip (other details... etc)
5. clicks "Pay" button
6. Accept.js Model opens
7. Then they have to re-fill name, email, zip even though they had just entered it.

That last step (7) is the one I'd like to avoid.  I understand I can pass relevant customer details to the create payment request endpoint.  Thanks again.

[NexusSoftware · Accepted solution]

You have your payment form, such as: Sample form (nexwebhost.com),

where you can pre-populate the shipping or billing address information. These could be read only or hidden form fields. In the button parameters you would have: 

data-billingAddressOptions='{"show":false, "required":false}'
which would prevent the address fields from being shown on the credit card iframe form.

Once the pay button is clicked, the form data, including the address information is then sent along with the token request to Authorize.net's request.api, which returns the payment nonce (token) and any additional data you sent(such as the address information) to your payment processing script: 

dataValue: eyJjb2RlIjoiNTBfMl8wNjAwEB...
dataDescriptor: COMMON.ACCEPT.INAPP.PAYMENT
firstName: Thomas
lastName: Bayles
address: 12 Main Street
city: Pecan Springs
state: TX
zip: 4462

Then your payment processing script would post a createTransactionRequest with the token in place of the card data and the relevant address information.

[rob]

@NexusSoftwareI understand what you were saying now.  The part I wasn't getting was you don't pre-fill any fields you disable them.  So the key was this:

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

I sort of assumed the zip was needed in the tokenization request for AVS matches but I guess that happens downstream (in createTransactionRequest)

I appreciate you taking the time!  Thank you and have a great weekend!

[NexusSoftware]

If you use the hosted payment information form's postal (ZIP) code field, the Accept.js nonce will include the postal code, in which case the nonce's postal code will be used in Address Verification Service (AVS) checks. Optionally, you can pass the nonce along with the customer's billing address in your createTransactionRequest API call, in which case the postal code included in the API call will be used in AVS checks instead. For AVS checks, the postal code used with createTransactionRequest takes precedence over the value in the nonce.

Thank you. Have a great weekend.