Adding Custom Fields and hidden parameters

Adding Hidden Parameters

If you need to pass a hidden parameter along with a transaction just add it to the paymentFormPrefill property:

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    paymentFormPrefill: {
      stored_hidden_parameter: "myValue"
    }
  });
</script>

This parameter will be attached to a transaction with a value "myValue".

Field Component - Adding Custom Fields

This component is used to add different form fields. The following types can be used:  

• `text`
• `radio`
• `radio-group`
• `radio-in-group`
• `checkbox`
• `checkbox-group`
• `checkbox-in-group`
• `select`

Adding a Text Field

For example, if you decided to add the company name input field in the profile form you can choose one of the slots, for instance profile_form_1. Your code will look as below: 

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    slots: {
      profile_form_1: [{
        component: "field",
        type: "text",
        name: "stored_customer_company_name",
        label: "payment_form.stored_customer_company_name",
        placeholder: "payment_form.stored_customer_company_name"
      }]
    },
  });
</script>

Where:

• `slots` - a property where custom fields can be added.
• `component` - the name of the component
• `type` - type of the component.
• `name` - name of the field in the form
• `label` and `placeholder` - a translation key

Before using any custom fields, make sure you have defined them inside the paymentFormPrefill config section:

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
  ...
  paymentFormPrefill: {
    stored_customer_company_name: null
  }
  ...
  });
</script>

Adding a Radio Group

Let's add a radio group, combining `radio-group` and `radio-in-group` types. That will be a radio group to select the type of the company.

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    paymentFormPrefill: {
      stored_customer_company_name: null,
      stored_customer_type: null,
    },
    translations: {
      en: {
        payment_form: {
          stored_customer_type: 'Customer type',
          stored_customer_types: {
            private: 'private',
            public: 'public',
          },
        },
      },
    },
    slots: {
      profile_form_1: [{
        component: "field",
        type: "radio-group",
        name: "stored_customer_type",
        label: "payment_form.stored_customer_type",
        children: [{
          component: 'field',
          type: "radio-in-group",
          name: "stored_customer_type",
          text: "payment_form.stored_customer_types.private",
          value: 'private',
        }, {
          component: 'field',
          type: "radio-in-group",
          name: "stored_customer_type",
          text: "payment_form.stored_customer_types.public",
          value: 'public',
        }],
      },
    ]},
  });
</script>

Where:

• `children` - an array of components
• `text` - a translation key
• `value` - a value of a field

Adding a Checkbox

Now we will add a checkbox to accept terms and conditions.

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    paymentFormPrefill: {
      stored_customer_accept_terms: false,
    },
    translations: {
      en: {
        payment_form: {
          stored_customer_accept_terms: 'I accept terms and conditions type',
        },
      },
    },
    slots: {
      profile_form_end: [{
        component: "field",
        type: "checkbox",
        name: "stored_customer_accept_terms",
        text: "payment_form.stored_customer_accept_terms",
      },
    ]},
  });
</script>

Where:

• `type` - type of the component
• `text` - a translation key

Adding a Select

Let's add a select component, which allows to choose between Yes or No.

<script>
    window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    paymentFormPrefill: {
      stored_customer_drop_donations: null,
    },
    translations: {
      en: {
        payment_form: {
          stored_customer_drop_donations: 'Do you want to drop your donations?',
          drop_donations_options: {
            yes: "I want to drop my donations",
            no: "I don't want to drop my donations"
          }
        },
      },
    },
    slots: {
      profile_form_start: [{
        component: "field",
        type: "select",
        name: "stored_customer_drop_donations",
        label: "payment_form.stored_customer_drop_donations",
        options: [
          {value: 'yes', label: 'payment_form.drop_donations_options.yes'},
          {value: 'no', label: 'payment_form.drop_donations_options.no'}
        ],
      },
    ]},
  });
</script>

Where:

• `type` - type of the component
• `options` - an array of options, that contains both a value and a label

Slots

Within slots you can create new fields. There are various slots available, please turn on the `debug` option and click on `Debug slots` option to make them visible

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    debugSlots: true,
  });
</script> 

In order to add validation rules to your custom fields, please refer to this article: Add Validation of Custom Fields