@motopays/pay-form 2.4.1-rc.0 → 2.5.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2.5.0
+
+### Added
+- master checkbox. Read more details in README.md
+- GooglePay confirmation payment button
+- GooglePay button and card auth methods settings. Read more details in README.md
+
+### Fixed
+- Toastr overlay remains in DOM after unmount
+
+
+
+
+
+
+
+
 ## 2.4.0
 
 ### Added

package/README.md

@@ -203,7 +203,7 @@ export class AppComponent {
 | initiator                  | TPaymentInitiator | Identifies who of 2 types initiated the payment. Currently accepted: {'customer', 'merchant'}                                                       |
 | webhookUrl                 | string | URL where the Motopays will send hooks about the payment status changes                                                                                                                  |
 | returnUrl                  | string | The URL to which the user will be redirected after completing some types of payment, such as PayPal                                                                                                               |
-| description                | string | Short order description for the customer                                                                                                                                             |
+| description                | string | *Required for using Apple Pay. Short order description for the customer                                                                                                                                             |
 | details                    | ISimple<any> | Additional information about payment                                                                       |
 | phoneNumber                | string | End-customer phone number (can be changed if a customer fill the number by themselves)                                                                       |
 | ipAddress                  | string | End-customer ip address                                                                       |
@@ -231,7 +231,7 @@ export class AppComponent {
 | languageSettings            | ILanguageSettings | The language settings
 | languageSettings.code       | TLanguageCode | The code of language. Currently accepted: { 'en-US', 'es-ES', 'fr-FR' }. It's also possible to add another code by adding custom language to languageSettings.languages
 | languageSettings.languages  | Partial<Record<TLanguageCode, ILanguage>> | Languages by codes
-| components                  | TComponentType[] | Components that will be on the form, as well as their order, which depends on the position of the components in the array. Currently accepted: {'available-card-brands', 'card-list', 'requisites', 'phone-number', 'charge-terms', 'pay-button', 'apm-list', 'user-preferences', 'merchant-info', 'protected-by', 'no-methods'} 
+| components                  | TComponentType[] | Components that will be on the form, as well as their order, which depends on the position of the components in the array. When 'master' is used, the components array must not contain charge-terms or user-preferences at the same time. In that case, checkboxes are still taken from userPreferences and chargeTerms, but they are rendered inside the master container instead of separate sections. Currently accepted: {'available-card-brands', 'card-list', 'requisites', 'phone-number', 'charge-terms', 'pay-button', 'apm-list', 'user-preferences', 'merchant-info', 'protected-by', 'no-methods', 'master'} 
 | resultComponentsStructure   | IResultComponentsStructure | Components that will be on the result page of the form, as well as their order, which depends on the position of the components in the array
 | resultComponentsStructure<br>.aboveResult   | TComponentType[] | Components that will be on the result page of the form above the result, as well as their order, which depends on the position of the components in the array
 | resultComponentsStructure<br>.belowResult   | TComponentType[] | Components that will be on the result page of the form below the result, as well as their order, which depends on the position of the components in the array
@@ -241,9 +241,14 @@ export class AppComponent {
 | chargeTerms                 | IChargeTermsSettings | The charge terms section |
 | chargeTerms.checkboxes      | Partial<Record<TLanguageCode, string>>[] | The user must select all the checkboxes to proceed with the payment. Without selecting these checkboxes, the payment cannot be made. Multilingual support and linkify. Read more about linkify in the Linkify section |
 | chargeTerms.text            | Partial<Record<TLanguageCode, string>> | The text of charge terms. For example, description of terms and policy. Multilingual support and linkify. Read more about linkify in the Linkify section                          |
+| chargeTerms.shape   | TCheckboxShape | The shape of master checkbox. Currently accepted: { circle, square } |
 | userPreferences             | IUserPreferencesSettings | The user preferences section |
 | userPreferences.text        | Partial<Record<TLanguageCode, string>> | The text of user preferences. For example, description of autorefill plan. Multilingual support and linkify. Read more about linkify in the Linkify section                          |
 | userPreferences.checkboxes  | IUserPreferenceCheckbox[]  | The text of user preferences. For example, description of autorefill plan. Multilingual support and linkify. Read more about linkify in the Linkify section |
+| userPreferences.shape   | TCheckboxShape | The shape of master checkbox. Currently accepted: { circle, square } |
+| master                    | IMasterSettings | Master checkbox section that combines charge terms and user preferences into a single control. Individual checkboxes are taken from the userPreferences and chargeTerms settings. |
+| master.text   | Partial<Record<TLanguageCode, string>> | The label text of the master checkbox. Multilingual support and linkify. Read more about linkify in the Linkify section |
+| master.shape   | TCheckboxShape | The shape of master checkbox. Currently accepted: { circle, square } |
 | availableCardBrands         | string[] or CreditCardTypeCardBrandId[] | The сard brands for which icons will be displayed on the form as card payment methods. Currently accepted: {american-express, discover, jcb, maestro, mastercard, unionpay, visa} |
 | requiredFieldsBehavior      | IRequiredFieldsBehavior | Configuration of the display of required fields for the user to manage the user's focus on them |
 | requiredFieldsBehavior<br>.showStars | boolean | Show the stars on labels of required fields |
@@ -256,6 +261,9 @@ export class AppComponent {
 | paymentFlow                | IPaymentFlowSettings | The payment flow configuration |
 | paymentFlow.tokenizeCard   | boolean | If true, than for not 'default' paymentFlow.type card requisites will be tokenized (only for 'invoice-overridden' and 'payment-overridden' paymentFlow.type) |
 | paymentFlow.type           | TPaymentFlow | If 'invoice-overridden' and createInvoice callback provided to the payment form, the createInvoice callback will be called with the invoice generated by the payment form. After receiving the invoice from the createInvoice callback, the payment process will proceed according to the default scenario. If 'payment-overridden' and makePayment callback provided to the payment form, the entire payment process will be handled through the makePayment callback with the invoice generated by the payment form |
+| googlePay   | IGooglePayIntegratorSettings | Google pay settings |
+| googlePay.button   | ButtonOptions | Default Google Pay button options (the 'onClick' callback and 'allowedPaymentMethods' field must not be provided). See more details: https://developers.google.com/pay/api/web/guides/resources/customize |
+| googlePay.allowedAuthMethods   | CardAuthMethod[] | Allowed card auth methods. Currently accepted: { PAN_ONLY, CRYPTOGRAM_3DS } See more details: https://developers.google.com/pay/api/web/guides/tutorial#supported-card-networks|
 
 ### Example
 
@@ -491,7 +499,7 @@ IPaymentResponse {
     }
     payment: {
         paymentId: string;
-        state: TPaymentState; //on of strings: completed, rejected, needAction
+        state: TPaymentState; //one of strings: completed, rejected, needAction
         rebillAnchor: string;
         info: {
             completeProcessingTime?: Date;
@@ -558,6 +566,8 @@ For receiving analytics listen analyticsTracked events.
 'remove-card-button-click' - the card removing button has been clicked. Payload: ICardAnalytics.<br>
 'select-card-button-click' - the card selecting button has been clicked. Payload: ICardAnalytics.<br>
 'apms-show-button-click' - the apm collapse text has been clicked. Payload: ICardAnalytics.<br>
+'master-click' - the master checkbox has been clicked. <br>
+'master-focus' - the master checkbox has been clicked. <br>
 
 Examples of dynamic event types (number inserting):
 &emsp;1. Example of the first checkbox: 'charge-term-checkbox-0-check'
@@ -575,7 +585,9 @@ type TAnalyticsServiceAction =
   | ServiceAction<'expiration-date-field-focus'>
   | ServiceAction<'cvv-field-focus'>
   | ServiceAction<'card-holder-field-focus'>
-  | ServiceAction<'number-field-focus'> //
+  | ServiceAction<'number-field-focus'>
+  | ServiceAction<'master-click'>
+  | ServiceAction<'master-focus'>
   | ServiceAction<
       `charge-term-checkbox${`-${number}`}-focus`,
       IChargeTermsAnalytics

package/index.d.ts

@@ -2,7 +2,6 @@
 
 import { CreditCardTypeCardBrandId } from 'credit-card-type/dist/types';
 
-export type TAmountType = "gross-without-gst" | "net" | "gross";
 export type TOrderType = "regular" | "free-trial" | "gems";
 export type TPaymentInitiator = "customer" | "merchant";
 export type TButtonStateUntilFilled = "enabled" | "disabled" | "hidden-enabled";
@@ -15,11 +14,14 @@ export interface IUserPreferenceCheckbox extends ITextContainer {
 	name: string;
 	defaultValue?: boolean;
 }
+export type TCheckboxShape = "circle" | "square";
 export interface IUserPreferencesSettings extends ITextContainer {
 	checkboxes?: IUserPreferenceCheckbox[];
+	shape?: TCheckboxShape;
 }
 export interface IChargeTermsSettings extends ITextContainer {
 	checkboxes?: Partial<Record<TLanguageCode, string>>[];
+	shape?: TCheckboxShape;
 }
 export interface ILink extends ITextContainer {
 	href: string;
@@ -36,7 +38,7 @@ export interface IRequiredFieldsBehavior {
 	markAsInvalidUntilCorrect?: boolean;
 	buttonStateUntilFilled?: TButtonStateUntilFilled;
 }
-export type TComponentType = "available-card-brands" | "card-list" | "requisites" | "phone-number" | "charge-terms" | "pay-button" | "apm-list" | "user-preferences" | "merchant-info" | "protected-by" | "no-methods";
+export type TComponentType = "available-card-brands" | "card-list" | "requisites" | "phone-number" | "charge-terms" | "pay-button" | "apm-list" | "user-preferences" | "merchant-info" | "protected-by" | "no-methods" | "master";
 export type TSecurityCodeLabel = "CVV" | "CVC" | "CID" | "CVN" | "CVE" | "CVP2";
 export interface ISecurityCodeLabels extends Record<TSecurityCodeLabel, string> {
 }
@@ -99,6 +101,10 @@ export interface ILanguage {
 		};
 	};
 	close: string;
+	master: {
+		selectAll: string;
+	};
+	confirmPayment: string;
 }
 export interface ILanguageSettings {
 	code: TLanguageCode;
@@ -119,6 +125,13 @@ export interface IPaymentFlowSettings {
 	tokenizeCard?: boolean;
 	type?: TPaymentFlow;
 }
+export interface IMasterSettings extends ITextContainer {
+	shape?: TCheckboxShape;
+}
+export interface IGooglePayIntegratorSettings {
+	button?: Omit<google.payments.api.ButtonOptions, "onClick" | "allowedPaymentMethods">;
+	allowedAuthMethods?: google.payments.api.CardAuthMethod[];
+}
 export interface ISettings {
 	isCloseButtonVisible?: boolean;
 	isProblemTipsListVisible?: boolean;
@@ -130,6 +143,7 @@ export interface ISettings {
 	urls: IServicesUrls;
 	components?: TComponentType[];
 	resultComponentsStructure?: IResultComponentsStructure;
+	master?: IMasterSettings;
 	merchantInfo?: IMerchantInfoSettings;
 	chargeTerms?: IChargeTermsSettings;
 	userPreferences?: IUserPreferencesSettings;
@@ -138,10 +152,12 @@ export interface ISettings {
 	events?: IEvents;
 	apmsCollapse?: boolean;
 	paymentFlow?: IPaymentFlowSettings;
+	googlePay?: IGooglePayIntegratorSettings;
 }
 export interface ISimple<Value = any> {
 	[key: string]: Value;
 }
+export type TAmountType = "gross-without-gst" | "net" | "gross";
 export interface IBillingAddress {
 	addressLine: string;
 	city: string;
@@ -328,7 +344,7 @@ export interface IUserPreferencesAnalytics {
 	name: string;
 	text: string;
 }
-export type TAnalyticsServiceAction = ServiceAction<"init-start"> | ServiceAction<"loading-finish"> | ServiceAction<"card-number-field-focus"> | ServiceAction<"expiration-date-field-focus"> | ServiceAction<"cvv-field-focus"> | ServiceAction<"card-holder-field-focus"> | ServiceAction<"number-field-focus"> | ServiceAction<`charge-term-checkbox${`-${number}`}-focus`, IChargeTermsAnalytics> | ServiceAction<`charge-term-checkbox${`-${number}`}-check`, IChargeTermsAnalytics> | ServiceAction<`charge-term-checkbox${`-${number}`}-uncheck`, IChargeTermsAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-focus`, IUserPreferencesAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-check`, IUserPreferencesAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-uncheck`, IUserPreferencesAnalytics> | ServiceAction<"pay-button-focus"> | ServiceAction<"pay-button-click"> | ServiceAction<`${string}-button-focus`> | ServiceAction<`${string}-button-click`> | ServiceAction<"add-card-button-focus"> | ServiceAction<"add-card-button-click"> | ServiceAction<"card-options-button-click", ICardAnalytics> | ServiceAction<"cards-toggle-button-click", ICardListAnalytics> | ServiceAction<"remove-card-button-click", ICardAnalytics> | ServiceAction<"select-card-button-click", ICardAnalytics> | ServiceAction<"apms-show-button-click", ICardAnalytics>;
+export type TAnalyticsServiceAction = ServiceAction<"init-start"> | ServiceAction<"loading-finish"> | ServiceAction<"card-number-field-focus"> | ServiceAction<"expiration-date-field-focus"> | ServiceAction<"cvv-field-focus"> | ServiceAction<"card-holder-field-focus"> | ServiceAction<"number-field-focus"> | ServiceAction<"master-click"> | ServiceAction<"master-focus"> | ServiceAction<`charge-term-checkbox${`-${number}`}-focus`, IChargeTermsAnalytics> | ServiceAction<`charge-term-checkbox${`-${number}`}-check`, IChargeTermsAnalytics> | ServiceAction<`charge-term-checkbox${`-${number}`}-uncheck`, IChargeTermsAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-focus`, IUserPreferencesAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-check`, IUserPreferencesAnalytics> | ServiceAction<`user-preference-checkbox${`-${number}`}-uncheck`, IUserPreferencesAnalytics> | ServiceAction<"pay-button-focus"> | ServiceAction<"pay-button-click"> | ServiceAction<`${string}-button-focus`> | ServiceAction<`${string}-button-click`> | ServiceAction<"add-card-button-focus"> | ServiceAction<"add-card-button-click"> | ServiceAction<"card-options-button-click", ICardAnalytics> | ServiceAction<"cards-toggle-button-click", ICardListAnalytics> | ServiceAction<"remove-card-button-click", ICardAnalytics> | ServiceAction<"select-card-button-click", ICardAnalytics> | ServiceAction<"apms-show-button-click", ICardAnalytics>;
 export interface IApmsShowAnalytics {
 	show: boolean;
 }