I notice there's an exposed className prop in the FormComponent, but I'm not able to read the Typescript enough to understand how it all works. Is there a way to drop in custom styles? I tried overriding the class names generated by Styled Components, but the buildpack I'm using defaults to the old style.

Data is flowing between authorize.net and my react app, and I receive success message, but the card is never actually charged. Here is my FormContainer:

<FormContainer
environment="production"
onError={onErrorHandler}
onSuccess={onSuccessHandler}
amount={1}
component={FormComponent}
clientKey={clientKey}
apiLoginId={apiLoginId}

Two requests are sent to Authorize.net. The first is an empty OPTIONS request which comes back with "Error reading JToken from JsonReader. Path '', line 0, position 0."

The second request is a POST request and contains the card data which returns a resultCode of "OK" and a message of "Successful."

Is there another option I need to pass to get this to work?

Is there a way to prevent fraud or is that done on the backend? I'm new to this process so I'm still understanding how it all works.

Is this module essentially just running a "pre-authorization" and the rest of it gets sent to the server for final charge? Is that how the process works?

Should I have the user add their card, store the opaqueData object returned and post both the opaqueData and address information to the server for processing with Authorize.net's API, then have it do AVS that way?

Apologies in advance, but I'm trying to wrap my head around the whole process.

Thanks!

Can we remove the default FormComponent button, and trigger the card submission ourselves?

In our case, Payment form is a part of another form, and Pay button is triggering the form submission. Or do I need to create a custom payment form for this?

I want to control the error message for card.

Since a library is only as good as its documentation,
let's clearly document how to use <AcceptHosted /> and all its different props together.

Is there any way to handle the recurring payment using the library?

https://developer.authorize.net/api/reference/index.html#recurring-billing

is this example showing the hosted form of accept.js?

Sandbox form token generator

URL

https://us-central1-react-authorize-net.cloudfunctions.net/get-form-token

Response

It should be valid JSON of the shape {token: "kgkgl323..."}

Storybook

https://storage.googleapis.com/react-authorize-net/index.html

This is a static export of the project's Storybook.
It is purposely hosted under the same place as #16 to properly show stories for .

Apologies if this is a newbie question but I'm new to react so maybe I don't have something configured correctly, but I'm having trouble getting this component to load properly. I'm currently running React 16.9.0 and NextJS 9.0.3 and the component loads fine if I navigate to the page where the component is, but if I'm already on that page and I click refresh in my browser, I have Webpack errors:

SyntaxError: Unexpected identifier
Module._compile
internal/modules/cjs/loader.js:703:23
Module._extensions..js
internal/modules/cjs/loader.js:770:10
Module.load
internal/modules/cjs/loader.js:628:32
Function.Module._load
internal/modules/cjs/loader.js:555:12

Module.require
internal/modules/cjs/loader.js:666:19
require
internal/modules/cjs/helpers.js:16:16
react-authorize-net
webpack:/external "react-authorize-net":1

__webpack_require__
./webpack/bootstrap:21

... (and so forth)

I'm not having this problem anywhere else on the site. Is this something possibly with my Webpack config with NextJS?

Is it possible to create subscriptions, cancel them and change the preferred payment method once is set using this library? Or is it only for one time payments?

Hi - thank you for this library, Accept.js is a pain to implement :)

In FormContainer submitHandler it expects expDate to be an array but since I have linked it to an input field my event.target.value is a string value. The original code sends a single digit month and year to auth.net which fails validation.

My workaround is below - is this something to be fixed or do I need to adjust how I'm handling my input?

submitHandler(): Promise<Accept.Response> {
    const authData = {
      apiLoginID: this.props.apiLoginId,
      clientKey: this.props.clientKey
    }
    const cardData = {
      cardCode: this.state.values.cardCode,
      cardNumber: this.state.values.cardNumber,
      month: **this.state.values.expDate.split("/")[0],**
      year: **this.state.values.expDate.split("/")[1]**
    }

Payments are not actually being saved to the environment.

There is no use of TransactionId which is needed to save the payments

I'm getting this error after I install the component.

I'm using CRA, and I'm not sure if this is caused by Next.js, since the example app works for me.

This is the log:

Module._compile
internal/modules/cjs/loader.js:892:18
Module._extensions..js
internal/modules/cjs/loader.js:973:10
Module.load
internal/modules/cjs/loader.js:812:32
Function.Module._load
internal/modules/cjs/loader.js:724:14
Module.require
internal/modules/cjs/loader.js:849:19
require
internal/modules/cjs/helpers.js:74:18
react-authorize-net
webpack:/external "react-authorize-net":1

> 1 | module.exports = require("react-authorize-net");


View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 | 	modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 | 	threw = false;
  23 | } finally {
  24 | 	if(threw) delete installedModules[moduleId];

Using my sandbox creds, I am able to create transactions in my sandbox using other Authorize.net API Calls (API LIVE in Authorize.net Developer and the NODE Payment Transaction). With this app with the default creds I get this error:

{code: "E_WC_10", text: "Please provide valid apiloginid."}
{code: "E_WC-18", text: :"Client key is required."}

When I swap out the creds with those that work elsewhere
//let clientKey = process.env.REACT_APP_AUTHORIZENET_CLIENTKEY as string;
//let apiLoginId = process.env.REACT_APP_AUTHORIZENET_LOGINID as string;

const clientKey = "8896XXXXXXXXXXXX";
const apiLoginId = "675XXXXXXX";

Then I get the "User authentication failed due to invalid authentication values" error.

Finally, if I copy the creds from the .env file in react-authorize.net I don't get console error/message, I get app screen that says:
Failed to process payment.

Any guidance would be greatly appreciated

Facing the following issue while using react-authorize-net with next js

import _extends from '@babel/runtime/helpers/extends';

Please check screenshot for more details