paypal / react-paypal-js Goto Github PK
View Code? Open in Web Editor NEWReact components for the PayPal JS SDK
Home Page: https://paypal.github.io/react-paypal-js/
License: Apache License 2.0
React components for the PayPal JS SDK
Home Page: https://paypal.github.io/react-paypal-js/
License: Apache License 2.0
How do I add installments options?
Hi,
your PayPalButtons-Component uses the type PayPalButtonsComponentProps
from https://github.com/paypal/paypal-js/blob/main/types/components/buttons.d.ts
That Type has been renamed to PayPalButtonComponentOptions
in @paypal/[email protected].
Please update the imported name. Typescript throws a cryptic error on this after npm update
-ing the dependency.
Best,
Michel
π Describe the Bug
I use Smart Button in React/NextJs for creating subscriptions. Everything works as expected, but if the user closes the Paypal popup window after having logged in already (OrderId created, onShippingChangeData called), and then attempts by clicking the Paypal button for a second time, I see the following error:
Uncaught Error: Create Subscription Api response error:
{
"name": "NOT_AUTHORIZED",
"message": "Authorization failed due to insufficient permissions.",
"debug_id": "3ba3d8fcdc9e7",
"details": [
{
"issue": "PERMISSION_DENIED",
"description": "You do not have permission to access or perform operations on this resource."
}
The popup window then opens and immediately disappears. I tried tackling this with a) calling dispatch with resetOptions in onCancel and b) reloading the react component including PayPalScriptProvider without success.
Am I missing something here? Do I somehow need to cancel the orderID at onCancel manually?
π¬ Minimal Reproduction
Create a subscription checkout with @paypal/react-paypal-js, initiate checkout, log into buyer account, close Popup window and attempt checkout for a second or third time.
π Actual Behavior
see above
π€ Expected Behavior
Ability to re-open the subscription checkout multiple times without loosing access rights
π Environment
Browser version: Chrome Version 89.0.4389.114
OS version: OSX 11.2.3
SDK version (window.paypal.version): - @paypal/react-paypal-jss
I saw that changeCurrency
was removed from the actions
. What should be used now to change the currencies?
When the PayPalButtons Component is used in a Form which is again after state change the javascript console shows an error.
`
import React from "react";
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import {PayPalButtons, PayPalScriptProvider} from "@paypal/react-paypal-js";
const ShopView = () => {
const [amount, setAmount] = React.useState('0');
const handleAlignment = (event, newAlignment) => {
if (newAlignment) {
setAmount(newAlignment);
}
};
return (<div>
<PayPalScriptProvider options={{currency: "EUR", "client-id": ".... YOUR CLIENT ID GOES HEERE... "}}>
<ToggleButtonGroup
size="small"
value={amount}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="4" aria-label="left aligned">
Amount 4 Euro
</ToggleButton>
<ToggleButton value="2" aria-label="centered">
Amount 2 Euro
</ToggleButton>
</ToggleButtonGroup>
<PayPalButtons/>
</PayPalScriptProvider>
</div>)
}
export default ShopView
`
When toggeling the the amounts an error is thrown. The error only ourres when I'm toggling fast.
Each time the paypal script gets reloaded. If I update the component state which will force a rerender before the Paypal script is loaded the error is thrown.
No Error is thrown in the JS Console
Software | Version(s) |
---|---|
react-paypal-js | 1.0.1 |
Browser | Chrome |
Operating System | MacOS |
Add any other context about the problem here.
Hello,
I'm writing this message because I'm trying to set up a payment processing via Paypal. Unfortunately, I wanted to use your library but I can't.
When I put my button in my form, it is displayed once but the next time I reload the page, it is not displayed at all as a button in the form. And nowhere else.
However, I think I have followed the README that you propose. I have created my Sandbox account and my app on paypal. I simply copied, afterwards, the client-id of my app.
Thankyou for your help,
The first time I load the page on my browser, I have the button that appears
The second time, however, the button completely disappeared from the form.
However, in the "network" field of my browser, I see the following error:
Here is the code I brought to try to implement the checkout button
<PayPalScriptProvider options={{ 'client-id': 'AQul7weTY7xqBj4Yhp6hGDnRKONiHEfKe0itCC7IrSMlK3eQzqIGoUwPb8cP7uQa-2YF4B72xXIxrRx9', }} > <PayPalButtons style={{ layout: 'horizontal' }} /> </PayPalScriptProvider>
A clear and concise description of what you expected to happen.
Software |
---|
react-paypal-js |
Safari, Mozilla Firefox, Google Chrome |
Add any other context about the problem here.
It'd be great to have a hosted fields component and support: https://developer.paypal.com/docs/business/checkout/advanced-card-payments/#
Currently, you cannot set the client-token as an option on the PayPalProvider. So even trying to write a custom component will not work.
We want to embed hosted fields
We've implemented this for the Drupal Commerce PayPal integration and are adding a headless example.
Adding table of contents in readme.md.
The idea for Adding Table of Content to Readme.md to add additional enhancement and readability to the docs file.
Down the line, if readme content increases it will be easy to hop between the docs too.
It seems that if you add the dispatch
on the useEffect
to change the currency, and it triggers 2 times fastly, it doesn't get the correct currency reliably.
We have a context, and we have a defaultCurrency
, and a selectedCurrency
, that is loaded from the server, so it initializes as GBP
(default currency), and then fastly goes to EUR
(as an example of selected currency that came from the server, on an API call)
Creates the order as GBP
Should create the order in EUR
What we did to fix this race condition was adding a check on the useEffect
, like this:
useEffect(() => {
if (selectedCurrency !== defaultCurrency) {
paypalDispatch({
type: "resetOptions",
value: {
...options,
currency: selectedCurrency,
},
});
}
}, [selectedCurrency]);
Then it works reliably.
So either we have to add it to the documentation, or create a solution for it
When following the documentation for "Defer loading" and implementing the example code in Typescript, I get a type error on the action value:
See this sandbox: https://codesandbox.io/s/react-paypal-serloadingstatus-mdkux?file=/src/Paypal.tsx
Type error
"pending" should be accepted
Software | Version(s) |
---|---|
react-paypal-js | 6.0.0 |
Update this library to use TypeScript.
Several developers have requested TypeScript types for this library. We could solve that problem in a few different ways. One way is to convert this codebase to TypeScript and include types for all publicly exported functions.
Here's a good doc about the advantages of TypeScript.
#30 - @camsjams shared some really helpful types here which would be a good starting point: https://gist.github.com/camsjams/b843637df7a30c260b341daf97a96d60
#53
The current use of PropTypes is powering the Storybook docs: https://paypal.github.io/react-paypal-js/?path=/docs/example-paypalbuttons--default. We want to continue supporting PropTypes like this with using TypeScript. That may be one of the more challenging parts of the migration.
Any objections to migrating to TypeScript?
Any volunteers to take this work up?
So, if I want to just dispatch actions, without touching the state
, I have to:
const [, paypalDispatch] = usePayPalScriptReducer();
What is very ugly, and looks like a workaround, but actually it's the only way of doing it without bugging my linter.
What if we implement it as an object? So we can have the dispatch
and the state
inside the paypal
object that we render using usePayPal
? It would be much nicer to use, like:
const paypal = usePayPal
paypal.dispatch({
type: "resetOptions",
value: {
currency: selectedCurrency,
},
})
And it would be nice to not have to pass the paypalScriptOptions
every time we dispatch an action, as it would be available on the Provider
already.
Can't handle error when there is invalid data in the form. If the user insert invalid data, like an postal code = "111111111111111111", it just shows a message in console and "onError()" is not called, if I try to .catch() in my API calls to server-side when capturing, does not work too.
In the card form, insert a zip code like: "111111111111111111", click in Continue.
console logs returns:
ppxo_inline_guest_unhandled_error
Object { handledErrors: (1) [β¦], unhandledErrors: [], inline_guest_version: "2.12.7", timestamp: 1617132129038, windowID: "36382bffb2", pageID: "5e8b1ce512", referer: "www.sandbox.paypal.com", host: "www.sandbox.paypal.com", path: "/smart/card-fields", env: "sandbox", β¦ }
beaver-logger.js:237:35
s beaver-logger.js:237
u beaver-logger.js:396
p beaver-logger.js:443
error index.js:90
H submitInlineGuestForm.js:339
value Redux
H submitInlineGuestForm.js:327
Redux 2
errorBoundaryMiddleware errorBoundaryMiddleware.js:15
ignoreNoopActionMiddleware noopActionCreator.js:25
Redux 2
r runtime.js:62
l runtime.js:296
t runtime.js:114
onError() be called, so I could manage the error and display an message showing to the user what field is wrong.
Software | Version(s) |
---|---|
react-paypal-js | 5.1.1 |
Firefox | 87.0 |
Ubuntu | 20.04.2 LTS |
Currently the Storybook examples are in JavaScript. Let's migrate them over to TypeScript files! It will be a good way to ensure the StoryBook examples are type safe.
Let's go all in on TypeScript!
We are randomly getting this error on page refresh, it's about 50/50 if it works on each page load.
The error message makes no sense nor is it helpful, so we have no idea where to even look to diagnose the issue.
When the buttons first render, clicking on them many times will result in several popup windows opening. The issue seems to go away after second render is complete. The problem is more noticeable on a slower internet connection.
Go to https://paypal.github.io/react-paypal-js/iframe.html?id=example-paypalbuttons--default&args=&viewMode=story and repeatedly click on the buttons as soon as they render. It will open up many popup windows.
Repeatedly click on the buttons as soon as they render results in many popup windows opening.
Repeatedly click on the buttons as soon as they render results in only one popup window opening.
Happens in Chrome and Safari.
It's unclear what the root cause is. I tested react-paypal-js@3 locally and see the same issue π€
@Seavenly had a great suggestion to combine usePayPalScriptDispatch
and usePayPalScriptState
into a common usePayPalReducer
. This seems to align nicely with the useReducer api.
Here is an example: sanboxcode
I added 2 buttons (single order and subscription order) but just one works, the dispatch method to reset the options don't look like a good solution in this case, this is possible? could be nice to have this for some cases.
Thanks.
When rendering the PayPal Button, we only want to render it when it's eligible. For the use case when it's not eligible, we currently render an empty div element. The internet has enough divs already. Let's render null
instead by default for this use case.
Avoid rendering unnecessary markup. Also, enable devs to show custom content when the buttons are unable to render due to ineligibility.
<PayPalButton fundingSource={FUNDING.VENMO}>
{/* this Alert component is just an example. It's not part of react-paypal-js */}
<Alert message={ `You are not eligible for {FUNDING.VENMO}` } />
</PayPalButton>
We'd need to update this code to use the children prop and render that and if there are no children default to null: https://github.com/paypal/react-paypal-js/blob/main/src/components/PayPalButtons.tsx#L134-L140.
The button gets rendered with a top-level div with no attributes. There's no direct way to either place a class name or otherwise style the parent div.
Install the React PP buttons plugin and try setting a custom button width.
Impossible to specify a class name or otherwise style the top-level div.
An explicit way to set a class name or style the top-level div with tools such as styled components and the like.
Software | Version(s) |
---|---|
react-paypal-js | 3.0.3 |
Browser | Chrome |
Operating System | iOS |
Add any other context about the problem here.
The library should expose the failing state of the SDK script
There's currently no indication in case the SDK script fails to load for any reason so there's no way for the application to figure out that the script has failed
This information would be useful to have the ability to notify the app user that they should take some actions like reloading the page or checking their network connection
if the script fails to load loadScript rejects but
PayPalScriptProvider does not catch the rejected Promise
react-paypal-js/src/ScriptContext.js
Lines 59 to 62 in d0a0f38
We can replace isLoaded
state with a loading/loaded/error
state. This would be a breaking change so we can first introduce a new field while keeping isLoaded
for the backward compatibility
If you're interested I can take a stab at this
The popup windows just close without showing an error
On my react component I have:
const [internalOrderNumber, setinternalOrderNumber] = useState(null);
then I have a method handleCreateOrder to manage the create order on my server-side:
const handleCreateOrder = async() => {
const body = {};
const { error, result } = await createOrder(body);
setinternalOrderNumber(result.internalOrderNumber); // My own order number
return result.orderID; //paypal order number
}
If I use the setinternalOrderNumber(result.internalOrderNumber);
the popup just banished without message
But if I remove the setinternalOrderNumber(result.internalOrderNumber);
line it works like be expected.
GatsbyJS
I have client-side and server-side code to perform the payments, in this case, is just the client-side.
Can I manage states from the Button methods? if is possible how can I handle that? thanks in advance for all the help.
I canβt seem to import some of the types used internally in the react-paypal-js definitions and I canβt seem to work out why. What I would like to do is:
const onApprove = (data: OnApproveData, actions: OnApproveActions) => {
return actions.order.capture().then((details: CaptureOrderResponseBody) => {
const {payer} = details;
[β¦]
setSucceeded(true);
}).catch((err) => setPaypalErrorMessage("Something went wrong."));
};
[β¦]
<PayPalButtons style={{layout: "vertical"}}
createOrder={(data, actions) => [...]}
onApprove={onApprove}/>
No amount of kicking and goading seems to want to let me to import type definitions for OnApproveData
, OnApproveActions
or CaptureOrderResponseBody
even though I can see them in the .d.ts files and they seem to be exported. Is there some specific way that they need to be imported?
Hey guys, first of all thanks for creating this.
It's still active right?
I wanted to know if it's possible to receive a return value after the button was pushed
and the order created (sucessfully or not). So I would like to get a response code back
to the react app. Do you guys thinks thats possible somehow?
const return_value = 0
return (
<PayPalScriptProvider options={initialOptions}>
<PayPalButtons
createSubscription={(data, actions) =>
actions.subscription.create({
plan_id: "P-XXXXX",
}). onApprove( return_value = data.status.code )
}
style={{
label: "subscribe",
}}
/>
</PayPalScriptProvider>
);
Best regards
Christian Klose
Add a new badge to the README for GitHub Actions. Ex: https://github.com/paypal/react-paypal-js/workflows/CI/badge.svg
In terms of badge order, please make this the second badge after the npm badge.
Unhandled Runtime Error Error: usePayPalScriptReducer must be used within a PayPalScriptProvider
(settings: react / nextjs)
I simply add the context in _app.js :
<PayPalScriptProvider options={{ 'client-id': 'test' }}> <Page> <Component {...pageProps} /> </Page> </PayPalScriptProvider>
I add the PayPal button into a component.
And then everything bugs, error message:
Unhandled Runtime Error
Error: usePayPalScriptReducer must be used within a PayPalScriptProvider
I don't even use this hook. Even by adding it somewhere, same issue. No way so far to use this service...
So, right now, the only way to "disable" the button is to make it fail or not show it at all.
It would be good to have an isDisabled
state, that would disable the button depending on what the user does. For example, when the user doesn't have anything on his cart, or when something is missing on his validation.
PayPalScriptProvider supports 'options', but what are those values? Where do i find them?
In general the solution is great, but it seems that there is too much to work on, it takes a lot of documentation and examples.
<PayPalScriptProvider options={{ "client-id": "sb", "Other?" : "??" }}>
</PayPalScriptProvider>
Hey everyone,
We have customers on our site subscribing using PayPal. However, I don't think they're able to use their PayPal balance to complete the checkout and finalize their subscription. On our staging and production setups, we only get options to pay via bank account or credit card:
However, I also want the option to pay using my balance. For example, when I click to complete an order in this storybook example, I'm able to get the balance to appear:
We're noticing in our logs that a lot of users keep opening and closing the checkout window that appears when clicking on the PayPal button, presumably because they want the option to pay with their balance. Is there something I can do to give users the option to pay for the subscription using their balance?
Thanks!
Add the ability to control when the <PayPalScriptProvider>
loads the JS SDK <script>
. Currently it loads the JS SDK script as soon as the provider is rendered.
In complex react apps, you may only want to load the JS SDK script under certain conditions.
My initial thought is to add a new prop to the <PayPalScriptProvider>
to control this behavior:
<PayPalScriptProvider options={{ "client-id": "test" }} deferLoading={true} >
{ /* pretend this component does not get shown on the initial route, and instead gets added later in the user flow */ }
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
The shouldLoadScript
deferLoading
prop would accept a boolean value and default to false. Let's consider this behavior "eager loading".
When true is passed in, the script loading behavior would be considered "lazy loading". In this mode you could load the script in a few different ways:
deferLoading
prop and set it equal to false.<PayPalButtons />
) to get rendered which would dispatch an action to kick off the script loading by changing the state to pending.setLoadingStatus
action to change from NOT_STARTED
to PENDING
to kick off the script loading.Currently we have an enum for the different script loading states. I think we would need to add a new "NOT_STARTED" option to support the shouldLoadScript
prop:
enum SCRIPT_LOADING_STATE {
NOT_STARTED = "not_started",
PENDING = "pending",
REJECTED = "rejected",
RESOLVED = "resolved",
}
Everything was working fine in version 5.0.1, but after upgrading to 6.0.0, I get the following errors:
https://codesandbox.io/s/ecstatic-dhawan-hh4y3?file=/src/App.js
usually only the client-id is required. but it seems all of the options are required in this package
TS2740: Type '{ 'client-id': string; intent: string; }' is missing the following properties from type
'Required<InferProps<{ "buyer-country": Requireable<string>; "client-id": Validator<string>;
commit: Requireable<string | boolean>; components: Requireable<string>; ... 12 more ...;
vault: Requireable<...>; }>>': "buyer-country", commit, components, currency, and 11 more.
βΉ ο½’wdmο½£: Failed to compile.
how to reproduce:
<PayPalScriptProvider options={{ 'client-id': 'some id', intent: 'authorize' }}></PayPalScriptProvider>
When using the isPending value from the contextual hook will cause flashing. This only means the script has been loaded, it does not mean that the actual PayPal button are ready and rendered.
If you have spinners for example using isPended, this will remove the spinner and then render nothing for a second or two, then the buttons will load in, this makes for a terrible screen jogging experience.
We need a way to know the buttons are ready to properly transition from loading to ready.
Hi, I have been worked on this integration but I have a problem, how can render the paypal button for debit or credit card without show the create paypal account seccion. I just want like the example on your storybook.
But instead of that I get a form with a seccion for create a new paypal account and is required, how can disable that seccion or making not required.
I hope you can help me, thanks.
Currency does not work ??
.create({purchase_units: [{ amount: {
currency: "EUR",
value: price,
},},],
The current radio buttons example works but could be improved to use the args
and follow more React best practices.
Please update this component to use this structure:
return (
<PayPalScriptProvider
options={{
"client-id": "sb",
components: "buttons,marks,funding-eligibility",
}}
>
{/* get the fundingSources list from args and dynamically create the list of radio buttons from it */}
<FormWithRadioButtons {...args } onChange={onChange} />
<PayPalButtons fundingSource={fundingSource} />
</PayPalScriptProvider>
);
export const RadioButtons = RadioButtonTemplate.bind({});
RadioButtons.args = { fundingSources: [FUNDING.PAYPAL, FUNDING.CARD, FUNDING.PAYLATER] };
It would be great to have a GitHub Action Workflow added to this project that executes the build, linting, and unit tests for Pull Requests. Ex: https://docs.github.com/en/free-pro-team@latest/actions/guides/building-and-testing-nodejs#starting-with-the-nodejs-workflow-template.
To resolve this issue send a PR with a new .github/workflow
file that runs against Node 10 and Node 12.
This bug is understandable when we implement the script tag directly, but using it as a react app, it's just weird. If a user closes the tab before PayPal receives some action back, it throws this error.
It wouldn't be a problem for small projects, but for big ones, it's a nightmare and doesn't provide any benefit (in my point of view).
Wouldn't it be a good idea to remove it?
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('https://www.sandbox.paypal.com').
Same is working on localhost.
PayPal script not working on our website but works on localhost
It should load correctly
Software | Version(s) |
---|---|
react-paypal-js | 4.1.1 |
Browser | chrome Version 89.0.4389.82 |
Operating System | Windows 7 |
This project isn't written in TypeScript, but many TypeScript users would like to use published typings. For this issue, create TypeScript typings that cover the exported functions, and contribute it back to DefinitelyTyped!
This issue is great for someone who wants to learn more about TypeScript!
Here's an example from paypal-js: paypal/paypal-js#39
"@paypal/react-paypal-js": "^4.0.0" in dist\react-paypal.node.js:286 unexpected token :
buttons?.current?.close();
_______ ^_______ ^
Hi guys,
I'm trying to figure out how should I work with changing params like currency but I don't see any examples to implement it. I think it would be great to place more info about it. Right know im trying this approach:
const PaypalProvider = ({ children }) => {
const {
state: { paypal },
} = useContext(AppContext);
console.log(paypal);
return (
<PayPalScriptProvider
key={paypal}
options={{
currency: paypal.currency,
"client-id":
"####",
}}
>
{children}
</PayPalScriptProvider>
);
};
export default PaypalProvider;
So I have a global state that changes, and I see it in console.log() but how should I refresh this provider? Right now it doesn't work, and any changes doesn't affect this provider. I was trying to do something with a key but it doesn't work too. Maybe I'm working with it in a bad way?
I'm creating a checkout with the PayPalButtons
, and I found an interesting bug, that made me realize something... We don't re-render the button if one of its functions changes, meaning that I created the createOrder
function on the page, and this function depended on the shipping address coming from the context. It's undefined at first, but as soon as it gets re-hydrated, it gets the correct object.
The issue is that the PayPalButtons
component doesn't care about this change, it doesn't have anything on the useEffect
dependencies saying that it should, like:
And then what I had to do is create add:
forceReRender={!!shippingAddress}
That makes the button re-render the function on re-hydration.
I think we should add the functions on the dependency there, and ask our users to use useCallback
with some dependencies on their apps, it would solve this type of issue.
Right now we have only one property on the forceRerender
prop, I had to add my createOrder
function to it, which is an useCallback
function, and it respects the array of properties of it to force the rerender.
I think we can make it more readable/reliable if we make the forceRerender
be an array, so we can pass as many properties to it as we want, and it would be very easy to implement.
Sometimes on our sandbox env when we try click on the Paypal button to open the modal, its get stuck in infinite loading spinner and we see this error in the console
Refused to load the script 'http://bpp.eset.com/en-US/Redirect-Switch?token=XXX' because it violates the following Content Security Policy directive: "script-src 'self' https://.paypal.com: https://*.paypalobjects.com 'unsafe-inline' 'unsafe-eval' https://apis.google.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Hard to reproduce as it sometimes happens and after some refreshes, it suddenly works.
PayPal SDK not loaded because of the above error.
PayPal SDK should load and the Paypal modal should show the regular state.
Software | Version(s) |
---|---|
react-paypal-js | 2.0.0 |
Browser | Chrome |
Operating System | Windows 10 |
I am facing an issue where my server side
implementation of paypal payments has to wait until the payment is captured
AND then do some DB operations (writing transactions id to DB, manipulating order status, etc.). Therefore the capture
method has to successfully finish first.
As I found out the capture
method closes the paypal iframe
on the client side whenever it finishes successfully. Leaving the client in a state of uncertainty while some backend operations are still running.
This lib provides the ability of implementing a loading indicator by accessing the script hook like
const [{ isPending }] = usePayPalScriptReducer();
[see docs here]. (By the way the docs actually do not show how to use the hook. I manually found it [here].)
Feature: It would be great to have the isPending
state until the transaction is not only captured but the onApprove promise entirely finishes
.
I have a workaround, but it would be much cleaner with the isPending
script hook:
import React, { useState } from 'react';
import config from '@root/config';
import { PayPalButtons, PayPalScriptProvider, usePayPalScriptReducer } from '@paypal/react-paypal-js';
import { Spinner } from 'appui';
import { StyledSpinnerContainer } from './styled';
const LoadingIndicator = ({ isLoading }) => {
const [{ isPending }] = usePayPalScriptReducer();
return (
((isLoading || isPending) && (
<StyledSpinnerContainer>
<Spinner />
</StyledSpinnerContainer>
)) ||
''
);
};
const Paypal = ({ options, createOrder, onApprove, onError }) => {
const [isLoading, setIsLoading] = useState(false);
return (
<PayPalScriptProvider
options={{ ...options, components: 'buttons', 'client-id': config.paypalClientId }}
>
<LoadingIndicator {...{ isLoading }} />
{!isLoading && (
<PayPalButtons
{...{
style: { color: 'blue' },
createOrder,
onApprove: (...args) =>
Promise.resolve()
.then(() => setIsLoading(true))
.then(() => onApprove(...args))
.finally(() => setIsLoading(false)),
onError,
}}
/>
)}
</PayPalScriptProvider>
);
};
export default Paypal;
Hi guys, didn't know if this qualified as a bug or not, but I'm getting some weird behaviour from the "Debit or Credit Card" button, or at least inconsistent with the examples shown in the Storybook.
I've implemented everything as suggested in the docs, using all the defaults and whenever I click on the "Debit or Credit Card" button I'm getting the following form:
which animates in, instead of it taking me to the popup checkout flow as it does in the storybook example. (Shown below)
I'm wondering if this is the intended behaviour and if so, how could I revert it to the popup flow shown in the storybook examples? I couldn't find any info about this on the documentation.
FYI, I'm running v1.0.3
Sorry if this is not the appropriate forum for this question and thanks in advance for any help.
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.