j-em / react-authorize-net Goto Github PK
View Code? Open in Web Editor NEWAuthorize.net integration for React
License: MIT License
Authorize.net integration for React
License: MIT License
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?
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?
https://us-central1-react-authorize-net.cloudfunctions.net/get-form-token
It should be valid JSON of the shape {token: "kgkgl323..."}
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.