Custom Script Payment Method

This option allows highly configureable payment methods. This includes (but is not limited to) custom dropdown fields and referencing to external data sources.

Configuring

To configure a Custom Script Payment Method, go to admin panel:

Home › B3_Checkout › Partner payment methods › Add partner payment method

In the modal, select:

the partner this payment method is for
Custom as a type name
check Enable custom component
Paste a configuration JSON into the Public config arguments field
Set a priority, for instance 1. This changes the order in which the labels appear during checkout

Afterwards, verify it’s working during checkout. You should see the setup payment method for the selected partner.

Public config arguments

This JSON file describes the configuration of the Custom script payment Method. See examples below.

Dropdown Menu

This restricts the input for users to a set of choices as shown in the screenshot below.

Be sure to change the name of the payment method as well as the name of the customer field. Set required as appropriate. Be sure to not change the fieldType. The options describe the possible selections for the user. label is what is shown to the user. value is what is taken as the final option and is thus shown in the service panel, documents and CSVs.

{
  "name": "Charge another department",
  "custom_fields": [
    {
      "name": "Department Number",
      "required": true,
      "fieldType": "KtFieldSingleSelect",
      "props": {
        "options": [
          {
            "label": "Department number: 12345",
            "value": "12345-A"
          },
          {
            "label": "Department number: 23456",
            "value": "23456-B"
          },
          {
            "label": "My department number is not listed",
            "value": "Unknown"
          }
        ]
      }
    }
  ]
}

Reference to another source (dynamic values)

If the input values change often, you should maybe consider referencing the values from another field. The following setup references to another dropdown at <HOST_NAME>/en/request.

NOTE The url has to be set to whatever host name your instance is using!

{
  "name": "Internal Order",
  "custom_fields": [
    {
      "name": "Personal ID",
      "required": true,
      "fieldType": "SingleSelectHtmlParser",
      "props": {
        "url": "<HOST_NAME>/en/request",
        "parentContainer": "select",
        "labelContainer": "option",
        "valueContainer": "option",
        "getValueHtmlAttribute": "value"
      }
    }
  ]
}