From 83431f6b1e346a37f728558f265a9ded90e51c03 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Mon, 27 Mar 2023 17:53:49 +0300 Subject: [PATCH 1/2] mark all Collect fields `react-wrapper` --- src/Fields.tsx | 1 + src/constants.ts | 29 +++++++++++++++++++---------- src/types/Form.ts | 1 + 3 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/Fields.tsx b/src/Fields.tsx index 3a1d117..e1bf6e2 100644 --- a/src/Fields.tsx +++ b/src/Fields.tsx @@ -24,6 +24,7 @@ import { type GeneralFieldProps = { className: string; + framework: string; onFocus: (info: VGSCollectFocusEventData) => void; onBlur: (info: VGSCollectFocusEventData) => void; onUpdate: (state: VGSCollectStateParams) => void; diff --git a/src/constants.ts b/src/constants.ts index 184c652..8eb7dad 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -7,43 +7,52 @@ const FIELD_EVENTS = { onKeyDown: 'keydown', onKeyPress: 'keypress' }; - +const framework = 'react-wrapper' const DEFAULT_CONFIG = { TEXT: { type: 'text', - placeholder: 'Cardholder Name' + placeholder: 'Cardholder Name', + framework, }, CARD_NUMBER: { type: 'card-number', - placeholder: 'Credit Card Number' + placeholder: 'Credit Card Number', + framework, }, CARD_EXPIRATION_DATE: { type: 'card-expiration-date', - placeholder: 'Card Expiration Date' + placeholder: 'Card Expiration Date', + framework, }, CARD_SECURITY_CODE: { type: 'card-security-code', - placeholder: 'CVC/CVV' + placeholder: 'CVC/CVV', + framework, }, PASSWORD: { type: 'password', - placeholder: 'Enter password' + placeholder: 'Enter password', + framework, }, SSN: { type: 'ssn', - placeholder: 'SSN' + placeholder: 'SSN', + framework, }, ZIP_CODE: { type: 'zip-code', - placeholder: 'Zip Code' + placeholder: 'Zip Code', + framework, }, TEXTAREA: { type: 'textarea', - placeholder: 'Comment' + placeholder: 'Comment', + framework, }, NUMBER: { type: 'number', - placeholder: 'Number' + placeholder: 'Number', + framework, } }; diff --git a/src/types/Form.ts b/src/types/Form.ts index 3d8305d..6dbd33f 100644 --- a/src/types/Form.ts +++ b/src/types/Form.ts @@ -107,6 +107,7 @@ interface IDefaultFieldOptions { readonly?: BooleanValue; inputMode?: InputMode; tokenization?: IFieldTokenization | boolean; + framework?: 'react-wrapper'; } type FieldConfig = From 241833abec1936f9027468b96a24d28385f6735e Mon Sep 17 00:00:00 2001 From: Alexandr Date: Thu, 6 Apr 2023 17:53:09 +0300 Subject: [PATCH 2/2] add insight config method --- src/Fields.tsx | 1 - src/Form.tsx | 6 ++++++ src/constants.ts | 10 ---------- src/types/Form.ts | 7 +++++-- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/Fields.tsx b/src/Fields.tsx index e1bf6e2..3a1d117 100644 --- a/src/Fields.tsx +++ b/src/Fields.tsx @@ -24,7 +24,6 @@ import { type GeneralFieldProps = { className: string; - framework: string; onFocus: (info: VGSCollectFocusEventData) => void; onBlur: (info: VGSCollectFocusEventData) => void; onUpdate: (state: VGSCollectStateParams) => void; diff --git a/src/Form.tsx b/src/Form.tsx index 2e5b448..26f1fb3 100644 --- a/src/Form.tsx +++ b/src/Form.tsx @@ -64,6 +64,12 @@ export function VGSCollectForm(props: ICollectFormProps) { if (cname) { form.useCname(cname); } + + if (form.insightsConfig) { + form.insightsConfig({ + framework: 'react' + }) + } setFormInstance(form); } diff --git a/src/constants.ts b/src/constants.ts index 8eb7dad..cedb94d 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -7,52 +7,42 @@ const FIELD_EVENTS = { onKeyDown: 'keydown', onKeyPress: 'keypress' }; -const framework = 'react-wrapper' const DEFAULT_CONFIG = { TEXT: { type: 'text', placeholder: 'Cardholder Name', - framework, }, CARD_NUMBER: { type: 'card-number', placeholder: 'Credit Card Number', - framework, }, CARD_EXPIRATION_DATE: { type: 'card-expiration-date', placeholder: 'Card Expiration Date', - framework, }, CARD_SECURITY_CODE: { type: 'card-security-code', placeholder: 'CVC/CVV', - framework, }, PASSWORD: { type: 'password', placeholder: 'Enter password', - framework, }, SSN: { type: 'ssn', placeholder: 'SSN', - framework, }, ZIP_CODE: { type: 'zip-code', placeholder: 'Zip Code', - framework, }, TEXTAREA: { type: 'textarea', placeholder: 'Comment', - framework, }, NUMBER: { type: 'number', placeholder: 'Number', - framework, } }; diff --git a/src/types/Form.ts b/src/types/Form.ts index 6dbd33f..194060b 100644 --- a/src/types/Form.ts +++ b/src/types/Form.ts @@ -107,7 +107,6 @@ interface IDefaultFieldOptions { readonly?: BooleanValue; inputMode?: InputMode; tokenization?: IFieldTokenization | boolean; - framework?: 'react-wrapper'; } type FieldConfig = @@ -201,12 +200,16 @@ interface VGSCollectSubmitOptions { withCredentials: BooleanValue; } +interface VGSCollectInsightsConfig { + framework?: string; +} interface IVGSCollectForm { /** * Docs: https://www.verygoodsecurity.com/docs/api/collect/#api-formfield */ field(selector: string, options: FieldConfig): IVGSCollectFieldInstance; - + + insightsConfig(insightParameters: VGSCollectInsightsConfig): void; /** * Docs: https://www.verygoodsecurity.com/docs/api/collect/#api-fieldon * https://www.verygoodsecurity.com/docs/api/collect/#api-fieldoff