brendanbond / react-acceptjs Goto Github PK
View Code? Open in Web Editor NEWA modern React implementation of the Authorize.net platform's Accept.JS library for easily submitting payments to the Authorize.net platform.
A modern React implementation of the Authorize.net platform's Accept.JS library for easily submitting payments to the Authorize.net platform.
@brendanbond the latest version needs to be publish on npm, so I can update version and start using it in the project.
Is it possible to have the embedded iFrame of AcceptHosted without having a button on which the user needs to click?
We have a payment page - and it would be great if the iFrame with the embedded hosted form just came up directly in it...
I have implemented this library in Next.js app. This works fine, as a standalone page. I am having an issue, as I have 5 options in my page to select from, the problem I am having is, even if I change the selection from sidebar, the modal doesn't get updated state. I am sure this is not an issue with React implementation, as same is working with other Payment provider like Stripe and PayPal. I tried adding key to the component so it gets recreated on change, but when I add key, it stops opening modal. If I remove it, it works correctly.
<HostedForm
buttonClassName={clsx(
"use-focus-outline",
"flex grow cursor-pointer items-center",
"rounded-full xl:rounded-10",
"px-7",
"h-10 xs:h-11 xl:h-9",
"xl:min-w-[22.5rem] 3xl:min-w-[18rem]",
selectedPaymentMethod !== "paypal"
? "bg-my-purple text-white"
: "bg-[#d8d8d8] dark:bg-[#707070]"
)}
buttonText="Pay with Authorize.net"
formHeaderText="Complete your purchase"
authData={authData}
onSubmit={(response: any) => {
handleSubmit(response);
}}
environment="PRODUCTION"
key={tokenPackage}
/>
I have observed that when the HostedForm is properly working, you should see the code existing inside the body of the page when you inspect its element. In our system, we are using react with material UI and placing the HostedForm inside the material Drawer, When I close the drawer and re-open it, the on-click function of the HostedForm form does not work anymore. It seems like the functionality that adds the class="show"
to the element that makes the form appear is not working.
Peer dependencies only cover react 17. Is there a plan to allow react 18?
Always showing { code: "E_WC_07", text: "Please provide valid expiration year." } and { code: "E_WC_06", text: "Please provide valid expiration month." } errors.
Please help me.
<HostedForm authData={clientSecret}
onSubmit={handleSubmit}
errorTextStyle={{ fontSize: "12px", color: "red" }}
buttonText={t("affiliate.buyNow")}
buttonClassName={style.buy_button}
disabled={false}
onCancel={(e) => onWindowCncel(e)}
environment="SANDBOX"
/>
Onsubmit is calling handleSubmit function twice how can i prevent this issue ?
We are currently trying to use the accept hosted implementation from your lib and are failing to style it, so I wanted to generally know, what options are even possible here? What is the recommended implementation?
In point 3 you are writing:
A note on styling: a goal of this library is to invert control of the UI to the developer. Each of the <AcceptHosted /> compound compontents (<Button />, <IFrameBackdrop />, <IFrameContainer />, and <IFrame />) have both className and style object props, allowing the default styles to be overridden. At this moment, this is not recommended.
-> what is alternatively recommended from your side? The docs are missing details here..
I've got a working implementation, thanks for that!
I have a form with shipping address, billing address, payment info (via HostedForm), and then a Final Review button.
I input all the info and at the bottom I click the button generated by HostedForm.
That action opens the lightbox with the Authorize.net form, but it also renders that form near the top of the page and scrolls me up... forcing me to scroll all the way back down again to click Final Review.
How can we position the HostedForm?
Ideally, it wouldn't be a modal at all, but could be contained within a div I provide.
OR, how can I position it so that is pops up center screen at the current scroll location, and not at the top of the page?
Thanks!
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.