Create customer payment profile form reactjs

[shanbool]

I’m working on integrating Authorize.Net in a React.js application and would like guidance on securely creating a customer payment profile using Accept.js to handle card details without them hitting my server.

My requirements:

1. A form in React that collects card information (number, expiration date, CVV) and leverages Accept.js to obtain an opaque data CustomerPaymentProfileId .
2. Sending thisCustomerPaymentProfileId to my backend.

Questions:

1. Could you provide any best practices or example code on setting up Accept.js in a React component?
2. Once the opaque data token is received in the frontend, how should it be processed in the backend to safely create a customer payment profile?
3. Are there any specific configurations or libraries you recommend for a smooth Accept.js integration in a React environment?

[marcos12342]

You’ll want to use Accept.js just to grab the opaqueData (it gives you dataDescriptor + dataValue, not the paymentProfileId directly). In React, load the Accept.js script, call Accept.dispatchData with your API Login ID + Client Key, and then send the opaqueData to your backend.

On the backend, use the Authorize.Net SDK (createCustomerProfile or createCustomerPaymentProfile) and pass that opaqueData—this is where you actually get the customerProfileId / customerPaymentProfileId.

Key point: card data never touches your server, only the token does. For PCI scope reasons, stick with this flow or look at Accept Hosted if you want it even simpler.