Step 2: Customize the Payment Form

Merchants can configure the PayNearMe JS Library via a required initialization script (i.e., PMN.init) that can include custom targets (modal, iframe, drawer, etc.), language preferences, and preloaded consumer data. Place this script reference after loading the JS library.

The following code displays a sample script.

<script>
PNM.init( {
    
    "data": {
        "disbursement_balance_amount": "4000.00",
        "min_disbursement_amount": "25.00",
        "max_disbursement_amount": "5000.00"
    },
    "auto_resize": true,
    "language": "en",
    "header_size": "35",
    "header_bkgnd": "#385723",
    "header_color": "ffffff",
    
    "callback": "<YOUR_CALLBACK_FUNCTION>",
    "target": "<YOUR_CONTAINER_ID>",
    
    "actions": {
        "<YOUR_PAYMENT_BUTTON_ID>": {
            "action": "pay",
            "header": "Make a Payment",
            "debit": true,
            "credit": true,
            "ach": true,
            "google_pay": true,
            "cash": true,
            "segmentation_id": "550e8400-e29b-41d4-a716-446655440000"
        },
        "<YOUR_DISBURSEMENT_BUTTON_ID>": {
            "action": "withdrawal",
            "header": "Disburse",
            "debit": true,
            "segmentation_id": "550e8400-e29b-41d4-a716-446655440000"
        }
    },
    "header": "",
    "order_token": "<YOUR_TOKEN>"
});
</script>

This script renders the following payment and disbursement screen (when the consumer clicks the configured pay or disburse buttons/links).

Screen After Clicking Payment Button (left) and Screen After Clicking Disburse Button (right)

Use the following parameters to configure the embedded client form.

Name	Description	Type	Required?
`order_token`	The `secure_smart_token` value that’s returned in the `create_order` and `get_smart_token` calls. This field is required and must be included to initialize the JS library.	string	R
`actions`	An array of UI and button settings, including payment methods and behavior, defined by the given button ID.	array	R
`action`	Defines the action(s) this button will perform on the order. Supported options include the following: `tokenize` - Adds a payment method to a consumer’s record and returns a token to the merchant for storage. Tokens are unique string IDs that reference a consumer’s stored payment information (such as a debit/credit card or an echeck). `pay` - Gives consumers the ability to add or choose an existing payment method while making a payment. This is the default value for this parameter. `auto_pay` - Enables consumers to define a schedule of recurring payments using a new or existing payment method. `withdrawal`- Gives consumers the ability to add or choose a payment method while performing a disbursement of funds.	enum	R
`header`	The header text that displays centered at the top of the browser window. Headers can be defined per action or can be defined globally and display for all actions.	string	O
`ach`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`apple_pay`	Use either `true` or `false` to define which payment types should be preloaded. NOTE: The Apple Pay option only displays on the Safari browser. When the consumer attempts to use Apple Pay from a browser that is not Safari, an error message displays.	bool	O
`cash`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`cash_app`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`credit`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`debit`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`google_pay`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`paypal`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`venmo`	Use either `true` or `false` to define which payment types should be preloaded.	bool	O
`segmentation_id`	A unique string ID (e.g., UUID). This field can be used for data analytics and reporting.	string	O
`hide_saved_payment_methods`	When set to `true`, this setting hides existing, previously tokenized payment methods for all actions. When set to `false`, this setting shows all previously tokenized payment methods for all actions. When unset or null, the Embedded Client will hide saved payment methods for the `tokenize` action and show saved payment methods for the `pay` and `withdrawal` actions.	bool	O
`require_push_enabled`	When set to `true`, this setting hides saved payment methods and rejects adding new payment methods that are not enabled for disbursements. NOTE: This setting applies only to the `tokenize` action. Use this setting when you create a standard order in advance, but want to use it only for disbursements when sending a user through the `tokenize` flow.	bool	O
`payment_amount`	Use this parameter to force a fixed payment/disbursement amount.	dec	O
`payment_field_fixed`	Set to `true` to prevent consumers from changing the amount. Setting this field to `false` creates an editable field where consumers can enter their own payment/disbursement amounts.	bool	O
`callback`	The method to call when certain events occur, such as successful or declined payments or an error. This field is required.	func	R
`auto_resize`	Setting this parameter to `true` ensures that the client remains responsive and will properly display in the HTML target as content is added and updated.	bool	O
`data`	Use this object to define the consumer’s global disbursement limits.	obj	O
`data.max_disbursement_amount`	The maximum allowable amount for a disbursement. This parameter can also be defined per action. For example, if your maximum allowable disbursement amount for ACH transactions was higher than other payment methods, you would include this parameter in an “ACH Disbursement” action that was separate from other disbursement actions.	string	O
`data.min_disbursement_amount`	The minimum amount required for a disbursement transaction. This parameter can be defined per action.	string	O
`data.disbursement_balance_amount`	The amount available for a disbursement. This parameter can be defined per action.	string	O
`language`	Supported values for this field include the following: `en` – English. This is the form’s default language. `sp` - Spanish	enum	O
`header_size`	The font size of the header text in pixels. This parameter can be defined per action.	string	O
`header_bkgnd`	The hex code of the header’s background color. If not defined, the embedded client defaults the color to Vivid Blue or `#0181F1`. This parameter can be defined per action.	string	O
`header_color`	The hex code of the header’s text. If not defined, the embedded client defaults the color to White or `#ffffff`. This parameter can be defined per action.	string	O
`target`	The element where the iframe will display. Supported options include the following: `modal` – (keyword) launches the embedded form in a full-screen modal with a `#pnm-modal` ID. This option is the same as null. `drawer` – (keyword) launches the form in a side drawer. `<id>` - The ID of the DOM element where the library should insert the iframe.	string	O