Skip to content

Commit

Permalink
feat/MSSDK-1979: On/Off switch for payment method consent checkbox (#433
Browse files Browse the repository at this point in the history 
)

* feat/MSSDK-1977: add getAdyenPaymentMethods endpoint

* feat/MSSDK-1977: remove creating two sessions

* feat/MSSDK-1977: remove unused code

* feat/MSSDK-1977: change function name

* feat/MSSDK-1977: remove filterPaymentMethods parameter and setVisibleAdyenPaymentMethods config function

* feat/MSSDK-1977: change isMyAccount check in endpoint

* feat/MSSDK-1977: remove comment

* feat/MSSDK-1977: remove unused argument

* feat/MSSDK-1977: remove unused parameter

* feat/MSSDK-1977: use one drop in instance state

* feat/MSSDK-1977: remove unused parameters, add changing Adyen region

* feat/MSSDK-1977: add Adyen regions mapping

* feat/MSSDK-1977: add amount to adyen config

* feat/MSSDK-1977: use Adyen clientKey from response instead of hardcoded one

* feat/MSSDK-1979: add setDisablePaymentCheckbox() config method

* feat/MSSDK-1979: update README
  • Loading branch information
@m4tewoosh
m4tewoosh authored Nov 15, 2024
1 parent 1d243bf commit 12de7cc
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 51 deletions.
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,23 +81,24 @@ Config functions save data to local storage (as `CLEENG_*` items). These data ar

#### Config methods

| Method | Param | Description |
| -------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setEnvironment` | `'sandbox'` | `'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. |
| `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'` | `'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` |

**Usage sample**

Expand All @@ -109,6 +110,7 @@ Config.setPublisher('123456789');
Config.setOffer('S123456789_US');
Config.setHidePayPal();
Config.setEnable3DSRedirectFlow();
Config.setDisablePaymentCheckbox();
Config.setLanguage('es');
Config.setTermsUrl('https://your_terms_and_conditions-url.com');
```
Expand Down
3 changes: 2 additions & 1 deletion src/appRedux/publisherConfigSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ export const initialState: PublisherConfigInitialState = {
displayGracePeriodError: false,
termsUrl: '',
resetUrl: '',
enable3DSRedirectFlow: false
enable3DSRedirectFlow: false,
isPaymentCheckboxDisabled: false
};

export const publisherConfigSlice = createSlice({
Expand Down
1 change: 1 addition & 0 deletions src/appRedux/types/publisherConfigSlice.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export type PublisherConfigInitialState = {
termsUrl: string;
resetUrl: string;
enable3DSRedirectFlow: boolean;
isPaymentCheckboxDisabled: boolean;
};

type OfferIdPayload = {
Expand Down
18 changes: 14 additions & 4 deletions src/components/Adyen/Adyen.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import {
import CheckboxLegacy from 'components/CheckboxLegacy';
import { PaymentErrorStyled } from 'components/Payment/PaymentStyled';
import { validateDeliveryDetailsForm } from 'components/DeliveryDetails/RecipientForm/validators';
import { selectTermsUrl } from 'appRedux/publisherConfigSlice';
import {
selectPublisherConfig,
selectTermsUrl
} from 'appRedux/publisherConfigSlice';
import eventDispatcher, { MSSDK_ADYEN_ERROR } from 'util/eventDispatcher';
import AdyenStyled from './AdyenStyled';
import Loader from '../Loader';
Expand Down Expand Up @@ -47,8 +50,11 @@ const Adyen = ({
priceBreakdown: { discountAmount }
} = order;

const { adyenConfiguration, paymentMethods: publisherPaymentMethods } =
useAppSelector((state) => state.publisherConfig);
const {
adyenConfiguration,
paymentMethods: publisherPaymentMethods,
isPaymentCheckboxDisabled
} = useAppSelector(selectPublisherConfig);

const [isLoading, setIsLoading] = useState(true);
const { selectedPaymentMethod } = useAppSelector(
Expand Down Expand Up @@ -177,7 +183,7 @@ const Adyen = ({
adyenConfiguration?.openFirstPaymentMethod == null
? !window.matchMedia('(max-width:991px)').matches
: adyenConfiguration?.openFirstPaymentMethod,
onReady: showAdditionalText
onReady: !isPaymentCheckboxDisabled && showAdditionalText
});
dropin.mount(paymentMethodsRef.current);
setDropInInstance(dropin);
Expand Down Expand Up @@ -250,6 +256,10 @@ const Adyen = ({
};

const isCheckboxChecked = (methodName) => {
if (isPaymentCheckboxDisabled) {
return true;
}

const isBancontactCard =
selectedPaymentMethodRef?.current?.methodName === 'bancontact_card';

Expand Down
67 changes: 39 additions & 28 deletions src/components/Payment/PayPal/PayPal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ import PaypalLogo from 'assets/images/paymentMethods/PayPalColor.svg';
import Button from 'components/Button';
import { getStandardCopy } from 'util/paymentMethodHelper';
import CheckboxLegacy from 'components/CheckboxLegacy';
import { selectTermsUrl } from 'appRedux/publisherConfigSlice';
import {
selectPublisherConfig,
selectTermsUrl
} from 'appRedux/publisherConfigSlice';
import {
PayPalContentStyled,
CopyStyled,
Expand All @@ -30,10 +33,16 @@ const PayPal = ({
const termsUrl = useAppSelector(selectTermsUrl);

const { isGift } = useAppSelector(selectDeliveryDetails);
const { isPaymentCheckboxDisabled } = useAppSelector(selectPublisherConfig);

const [isChecked, setIsChecked] = useState(false);

const handleSubmit = () => {
if (isPaymentCheckboxDisabled) {
onSubmit();
return;
}

const checkbox: HTMLInputElement | null =
document.querySelector(`#paypal-input`);

Expand Down Expand Up @@ -80,37 +89,39 @@ const PayPal = ({
"We'll redirect you to PayPal to complete your purchase. Note, PayPal is subject to an additional 8% fee that will be added to your next payments."
)}
</CopyStyled>
<CheckboxWrapperStyled>
<CheckboxLegacy
className='adyen-checkout__bank-checkbox paypal-inputLabel'
checked={isChecked}
id='paypal-input'
onClickFn={(event: ChangeEvent<HTMLInputElement> | undefined) => {
if (!event) {
return;
}
{!isPaymentCheckboxDisabled && (
<CheckboxWrapperStyled>
<CheckboxLegacy
className='adyen-checkout__bank-checkbox paypal-inputLabel'
checked={isChecked}
id='paypal-input'
onClickFn={(event: ChangeEvent<HTMLInputElement> | undefined) => {
if (!event) {
return;
}

if (
event.nativeEvent instanceof KeyboardEvent &&
event.nativeEvent.key === ' '
) {
event.target.parentElement?.classList.remove(
'adyen-checkout__bank-checkbox--error'
);
}

if (
event.nativeEvent instanceof KeyboardEvent &&
event.nativeEvent.key === ' '
) {
event.target.parentElement?.classList.remove(
event.target.classList.remove(
'adyen-checkout__bank-checkbox--error'
);
}

event.target.classList.remove(
'adyen-checkout__bank-checkbox--error'
);

setIsChecked(!event.target.checked);
}}
termsUrl={termsUrl}
isPayPal
>
{getStandardCopy(isMyAccount, offer, order, isGift)}
</CheckboxLegacy>
</CheckboxWrapperStyled>
setIsChecked(!event.target.checked);
}}
termsUrl={termsUrl}
isPayPal
>
{getStandardCopy(isMyAccount, offer, order, isGift)}
</CheckboxLegacy>
</CheckboxWrapperStyled>
)}
<Button
variant='paypal'
onClickFn={handleSubmit}
Expand Down
12 changes: 11 additions & 1 deletion src/util/appConfigHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,15 @@ export const setLanguage = async (language) => {
return true;
};

export const setDisablePaymentCheckbox = () => {
store.dispatch(
initPublisherConfig({
isPaymentCheckboxDisabled: true
})
);
return true;
};

export default {
setPublisher,
setOffer,
Expand All @@ -219,5 +228,6 @@ export default {
setHidePayPal,
setHiddenPaymentMethods,
setLanguage,
setEnable3DSRedirectFlow
setEnable3DSRedirectFlow,
setDisablePaymentCheckbox
};

0 comments on commit 12de7cc

Please sign in to comment.