react-paypal-js
react-paypal-js copied to clipboard
[BUG]: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
Is there an existing issue for this?
- [X] I have searched the existing issues.
🐞 Describe the Bug
Framework: Remix run
HTTP / HTTPS
Happens in both cases. Hosted / Local
Description
When using data-client-token as given in the Example causes the an error to fire here
Error Response
Failed to render <PayPalButtons /> component. Failed to initialize: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
😕 Current Behavior
When I attempt to render the PayPalButtons, I get this error
Failed to render <PayPalButtons /> component. Failed to initialize: InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
🤔 Expected Behavior
Paypal buttons should render
🔬 Minimal Reproduction
### Initialize a remix run project
### Create Example.tsx in `routes`
Supplied code for `Example.tsx`
import { Outlet } from "remix";
// Paypal provider
import { PayPalScriptProvider } from "@paypal/react-paypal-js";
// Paypal initialization
const initialOptions = {
"client-id": "test",
currency: "USD",
intent: "capture",
"data-client-token": "abc123xyz==",
};
export default function Example() {
return (
<PayPalScriptProvider options={initialOptions}>
<Outlet />
</PayPalScriptProvider>
);
}
### Create routes/example/index.tsx
(So all routes inside /example/xyz get the PayPalScriptProvider that we need for checking out a user, but routes that don't use paypal don't load the script)
Supplied code for `index.tsx` inside `routes/example`
```ts
// Paypal
import { PayPalButtons } from "@paypal/react-paypal-js";
const Index = () => {
return (
<div>
<p>Checkout</p>
<div id="paypal-container" className="border">
<PayPalButtons />
</div>
</div>
);
};
export default Index;
### 🌍 Environment
```markdown
| Software | Version(s) |
| ---------------- | ---------- |
| react-paypal-js | |
| remix-run | 1.0.6 |
| react | 17.0.2 |
| react-dom | 17.0.2 |
| Browser | |
| Operating System | Mac Os 15.2.1|
Relevant log output
No response
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
➕ Anything else?
Fix: Removing data-client-token fixes the issue. And buttons render properly.