topic Re: Pre-Fill Accept.js fields in Integration and Testing

Pre-Fill Accept.js fields

rob — Thu, 11 Feb 2021 21:24:35 GMT

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

Re: Pre-Fill Accept.js fields

NexusSoftware — Fri, 12 Feb 2021 14:12:56 GMT

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.

Re: Pre-Fill Accept.js fields

rob — Fri, 12 Feb 2021 14:25:03 GMT

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_Information_Form

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!

Re: Pre-Fill Accept.js fields

NexusSoftware — Fri, 12 Feb 2021 15:10:40 GMT

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.

Re: Pre-Fill Accept.js fields

rob — Fri, 12 Feb 2021 16:10:09 GMT

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

customer picks item
adds to cart
goes to order detail
fills out name, email, zip (other details... etc)
clicks "Pay" button
Accept.js Model opens
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.

Re: Pre-Fill Accept.js fields

NexusSoftware — Fri, 12 Feb 2021 22:49:34 GMT

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.

Re: Pre-Fill Accept.js fields

rob — Fri, 12 Feb 2021 23:12:52 GMT

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

Re: Pre-Fill Accept.js fields

NexusSoftware — Fri, 12 Feb 2021 23:26:09 GMT

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.