Skip to content

Commit

Permalink
feat: use camelCase for PayPalScriptProvider options (#360)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: this is a breaking change for PayPalScriptProvider options.
  • Loading branch information
@gregjopa
gregjopa committed Jun 12, 2023
1 parent d77028c commit 168764e
Show file tree
Hide file tree
Showing 36 changed files with 193 additions and 194 deletions.
17 changes: 8 additions & 9 deletions README.md
View file
Expand Up @@ -57,7 +57,7 @@ import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons style={{ layout: "horizontal" }} />
</PayPalScriptProvider>
);
Expand All @@ -68,14 +68,13 @@ export default function App() {

#### Options

Use the PayPalScriptProvider `options` prop to configure the JS SDK. It accepts an object for passing query parameters and data attributes to the JS SDK script.
Use the PayPalScriptProvider `options` prop to configure the JS SDK. It accepts an object for passing query parameters and data attributes to the JS SDK script. Use camelCase for the object keys (clientId, dataClientToken, dataNamespace, etc...).

```jsx
const initialOptions = {
"client-id": "test",
clientId: "test",
currency: "USD",
intent: "capture",
"data-client-token": "abc123xyz==",
};

export default function App() {
Expand Down Expand Up @@ -175,7 +174,7 @@ import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";

export default function App() {
return (
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons
createOrder={(data, actions) => {
return actions.order.create({
Expand Down Expand Up @@ -217,8 +216,8 @@ export default function App() {
return (
<PayPalScriptProvider
options={{
"client-id": "test",
"data-client-token": "abc123xyz==",
clientId: "test",
dataClientToken: "abc123xyz==",
}}
>
<BraintreePayPalButtons
Expand Down Expand Up @@ -295,8 +294,8 @@ export default function App() {
return (
<PayPalScriptProvider
options={{
"client-id": "your-client-id",
"data-client-token": "your-data-client-token",
clientId: "your-client-id",
dataClientToken: "your-data-client-token",
}}
>
<PayPalHostedFieldsProvider
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -45,7 +45,7 @@
},
"homepage": "https://paypal.github.io/react-paypal-js/",
"dependencies": {
"@paypal/paypal-js": "^5.1.6",
"@paypal/paypal-js": "^6.0.0",
"@paypal/sdk-constants": "^1.0.122"
},
"devDependencies": {
Expand Down
26 changes: 13 additions & 13 deletions src/components/PayPalButtons.test.tsx
View file
Expand Up @@ -58,7 +58,7 @@ describe("<PayPalButtons />", () => {

test("should pass props to window.paypal.Buttons()", async () => {
render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons
fundingSource={FUNDING.CREDIT}
style={{ layout: "horizontal" }}
Expand All @@ -77,7 +77,7 @@ describe("<PayPalButtons />", () => {

test("should use className prop and add to div container", async () => {
render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons className="custom-class-name" />
</PayPalScriptProvider>
);
Expand All @@ -91,7 +91,7 @@ describe("<PayPalButtons />", () => {
const onInitCallbackMock = jest.fn();

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons
className="custom-class-name"
disabled={true}
Expand Down Expand Up @@ -127,7 +127,7 @@ describe("<PayPalButtons />", () => {

test("should enable the Buttons when disabled=true", async () => {
const { container, rerender } = render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons
className="custom-class-name"
disabled={true}
Expand Down Expand Up @@ -156,7 +156,7 @@ describe("<PayPalButtons />", () => {
)
);
rerender(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons
className="custom-class-name"
disabled={false}
Expand Down Expand Up @@ -192,7 +192,7 @@ describe("<PayPalButtons />", () => {
}

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<ButtonWrapper initialAmount="1" />
</PayPalScriptProvider>
);
Expand Down Expand Up @@ -233,7 +233,7 @@ describe("<PayPalButtons />", () => {
}

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<ButtonWrapper initialOrderID="1" />
</PayPalScriptProvider>
);
Expand Down Expand Up @@ -267,7 +267,7 @@ describe("<PayPalButtons />", () => {
} as any;

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons className="test-button" />
</PayPalScriptProvider>
);
Expand Down Expand Up @@ -295,7 +295,7 @@ describe("<PayPalButtons />", () => {
window.paypal = {} as any;

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons />
</PayPalScriptProvider>,
{ wrapper }
Expand All @@ -317,7 +317,7 @@ describe("<PayPalButtons />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "marks,messages",
}}
>
Expand Down Expand Up @@ -353,7 +353,7 @@ describe("<PayPalButtons />", () => {
};

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons />
</PayPalScriptProvider>,
{ wrapper }
Expand Down Expand Up @@ -386,7 +386,7 @@ describe("<PayPalButtons />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "marks,messages",
}}
>
Expand Down Expand Up @@ -427,7 +427,7 @@ describe("<PayPalButtons />", () => {
};

const { container } = render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalButtons className="test-children" />
</PayPalScriptProvider>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/PayPalButtons.tsx
View file
Expand Up @@ -47,7 +47,7 @@ export const PayPalButtons: FunctionComponent<PayPalButtonsComponentProps> = ({
}

const paypalWindowNamespace = getPayPalWindowNamespace(
options[SDK_SETTINGS.DATA_NAMESPACE]
options.dataNamespace
);

// verify dependency on window object
Expand Down
20 changes: 10 additions & 10 deletions src/components/PayPalMarks.test.tsx
View file
Expand Up @@ -44,7 +44,7 @@ describe("<PayPalMarks />", () => {

render(
<PayPalScriptProvider
options={{ "client-id": "test", components: "marks" }}
options={{ clientId: "test", components: "marks" }}
>
<PayPalMarks fundingSource={FUNDING.CREDIT} />
</PayPalScriptProvider>
Expand All @@ -68,7 +68,7 @@ describe("<PayPalMarks />", () => {

render(
<PayPalScriptProvider
options={{ "client-id": "test", components: "marks" }}
options={{ clientId: "test", components: "marks" }}
>
<PayPalMarks className="custom-class-name" />
</PayPalScriptProvider>
Expand All @@ -84,7 +84,7 @@ describe("<PayPalMarks />", () => {
.spyOn(console, "error")
.mockImplementation();
render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks />
</PayPalScriptProvider>,
{ wrapper }
Expand All @@ -104,7 +104,7 @@ describe("<PayPalMarks />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "buttons,messages",
}}
>
Expand All @@ -125,7 +125,7 @@ describe("<PayPalMarks />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "buttons,messages,marks",
}}
>
Expand Down Expand Up @@ -160,7 +160,7 @@ describe("<PayPalMarks />", () => {
};

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks />
</PayPalScriptProvider>,
{ wrapper }
Expand Down Expand Up @@ -189,7 +189,7 @@ describe("<PayPalMarks />", () => {
};

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks className="test-class" />
</PayPalScriptProvider>
);
Expand All @@ -212,7 +212,7 @@ describe("<PayPalMarks />", () => {
};

const { container } = render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks className="mark-container">
<div className="ineligible"></div>
</PayPalMarks>
Expand Down Expand Up @@ -248,15 +248,15 @@ describe("<PayPalMarks />", () => {
};

const { rerender } = render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks fundingSource="paypal" />
</PayPalScriptProvider>
);

await waitFor(() => expect(mockRender).toBeCalledTimes(1));

rerender(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMarks fundingSource="card" />
</PayPalScriptProvider>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/PayPalMessages.test.tsx
View file
Expand Up @@ -44,7 +44,7 @@ describe("<PayPalMessages />", () => {

render(
<PayPalScriptProvider
options={{ "client-id": "test", components: "messages" }}
options={{ clientId: "test", components: "messages" }}
>
<PayPalMessages style={style} className="customClass" />
</PayPalScriptProvider>
Expand All @@ -65,7 +65,7 @@ describe("<PayPalMessages />", () => {

const { container } = render(
<PayPalScriptProvider
options={{ "client-id": "test", components: "messages" }}
options={{ clientId: "test", components: "messages" }}
>
<PayPalMessages className="custom-class-name" />
</PayPalScriptProvider>
Expand All @@ -85,7 +85,7 @@ describe("<PayPalMessages />", () => {
window.paypal = undefined;

render(
<PayPalScriptProvider options={{ "client-id": "test" }}>
<PayPalScriptProvider options={{ clientId: "test" }}>
<PayPalMessages />
</PayPalScriptProvider>,
{ wrapper }
Expand All @@ -108,7 +108,7 @@ describe("<PayPalMessages />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "messages",
}}
>
Expand Down Expand Up @@ -139,7 +139,7 @@ describe("<PayPalMessages />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "messages",
}}
>
Expand Down Expand Up @@ -174,7 +174,7 @@ describe("<PayPalMessages />", () => {
render(
<PayPalScriptProvider
options={{
"client-id": "test",
clientId: "test",
components: "messages",
}}
>
Expand Down

0 comments on commit 168764e

Please sign in to comment.