brendanbond / react-acceptjs Goto Github PK

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}
  />

Peer dependencies only cover react 17. Is there a plan to allow react 18?

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..

@brendanbond the latest version needs to be publish on npm, so I can update version and start using it in the project.

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.

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 ?

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!