Skip to content

Commit

Permalink
feat/MSSDK-1993: Google Recaptcha integration (#448)
Browse files Browse the repository at this point in the history 
* Feat/MSSDK-2048: Add Google reCAPTCHA into Register flow (#443)

* feat/MSSDK-2048: Add google recaptcha into Register flow

* feat/MSSDK-2048: Changes after CR

* [Feat/MSSDK-2050]: Add configuration method (#444)

* feat/MSSDK-2048: Add google recaptcha into Register flow

* feat/MSSDK-2048: Changes after CR

* feat/MSSDK-2050: Add configuration method for Google reCAPTCHA

* feat/MSSDK-2050: Fix sonarcube error

* feat/MSSDK-2050: Remove logging

* fix/MSSDK-2050: fix the ReCaptcha not being triggered (#445)

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* chore/MSSDK-2050: add debugging logs for recaptcha in register form

* fix/MSSDK-2050: commit cleaned up code with the final fix

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: add debugging logs

* chore/MSSDK-2050: clean up code for code review

* chore/MSSDK-2050: recreate pnpm-lock

* chore/MSSDK-2050: remove the isolated prop - needs confirmation if we would like to use this

* feat/MSSDK-2049: captcha challenge in purchase flow (#447)

* feat/MSSDK-2049: captcha challenge in purchase flow

* feat/MSSDK-2049: add missing prepare script

* feat/MSSDK-2049: fix deprecated husky command

* feat/MSSDK-2049: fix deprecated husky command

* feat/MSSDK-2049: add unit tests for the new recaptcha hook

* feat/MSSDK-2112: Add errors for google recaptcha (#452)

* feat/MSSDK-2112: Add errors for google recaptcha

* feat/MSSDK-2112: Update after CR

* fix/MSSDK-2112: Fix behaviour if challange called (#453)

* fix/MSSDK-2133: Fix invalid token error nad small refactor (#459)

* [chore/MSSDK-2051]: Update readme with info about Google reCAPTCHA (#468)

* chore/MSSDK-2051: Update readme with info about Google reCAPTCHA config method

* chore/MSSDK-2051: Update link to docs

* chore/MSSDK-2051: Update readme with optional values

* feat/MSSDK-1993: empty commit to bump GH actions

---------

Co-authored-by: Paweł Kaczmarek <[email protected]>
  • Loading branch information
@Saddage @pawelacio
Saddage and pawelacio authored Feb 25, 2025
1 parent e1416bf commit 21fec0b
Show file tree
Hide file tree
Showing 22 changed files with 862 additions and 282 deletions.
1 change: 1 addition & 0 deletions .env
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
VITE_MEDIASTORE_SDK_VERSION=$npm_package_version
VITE_RECAPTCHA_SITE_KEY="6Ld0A54qAAAAANJ8mLCpJAxEp0XKtJyueFmEFVaG"
37 changes: 19 additions & 18 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,24 +95,25 @@ Config functions save data to local storage (as `CLEENG_*` items). These data ar

#### Config methods

| Method | Param | Description |
| --------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setEnvironment` | `'sandbox'` &#124; `'production'` | Required for all components. Default: `sandbox` |
| `setJWT` | `JWT :string` | Customer authorization token received from login / registration / SSO endpoint |
| `setRefreshToken` | `refeshToken :string` | Customer refresh token received from login / registration / SSO endpoint |
| `setPublisher` | `publisherId :string` | Your broadcaster ID in the Cleeng system |
| `setOffer` | `offerId :string` | `offerId` is the ID of the offer created for your broadcaster in the Cleeng system |
| `setCheckoutPayPalUrls` | `{successURL: string, cancelUrl: string,errorUrl: string }` | PayPal redirection URLs, required for Paypal payment |
| `setMyAccountPayPalUrls` | `{successURL: string, cancelUrl: string, errorUrl: string }` | PayPal redirection URLs, required for update PayPal payment details. Query param 'message' with a readable error message will be added to errorUrl when an error occurs |
| `setMyAccountUrl` | `url: string` | My account URL. Needed for checkout legal notes |
| `setOfferSelectionUrl` | `url: string` | Url to offer selection page. Recommended for CTA when the customer has no active plan |
| `setTheme` | `styles:object` | More information in the [Styling](#styling) section. |
| `setHidePayPal` | - | Option to hide PayPal, by default PayPal will be visible when configured |
| `setEnable3DSRedirectFlow` | - | Set to true to force 3DS redirect flow. |
| `setDisablePaymentCheckbox` | - | Option to hide consent checkbox shown next to the payment method. |
| `setLanguage` | `language :string` | Option to change language without reloading page |
| `setTermsUrl` | `termsUrl :string` | Option to Provide a URL for Terms & Conditions: This feature will display a link to them adjacent to the payment method. |
| `setResetUrl` | `resetUrl :string` | Option to Provide a URL for custom password reset page. This URL will be sent in an email with additional parameters: `email`, `resetPasswordToken`, `publisherId` |
| Method | Param | Description |
| --------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `setEnvironment` | `'sandbox'` &#124; `'production'` | Required for all components. Default: `sandbox` |
| `setJWT` | `JWT :string` | Customer authorization token received from login / registration / SSO endpoint |
| `setRefreshToken` | `refeshToken :string` | Customer refresh token received from login / registration / SSO endpoint |
| `setPublisher` | `publisherId :string` | Your broadcaster ID in the Cleeng system |
| `setOffer` | `offerId :string` | `offerId` is the ID of the offer created for your broadcaster in the Cleeng system |
| `setCheckoutPayPalUrls` | `{successURL: string, cancelUrl: string,errorUrl: string }` | PayPal redirection URLs, required for Paypal payment |
| `setMyAccountPayPalUrls` | `{successURL: string, cancelUrl: string, errorUrl: string }` | PayPal redirection URLs, required for update PayPal payment details. Query param 'message' with a readable error message will be added to errorUrl when an error occurs |
| `setMyAccountUrl` | `url: string` | My account URL. Needed for checkout legal notes |
| `setOfferSelectionUrl` | `url: string` | Url to offer selection page. Recommended for CTA when the customer has no active plan |
| `setTheme` | `styles:object` | More information in the [Styling](#styling) section. |
| `setHidePayPal` | - | Option to hide PayPal, by default PayPal will be visible when configured |
| `setEnable3DSRedirectFlow` | - | Set to true to force 3DS redirect flow. |
| `setDisablePaymentCheckbox` | - | Option to hide consent checkbox shown next to the payment method. |
| `setLanguage` | `language :string` | Option to change language without reloading page |
| `setTermsUrl` | `termsUrl :string` | Option to Provide a URL for Terms & Conditions: This feature will display a link to them adjacent to the payment method. |
| `setResetUrl` | `resetUrl :string` | Option to Provide a URL for custom password reset page. This URL will be sent in an email with additional parameters: `email`, `resetPasswordToken`, `publisherId` |
| `setGoogleRecaptcha` | `{ showCaptchaOnPurchase?: boolean, showCaptchaOnRegister?: boolean, sitekey?: string }` | Option to configure an integration with the Google reCAPTCHA. You can read more about the integration [here](https://developers.cleeng.com/docs/fraud-prevention-solution-with-google-recaptcha) |

**Usage sample**

Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"jwt-decode": "^3.1.2",
"lodash.merge": "^4.6.2",
"mixpanel-browser": "^2.48.1",
"react-google-recaptcha": "^3.1.0",
"react-i18next": "^12.2.0",
"react-loading-skeleton": "^3.1.0",
"react-redux": "^8.1.3",
Expand Down Expand Up @@ -98,12 +99,14 @@
"devDependencies": {
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.4.3",
"@types/jwt-decode": "^3.1.0",
"@types/mixpanel-browser": "^2.47.5",
"@types/node": "^20.14.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-google-recaptcha": "^2.1.9",
"@types/react-redux": "^7.1.33",
"@types/redux-mock-store": "^1.0.6",
"@types/styled-components": "^5.1.26",
Expand Down
74 changes: 74 additions & 0 deletions pnpm-lock.yaml
View file

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

36 changes: 0 additions & 36 deletions src/api/Auth/registerCustomer.js
View file

This file was deleted.

54 changes: 54 additions & 0 deletions src/api/Auth/registerCustomer.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { fetchWithHeaders } from 'util/fetchHelper';
import getApiURL from 'util/environmentHelper';

type RegisterCustomerPayload = {
email: string;
password: string;
publisherId: string;
locale: string;
country: string;
currency: string;
captchaValue: string;
};

type RegisterCustomerResponse = {
responseData?: {
customerId: number;
customerToken: string;
jwt: string;
refreshToken: string;
};
errors: string[];
code?: string;
message?: string;
};

const registerCustomer = async ({
email,
password,
publisherId,
locale,
country,
currency,
captchaValue
}: RegisterCustomerPayload): Promise<RegisterCustomerResponse> => {
const url = `${getApiURL()}/customers`;

const resp = await fetchWithHeaders(url, {
method: 'POST',
body: JSON.stringify({
email,
password,
publisherId,
locale,
country,
currency,
captchaValue
})
});
const response: RegisterCustomerResponse = await resp.json();

return response;
};

export default registerCustomer;
4 changes: 2 additions & 2 deletions src/api/Payment/submitPayPalPayment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { getData } from 'util/appConfigHelper';
import fetchWithJWT from 'util/fetchHelper';
import getApiURL from 'util/environmentHelper';

const submitPayPalPayment = async () => {
const submitPayPalPayment = async (captchaValue) => {
const API_URL = getApiURL();
const orderId = parseInt(getData('CLEENG_ORDER_ID') || '0', 10);
const url = `${API_URL}/connectors/paypal/v1/tokens`;
Expand All @@ -20,7 +20,7 @@ const submitPayPalPayment = async () => {
try {
const res = await fetchWithJWT(url, {
method: 'POST',
body: JSON.stringify({ orderId, ...redirectUrls })
body: JSON.stringify({ orderId, captchaValue, ...redirectUrls })
});
return res.json();
} catch (e) {
Expand Down
Loading

0 comments on commit 21fec0b

Please sign in to comment.