Merge pull request #890 from PayButton/ui-new-advanced-button-generator-options

[UI] Add advanced button generator options

Author: Klakurka

components/ButtonGenerator/data.js

@@ -161,4 +161,23 @@ export const generatorFormFields = [
     helpText: 'Allow changing the payment amount',
     advanced: true
   },
+  {
+    name: 'OP-Return',
+    placeholder: 'myCustomMessage',
+    key: 'opReturn',
+    className: 'col_lg',
+    type: 'input',
+    onChange: 'handleChange',
+    helpText: 'Custom message that will be sent with the transaction',
+    advanced: true
+  },
+  {
+    name: 'Disable Payment ID',
+    key: 'disablePaymentId',
+    className: 'col_sm_center',
+    type: 'boolean',
+    default: false,
+    helpText: 'Removes the random ID generated for the payment that is used to prevent the onSuccess callback to be triggered by a person who has the payment screen open at the same time as another',
+    advanced: true
+  },
 ]

components/ButtonGenerator/index.tsx

@@ -35,6 +35,8 @@ interface ButtonState {
   disabled: boolean
   editable: boolean
   widget: boolean
+  disablePaymentId: boolean
+  opReturn: string
   [key: string]: any
 }
 
@@ -70,7 +72,9 @@ export const initialButtonState: ButtonState = {
   disableEnforceFocus: true,
   disabled: false,
   editable: false,
-  widget: false
+  widget: false,
+  disablePaymentId: false,
+  opReturn: ''
 }
 
 export default function ButtonGenerator (): JSX.Element {

components/Paybutton/paybutton.module.css

@@ -144,6 +144,8 @@
   padding: 25px;
   border-radius: 10px;
   border: 1px solid var(--secondary-text-color);
+  overflow-y: auto;
+  max-height: 90vh;
 }
 
 .form_ctn p {