diff --git a/README.md b/README.md index 0692be0..d6cd8c5 100644 --- a/README.md +++ b/README.md @@ -9,22 +9,27 @@ Each payment component takes a set of props that will be the same for everything - **createPaymentUrl**: `string` _POST_-Request - we get a [_CreatePaymentResponse_](src/types/index.ts) It is **your** responsibility to develop this API - The url that gets called to the endpoint of the connect app to create a payment in commerce tools. Communicates with CommerceTools backend + The url that gets called to the endpoint of the connect app to create a payment in commercetools. Communicates with commercetools backend See the examples in our [CoFe integration example repository]() - **getSettingsUrl**: `string` _POST_-Request - we get a [_GetSettingsResponse_](src/types/index.ts) It is **your** responsibility to develop this API - The url that gets called to the endpoint of the connect app to get settings of PayPal in commerce tools. Communicates with CommerceTools backend + The url that gets called to the endpoint of the connect app to get settings of PayPal in commercetools. Communicates with commercetools backend See the examples in our [CoFe integration example repository]() - **createOrderUrl**: `string` _POST_-Request - we get a [_CreateOrderResponse_](src/types/index.ts) It is **your** responsibility to develop this API - The url that gets called to the endpoint of the connect app to create a PayPal order in commerce tools. Communicates with CommerceTools backend + The url that gets called to the endpoint of the connect app to create a PayPal order in commercetools. Communicates with commercetools backend See the examples in our [CoFe integration example repository]() - **onApproveUrl**: `string` _POST_-Request - we get a [_OnApproveResponse_](src/types/index.ts) It is **your** responsibility to develop this API - The url that gets called to the endpoint of the connect app to capture a PayPal order in commerce tools. Communicates with CommerceTools backend + The url that gets called to the endpoint of the connect app to capture a PayPal order in commercetools. Communicates with commercetools backend + See the examples in our [CoFe integration example repository]() +- **authorizeOrderUrl**: `string` + _POST_-Request - we get a [_OnApproveResponse_](src/types/index.ts) + It is **your** responsibility to develop this API + The url that gets called to the endpoint of the connect app to authorize a PayPal order in commercetools. Communicates with commercetools backend See the examples in our [CoFe integration example repository]() - **cartInformation**: `object` Information about the customers cart to crate payments with. @@ -65,6 +70,9 @@ Each payment component takes a set of props that will be the same for everything "Commercetools-Frontend-Extension-Version": string; ``` +- **shippingMethodId**: `string` + The id of the selected shipping. It will be sent back in the create purchase call to calculate the correct shipping costs. + - **options**: `object` options will pass to PayPalScriptProvider component and you can see the structure on PayPal documentation. [_ReactPayPalScriptOptions_](https://github.com/paypal/react-paypal-js/blob/main/src/types/scriptProviderTypes.ts). @@ -82,3 +90,11 @@ PayPal components props are based on PayPal props and you can see them on PayPal ### PayPalMessages PayPal messages props are based on PayPalMessages props and you can see them on PayPal official documentation [_PayPalMessagesComponentOptions_](https://github.com/paypal/react-paypal-js/blob/main/src/components/PayPalMessages.tsx). + +### HostedFields + +- **getClientTokenUrl**: `string` + _POST_-Request - we get a [_ClientTokenResponse_](src/types/index.ts) + It is **your** responsibility to develop this API + The URL that gets called to the endpoint of the connect app to get the client token to use in PayPalHostedFieldsProvider component in commercetools. Communicates with commercetools backend + See the examples in our [CoFe integration example repository]() diff --git a/package-lock.json b/package-lock.json index 9f4fdb4..be34726 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "license": "MIT", "dependencies": { "@heroicons/react": "^1.0.6", diff --git a/package.json b/package.json index 586c77a..da43832 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "private": false, "type": "module", "license": "MIT", diff --git a/src/App.tsx b/src/App.tsx index 2fce13d..65b3c79 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { HostedFields } from "./components/HostedFields"; const CC_FRONTEND_EXTENSION_VERSION: string = "devmajidabbasi"; const FRONTASTIC_SESSION: string = - "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiODg4OWQ4ZTYtNTcxOC00OTdjLWI3ZDgtYjBkYmM0OWIxNDkwIiwiY2FydElkIjoiMjJjOTVlYWItN2MyYy00ZjJmLTgxNDMtMzVlNzNhM2JmYTYwIn0.CbsE3rxtmU5qrDgoD3-6CKUo7on6k5jswpDmywNBZVo"; + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOWIzZGY0M2UtNjc4MC00Yzk1LWJkNjktYmIyYWZhNDMxOGE4IiwiY2FydElkIjoiNWQ4Y2YyZDgtYzAwMC00MDI4LWI0NTUtNDcyNDIwNTJlMzVhIn0.dfUq-ZvWNEUaJny40BJbXv9fK25CK90sYQCqHkXX3sw"; function App() { const [choosenPaymentMethod, setChoosenPaymentMethod] = useState(""); diff --git a/src/components/RenderTemplate/RenderTemplate.tsx b/src/components/RenderTemplate/RenderTemplate.tsx index bed7e07..cf29adb 100644 --- a/src/components/RenderTemplate/RenderTemplate.tsx +++ b/src/components/RenderTemplate/RenderTemplate.tsx @@ -1,5 +1,4 @@ import { FC } from "react"; -import { PayPalScriptProvider } from "@paypal/react-paypal-js"; import { NotificationsProvider } from "../../app/useNotifications"; import { PaymentProvider } from "../../app/usePayment"; diff --git a/storybook/stories/All.stories.js b/storybook/stories/All.stories.js index 24a7038..4390979 100644 --- a/storybook/stories/All.stories.js +++ b/storybook/stories/All.stories.js @@ -36,6 +36,9 @@ export default { ], control: { type: "select" }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/HostedFields.stories.js b/storybook/stories/HostedFields.stories.js index b2b9828..e572b48 100644 --- a/storybook/stories/HostedFields.stories.js +++ b/storybook/stories/HostedFields.stories.js @@ -4,7 +4,11 @@ import { params, options, requestHeader } from "./constants"; export default { title: "Components/HostedFields", component: HostedFields, - argTypes: {}, + argTypes: { + authorizeOrderUrl: { + table: { disable: true }, + }, + }, }; export const Main = { diff --git a/storybook/stories/PayPal.stories.js b/storybook/stories/PayPal.stories.js index e8dc14a..f521961 100644 --- a/storybook/stories/PayPal.stories.js +++ b/storybook/stories/PayPal.stories.js @@ -8,6 +8,9 @@ export default { fundingSource: { table: { disable: true }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/PayPalMessages.stories.js b/storybook/stories/PayPalMessages.stories.js index 0e9febf..6579e13 100644 --- a/storybook/stories/PayPalMessages.stories.js +++ b/storybook/stories/PayPalMessages.stories.js @@ -13,6 +13,24 @@ export default { fundingSource: { table: { disable: true }, }, + onApproveUrl: { + table: { disable: true }, + }, + authorizeOrderUrl: { + table: { disable: true }, + }, + getClientTokenUrl: { + table: { disable: true }, + }, + shippingMethodId: { + table: { disable: true }, + }, + cartInformation: { + table: { disable: true }, + }, + purchaseCallback: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/PayPalPayLater.stories.js b/storybook/stories/PayPalPayLater.stories.js index ca8f787..79981aa 100644 --- a/storybook/stories/PayPalPayLater.stories.js +++ b/storybook/stories/PayPalPayLater.stories.js @@ -13,6 +13,9 @@ export default { fundingSource: { table: { disable: true }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/TestButton.stories.js b/storybook/stories/TestButton.stories.js deleted file mode 100644 index 803b638..0000000 --- a/storybook/stories/TestButton.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import { TestButton } from "../../src/components/TestButton"; -import { params, options, requestHeader } from "./constants"; - -export default { - title: "Components/TestButton", - component: TestButton, -}; - -export const Main = { - args: { - ...params, - requestHeader, - ...options, - }, -}; diff --git a/storybook/stories/constants.jsx b/storybook/stories/constants.jsx index 2b3905f..658a264 100644 --- a/storybook/stories/constants.jsx +++ b/storybook/stories/constants.jsx @@ -30,7 +30,7 @@ export const options = { export const requestHeader = { "Frontastic-Session": - "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiIwYzkwZjliMC0yODVhLTQwMDQtOWIwYS0yYzI2ZGE4ZjExNzQifQ.mJIK2xLEt-vaF78zk2N341csfVjCe_8QC_2BaBqn6bU", + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOWIzZGY0M2UtNjc4MC00Yzk1LWJkNjktYmIyYWZhNDMxOGE4IiwiY2FydElkIjoiNWQ4Y2YyZDgtYzAwMC00MDI4LWI0NTUtNDcyNDIwNTJlMzVhIn0.dfUq-ZvWNEUaJny40BJbXv9fK25CK90sYQCqHkXX3sw", "Commercetools-Frontend-Extension-Version": "devmajidabbasi", }; @@ -42,7 +42,7 @@ export const params = { createOrderUrl: `${baseUrl}payment/createPayPalOrder`, getClientTokenUrl: `${baseUrl}payment/getClientToken`, onApproveUrl: `${baseUrl}payment/capturePayPalOrder`, - + authorizeOrderUrl: `${baseUrl}payment/authorizePayPalOrder`, shippingMethodId: "da416140-39bf-4677-8882-8b6cab23d981", cartInformation: cartInformation, purchaseCallback: (result, options) => {