{"id":50879441,"url":"https://github.com/samowolabi/skrape-react","last_synced_at":"2026-06-15T12:30:46.022Z","repository":{"id":65541988,"uuid":"594365766","full_name":"samowolabi/skrape-react","owner":"samowolabi","description":"React JS Libary built for Integrating Skrape Checkout Modal for accepting payment in Stable Coin (USDT, USDC, BUSD).)","archived":false,"fork":false,"pushed_at":"2024-11-03T13:49:17.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T16:21:08.831Z","etag":null,"topics":["payment-gateway","payment-integration","skrape","web3","web3-react","web3modal"],"latest_commit_sha":null,"homepage":"https://skrape-docs.gitbook.io/skrape/libraries-and-sdk/react-js-library","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samowolabi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-28T10:19:56.000Z","updated_at":"2024-11-03T13:49:20.000Z","dependencies_parsed_at":"2023-02-15T15:31:48.762Z","dependency_job_id":null,"html_url":"https://github.com/samowolabi/skrape-react","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"a1aa12af99761619d9ca56f20d9527b8a20eaa3b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/samowolabi/skrape-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samowolabi%2Fskrape-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samowolabi%2Fskrape-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samowolabi%2Fskrape-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samowolabi%2Fskrape-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samowolabi","download_url":"https://codeload.github.com/samowolabi/skrape-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samowolabi%2Fskrape-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34363537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["payment-gateway","payment-integration","skrape","web3","web3-react","web3modal"],"created_at":"2026-06-15T12:30:45.219Z","updated_at":"2026-06-15T12:30:46.010Z","avatar_url":"https://github.com/samowolabi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# skrape-react\n\nA React library designed for seamlessly integrating Skrape payments into your web application.\n\n## Installation\n\nTo install the library, run:\n\n```bash\nnpm install skrape-react-v1\n```\n\n## Integration\n\nYou can integrate Skrape payments into your application using one of the following methods:\n\n- **As a Component**\n- **Using Hooks** (directly within your code)\n\n## Usage\n\nTo use the library, import the `SkrapeButton` component and the `useSkrapePayment` hook from the package:\n\n```javascript\nimport { SkrapeButton, useSkrapePayment, closeSkrapePaymentModal } from 'skrape-react-v1';\n```\n\n## As a Component\n\nTo use the `SkrapeButton` component, simply import it and pass in the required configuration object:\n\n```javascript\nconst config = {\n    api_key: \"skr_live_**********************\",\n    token_name: \"USDT\",\n    tx_ref: '34mx23xe2xe2x2e2',\n    amount: 100,\n    customer: {\n        first_name: 'Sam',\n        last_name: 'Owolabi',\n        email: 'owolabisamuel150@gmail.com'\n    },\n    customization: {\n        title: \"My NFT Store\",\n        description: \"Items sold\"\n    },\n};\n```\n\nThen, create a new configuration object by spreading the existing `config` object and adding additional options, such as the button text, button size, callback URL, callback function, and an `onClose` function:\n\n```javascript\nconst skrapeConfig = {\n    ...config,\n    text: 'Pay with Skrape',\n    btnSize: 'medium', // options: small, medium, large\n    callback_url: 'https://google.com',\n    callback: (response) =\u003e {\n        console.log(response);\n        closeSkrapePaymentModal();\n    },\n    onClose: function () {\n        alert('Transaction was not completed, window closed.');\n    }\n};\n\nreturn (\n    \u003c\u003e\n        \u003cSkrapeButton {...skrapeConfig} /\u003e\n    \u003c/\u003e\n);\n```\n\n## As a Hook\n\nTo use the Skrape payments as a hook, first define your configuration object:\n\n```javascript\nconst config = {\n    api_key: \"skr_live_**********************\",\n    token_name: \"USDT\",\n    tx_ref: '34mx23xe2xe2x2e2',\n    amount: 100,\n    customer: {\n        first_name: 'Sam',\n        last_name: 'Owolabi',\n        email: 'owolabisamuel150@gmail.com'\n    },\n    customization: {\n        title: \"My NFT Store\",\n        description: \"Items sold\"\n    },\n};\n```\n\nNext, create a new configuration object by spreading the existing `config` object and adding options such as the callback URL, callback function, and an `onClose` function:\n\n```javascript\nconst skrapeConfig = {\n    ...config,\n    callback_url: 'https://google.com',\n    callback: (response) =\u003e {\n        console.log(response);\n        closeSkrapePaymentModal();\n    },\n    onClose: function () {\n        alert('Transaction was not completed, window closed.');\n    }\n};\n```\n\n\nFinally, call the `useSkrapePayment` hook with the configuration object, and assign the returned value to a variable. This variable can then be used as the event handler for a button or other interactive element to trigger the Skrape payment modal:\n\n```javascript\nconst handleSkrapePayment = useSkrapePayment(skrapeConfig);\n\nreturn (\n    \u003c\u003e\n        \u003cbutton onClick={handleSkrapePayment}\u003ePay with Skrape\u003c/button\u003e\n    \u003c/\u003e\n);\n```\n\n\n## Parameters\n\n| Key              | Type     | Required | Description                                                                                      |\n|------------------|----------|----------|--------------------------------------------------------------------------------------------------|\n| `api_key`        | string   | Yes      | API key provided by Skrape to identify the merchant.                                           |\n| `token_name`     | string   | Yes      | The name of the token or currency to be used for the transaction.                               |\n| `network_name`   | string   | Yes      | The blockchain network on which the transaction will be made (\"testnet\" or \"mainnet\").         |\n| `tx_ref`         | string   | No       | A unique reference number for the transaction.                                                  |\n| `amount`         | string   | Yes      | Amount to be paid.                                                                               |\n| `customer`       | object   | Yes      | Contains the customer's first name, last name, and email.                                      |\n| `customer.email` | string   | Yes      | The email of the customer.                                                                        |\n| `customer`       | object   | Yes      | Holds the customer's email, first name, and last name.                                          |\n| `customer.first_name` | string | No     | The first name of the customer.                                                                  |\n| `customer.last_name`  | string | No     | The last name of the customer.                                                                   |\n| `customization`   | object   | Yes      | Holds the transaction title and description.                                                    |\n| `customization.title`       | string   | Yes | Customization title.                                                                             |\n| `customization.description` | string   | No  | Customization description.                                                                        |\n| `callback_url`   | string   | No       | Callback URL where the result will be posted after the payment is completed successfully.        |\n| `callback`       | function | No       | Callback function that will be called after the payment is completed successfully with the response object. |\n| `onClose`        | function | No       | Callback function that will be called when the transaction is not completed, and the window is closed. |\n\n\n## Configuration\n\nThe `config` object passed to the component or hook must contain the following properties:\n\n- `api_key`: Your Skrape API key.\n- `token_name`: The token you wish to use for the transaction (e.g., \"USDT\").\n- `tx_ref`: A unique reference for the transaction.\n- `amount`: The amount to be charged.\n- `customer`: An object containing the customer's first and last name, and email.\n- `customization`: An object containing the title and description of the payment modal.\n\nAdditionally, you can pass the following properties to the hook:\n\n- `text`: The text to be displayed on the button.\n- `btnSize`: The size of the button to be displayed.\n- `callback_url`: The callback URL to which the response will be sent.\n- `callback`: A callback function to handle the response.\n- `onClose`: A callback function to handle when the modal is closed.\n\n### Note\nMake sure you have an account with Skrape and have created an API Key. When testing, it is recommended to use a test API Key.\n\n## Support\nIf you have any issues or questions, please reach out to [support@skrape.io](mailto:support@skrape.io).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamowolabi%2Fskrape-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamowolabi%2Fskrape-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamowolabi%2Fskrape-react/lists"}