{"_id":"@bucketplace-public/payment-bridge-react","_rev":"2-78869f250f9a411020ad1ccb647041c1","name":"@bucketplace-public/payment-bridge-react","dist-tags":{"latest":"2.6.2"},"versions":{"2.6.1":{"name":"@bucketplace-public/payment-bridge-react","version":"2.6.1","_id":"@bucketplace-public/payment-bridge-react@2.6.1","maintainers":[{"name":"bp-operator","email":"eng-corp-access@bucketplace.net"}],"dist":{"shasum":"881eee5ff2405d6438224af9e8127bbaff410ff8","tarball":"https://registry.npmjs.org/@bucketplace-public/payment-bridge-react/-/payment-bridge-react-2.6.1.tgz","fileCount":18,"integrity":"sha512-iRy3ZWXiAPNqTrVRyAh+zVXWdBT8hgQykLtgg2gH6ZSj1Q0UVFQBZFcgZ0NZ8OKDkcQm5Phyyn0Q6151NEPUFg==","signatures":[{"sig":"MEQCIC82gPKURKAZ3QCjogG799//LrKTXbbOQG6C4SZamQLwAiA3eX+Y2tszrryUtrRblU0ZwGoET6xswrvUfUPbHeLLvQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":73794},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","command":{"publish":{"registry":"https://nexus.co-workerhou.se/repository/npm-private/"}},"gitHead":"65ab291bc8094b1a6330a6beb18920d5aa7c2450","scripts":{"dev":"rollup --config rollup.config.ts --watch","tsc":"tsc","lint":"eslint .eslintrc.js","build":"rollup --config rollup.config.ts --sourcemap","lint:fix":"eslint --fix --ext .ts,.tsx src/"},"_npmUser":{"name":"bp-operator","email":"eng-corp-access@bucketplace.net"},"_npmVersion":"10.9.3","description":"- 오늘의집 서비스 내에 결제가 필요한 부분에 쉽게 결제기능을 적용할 수 있도록 별도의 결제 전용 프론트 서비스를 운영하고 있습니다(payment.ohou.se) - 결제 Front 서비스는 다양한 결제 수단을 제공하고 있으며, 그와 관련된 다양한 비즈니스 로직을 대신 처리하는 일종의 프록시 역할을 수행합니다. - 결제 Front 서비스는 사내 Nexus 레지스트리에 등록된 별도의 SDK 모듈을 활용하여 연동 할 수 있으며, 본 문서는 `SDK의 적용 ","directories":{},"_nodeVersion":"22.18.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","eslint":"^8.15.0","rollup":"^2.74.0","typescript":"^5.5.4","@babel/core":"^7.18.0","@types/react":"^18.0.17","@babel/preset-env":"^7.18.0","eslint-plugin-node":"^11.1.0","@babel/preset-react":"^7.17.12","eslint-plugin-react":"^7.30.1","@rollup/plugin-babel":"^5.3.1","rollup-plugin-terser":"^7.0.2","eslint-plugin-prettier":"^4.2.1","@babel/preset-typescript":"^7.17.12","@typescript-eslint/parser":"^5.30.5","rollup-plugin-typescript2":"^0.31.2","@rollup/plugin-node-resolve":"^13.3.0","@typescript-eslint/eslint-plugin":"^5.30.5","@bucketplace/eslint-config-bucketplace":"^1.1.3"},"peerDependencies":{"react":"*","react-dom":"*","@bucketplace-public/payment-bridge-core":"^2.6.1"},"_npmOperationalInternal":{"tmp":"tmp/payment-bridge-react_2.6.1_1769403947235_0.5203447610268619","host":"s3://npm-registry-packages-npm-production"}},"2.6.2":{"name":"@bucketplace-public/payment-bridge-react","version":"2.6.2","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"dev":"rollup --config rollup.config.ts --watch","lint":"eslint .eslintrc.js","lint:fix":"eslint --fix --ext .ts,.tsx src/","build":"rollup --config rollup.config.ts --sourcemap","tsc":"tsc"},"peerDependencies":{"react":"*","react-dom":"*","@bucketplace-public/payment-bridge-core":"^2.6.2"},"devDependencies":{"@babel/core":"^7.18.0","@babel/preset-env":"^7.18.0","@babel/preset-react":"^7.17.12","@babel/preset-typescript":"^7.17.12","@bucketplace/eslint-config-bucketplace":"^1.1.3","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-node-resolve":"^13.3.0","@types/react":"^18.0.17","@typescript-eslint/eslint-plugin":"^5.30.5","@typescript-eslint/parser":"^5.30.5","eslint":"^8.15.0","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.30.1","rollup":"^2.74.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.31.2","tslib":"^2.8.1","typescript":"^5.5.4"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"command":{"publish":{"registry":"https://nexus.co-workerhou.se/repository/npm-private/"}},"_id":"@bucketplace-public/payment-bridge-react@2.6.2","gitHead":"65ab291bc8094b1a6330a6beb18920d5aa7c2450","description":"- 결제 프로세스를 쉽게 통합할 수 있도록 설계된 React SDK입니다. - 다양한 결제 수단을 지원하며, 결제 인증 프로세스를 간편하게 처리할 수 있습니다. - 본 문서는 `SDK의 적용 방법`에 대해 설명합니다.","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-BE38IU4oAMpwRuWxvxOY3xUZ2XXVtlJjQ9d9bs0kvFglOpqBCWIgzG5pc4nsGojECqEvgL6P7iGsGJcxrNvQyQ==","shasum":"4ba84fd0cfd9b5f1b9a35101d4a8ce96cb326fb6","tarball":"https://registry.npmjs.org/@bucketplace-public/payment-bridge-react/-/payment-bridge-react-2.6.2.tgz","fileCount":18,"unpackedSize":73266,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCy05qUOtzl1wnQ7XZQRgrBLUh4KwAra9w7baJyU/x+BQIgDkHWntE6dvkl+H5HOHHFX+02zMkGE8HiMxqHPA4mv7s="}]},"_npmUser":{"name":"bp-operator","email":"eng-corp-access@bucketplace.net"},"directories":{},"maintainers":[{"name":"bp-operator","email":"eng-corp-access@bucketplace.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/payment-bridge-react_2.6.2_1769405390452_0.6303975164676217"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-26T05:05:47.084Z","modified":"2026-01-26T05:29:50.767Z","2.6.1":"2026-01-26T05:05:47.383Z","2.6.2":"2026-01-26T05:29:50.599Z"},"description":"- 결제 프로세스를 쉽게 통합할 수 있도록 설계된 React SDK입니다. - 다양한 결제 수단을 지원하며, 결제 인증 프로세스를 간편하게 처리할 수 있습니다. - 본 문서는 `SDK의 적용 방법`에 대해 설명합니다.","maintainers":[{"name":"bp-operator","email":"eng-corp-access@bucketplace.net"}],"readme":"# Payment Bridge SDK 사용 가이드\n\n## 개요\n\n- 결제 프로세스를 쉽게 통합할 수 있도록 설계된 React SDK입니다.\n- 다양한 결제 수단을 지원하며, 결제 인증 프로세스를 간편하게 처리할 수 있습니다.\n- 본 문서는 `SDK의 적용 방법`에 대해 설명합니다.\n\n## 설치\n\n```bash\nnpm install @bucketplace-public/payment-bridge-react\n# or\npnpm add @bucketplace-public/payment-bridge-react\n# or\nyarn add @bucketplace-public/payment-bridge-react\n```\n\n## 적용\n\n```tsx\nimport { usePaymentBridge } from '@bucketplace-public/payment-bridge-react';\n\nfunction Component() {\n  const { doPaymentProcess, isProcessing } = usePaymentBridge({\n    // 결제가 성공하였을 때 호출되는 callback\n    onSuccess: (payload: PaymentSuccessEventPayload) => void,\n    // 결제가 실패하였을 때 호출되는 callback\n    onFail: (payload: PaymentFailEventPayload) => void,\n    // 결제 중 예상하지 못한 오류가 발생하였을 때 호출되는 callback\n    onError: (payload: PaymentErrorEventPayload) => void,\n  });\n\t// ....\n}\n```\n\n### Returns\n\n`usePaymentBridge`는 다음 객체를 반환합니다.\n\n```tsx\nexport interface UsePaymentBridgeReturn {\n  doPaymentProcess: (param: DoPaymentProcessParam) => void;\n  isProcessing: boolean;\n}\n```\n- `isProcessing` - 결제 프로세스가 진행중인지의 여부를 반환합니다.\n- `doPaymentProcess` - 결제 서비스를 호출하여 결제 프로세스를 진행합니다.\n\n  ```tsx\n    doPaymentProcess({\n      // 주문 API로부터 받아온 결제 인증 url을 전달합니다. (ex. payment.ohou.se/:paymentId/:pgProviderType/ready?paymentToken=somethingtoken )\n      paymentAuthUrl: string,\n    })\n  ```\n  - `paymentAuthUrl`\n    - 결제 서비스의 url을 전달합니다.\n    - 해당 url은 서버에서 내려주게 되며, 다음과 같이 구성되어 있습니다.\n      (`ex. https://payment.ohou.se/:paymentId/:pgProviderType/ready?paymentToken=somethingtoken` )\n      - `paymentId`: 결제 id로 현재 수행되는 결제정보를 받아오기 위한 식별값입니다.\n      - `pgProviderType`: 유저가 선택한 결제수단에 대응되는 pg 타입(ex. TOSS_PAYMENTS, KAKAO, …)입니다.\n      - `paymentToken`: 현재 결제를 진행중인 유저 정보가 암호화된 토큰입니다. 결제 서버에서 본 토큰을 활용해 정상적으로 인증된 경우에만 결제 프로세스가 진행됩니다.\n\n### Params\n\n- `onSuccess`\n  - 결제인증이 성공하였을 경우 호출됩니다. (PC only)\n  - Mobile의 경우 해당 콜백이 호출되지 않고, 결제 요청 당시 파라미터로 함께 서버로 넘긴 `successRedirectUrl` 로 이동하게 됩니다.\n  - 다음의 파라미터를 넘겨받습니다.\n\n    ```tsx\n    export type PaymentSuccessEventPayload = {\n      redirectUrl?: string; // 결제 성공시 이동해야 할 url입니다. 해당 url로 이동하여 결제 성공 API를 호출합니다.\n      paymentId: string;\n      orderId: string;\n      requestId: string;\n      paymentMethodType: PaymentMethodType;\n      authenticationToken: string;\n    };\n    ```\n\n    - `redirectUrl`은 결제 성공시 이동해야하는 페이지의 url입니다.\n      redirectUrl은 결제 요청 당시 파라미터로 넘겨준 `successRedirectUrl(optional)` 의 값이 내려옵니다. 즉, `successRedirectUrl` 을 넘겨주지 않은 경우 null로 응답이 내려옵니다.\n      - `paymentId` - 결제 id\n      - `orderId` - 주문 id\n      - `authenticationToken` - 결제 인증 토큰으로 결제 성공 API에서의 인증에 활용됩니다.\n    - redirectUrl과 함께 넘어오는 query string은 각각 별도의 필드로도 내려주고 있습니다. 프로젝트에 따라 원하는 방식으로 활용하시면 됩니다.\n    - 해당 callback은 **PC인 경우에만 호출**됩니다. **mobile 환경에서는 callback이 호출되지 않고** **redirectUrl로 바로 이동하기 때문에 결제 요청시 `successRedirectUrl` 를 반드시 지정하여 넘겨주어야 합니다.**\n\n\n- `onFail`\n  - 결제인증이 실패하였을 경우 호출됩니다. (PC only)\n  - Mobile의 경우 해당 콜백이 호출되지 않고, 결제 요청 당시 파라미터로 함께 서버로 넘긴 `failRedirectUrl` 로 이동하게 됩니다.\n  - 다음의 파라미터를 넘겨받습니다.\n\n    ```tsx\n    export type PaymentFailEventPayload = {\n      redirectUrl?: string;\n      paymentId: string;\n      orderId: string;\n      failType: PaymentFailType;\n      failCode: string;\n      failMessage: string;\n    };\n    ```\n\n  - `redirectUrl` 결제 실패시 이동해야 하는 페이지의 url입니다.\n    redirectUrl은 결제 요청 당시 파라미터로 넘겨준 `failRedirectUrl(optional)` 의 값이 내려옵니다. 즉, `failRedirectUrl` 을 넘겨주지 않은 경우 null로 응답이 내려옵니다.\n    아래 query string과 함께 전달됩니다.\n    - `paymentId`\n    - `orderId`\n    - `failType` - 실패 사유에 해당합니다.\n      - `USER_CANCEL`(유저가 결제를 취소한 경우)\n      - `ERROR`(PG 결제 인증 중 발생한 PG 에러)\n    - `failCode` - 서버에 정의된 실패 코드\n    - `failMessage` - 실패 상세 설명\n  - redirectUrl과 함께 넘어오는 query string은 각각 별도의 필드로도 내려주고 있습니다. 프로젝트에 따라 원하는 방식으로 활용하시면 됩니다.\n  - 해당 callback은 **PC인 경우에만 호출**됩니다.**mobile 환경에서는 callback이 호출되지 않고** **redirectUrl로 바로 이동하기 때문에 결제 요청시** `failRedirectUrl` **를 반드시 지정하여 넘겨주어야 합니다.**\n\n\n- `onError`\n  - 결제인증 도중 **예상치 못한 에러**가 발생하였을 때 호출됩니다.  (PC Only)\n  - 다음의 파라미터를 넘겨받습니다.\n\n    ```tsx\n    export type PaymentErrorEventPayload = {\n      errorCode?: string,\n      message: string\n    }\n    ```\n\n  - `errorCode`: 결제 서버에서 에러가 발생하는 경우 내려주는 에러코드입니다.\n  - `message`: 결제 프로세스 중 발생한 에러에 대한 상세 설명입니다.\n  - 해당 callback은 **PC인 경우에만 호출**됩니다. **mobile 환경에서는 callback이 호출되지 않고** 결제 서비스의 자체 에러 페이지가 노출됩니다.\n\n  > **NOTE: fail과 error의 차이는 무엇인가요?** </br>\n  > Fail - 결제 실패는 PG 결제창에서 복합적인 이유로 결제 인증이 실패하거나 유저의 결제 취소하는 등의 케이스에 해당합니다.  </br>\n  Error - 결제 중 발생한 예상치 못한 오류에 해당하는 `주로 비정상적인 케이스입니다`. 일반적으로 JS runtime 에러 혹은 API 서버에 4XX, 500에러가 발하는 경우에 해당합니다.\n\n\n","readmeFilename":"README.md"}