react-paypal-js icon indicating copy to clipboard operation
react-paypal-js copied to clipboard

[BUG]: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

Open mercpls opened this issue 3 years ago • 0 comments

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.

mercpls avatar Sep 08 '22 18:09 mercpls