Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions kits/matrix.json
Original file line number Diff line number Diff line change
Expand Up @@ -118,5 +118,9 @@
{
"name": "Adobe",
"local_path": "kits/adobe"
},
{
"name": "Rokt Pay Plus",
"local_path": "kits/roktpayplus"
}
]
13 changes: 13 additions & 0 deletions kits/roktpayplus/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# [1.1.0](https://github.com/mparticle-integrations/mparticle-javascript-integration-roktpayplus/compare/v1.0.0...v1.1.0) (2026-06-15)


### Bug Fixes

* point package.json repository at the mparticle-integrations repo ([#4](https://github.com/mparticle-integrations/mparticle-javascript-integration-roktpayplus/issues/4)) ([8be4dc6](https://github.com/mparticle-integrations/mparticle-javascript-integration-roktpayplus/commit/8be4dc6867fbfe0251977797e42b05892f504acf))


### Features

* add gwpApproved setting for gift-with-purchase conversions ([#2](https://github.com/mparticle-integrations/mparticle-javascript-integration-roktpayplus/issues/2)) ([98d7246](https://github.com/mparticle-integrations/mparticle-javascript-integration-roktpayplus/commit/98d7246ebeaeeff993b89465c02577d404ab921d))

# 1.0.0 (2026-06-05)
63 changes: 63 additions & 0 deletions kits/roktpayplus/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# Rokt Pay+ mParticle Web Kit

An mParticle web kit that forwards the events your application already logs through the mParticle web SDK to a Rokt Pay+ placement. It lets your conversion funnel drive the placement experience through configuration, without adding placement-specific code to your application.

## How it works

The kit loads alongside the mParticle web SDK and receives the events your application logs. It translates a configurable set of those events into the messages a Rokt Pay+ placement listens for, and posts them to the embedding window.

| Rokt signal | Source |
| :-- | :-- |
| `initiated` | the kit initializes (application loaded) |
| `stepComplete` | a configured funnel-step screen is viewed |
| `approved` | the configured conversion event |
| every other Pay+ signal (`pending`, `accountCreated`, `purchaseCompleted`, ...) | the matching configured custom event |

## Configuration

You decide which of your screens and events map to each Rokt signal through this kit's settings in the mParticle dashboard. Each setting accepts a single name or a comma-separated list of names.

Funnel progression is driven by **page view events**, matched on the screen name. The conversion and every other outcome are **custom events**, matched on the event name. A page view is never the conversion.

The screen name is read from the page view's `screen_name` attribute (falling back to the page name when that attribute is absent), so the names you list in `progressionScreenNames` are the `screen_name` values your application sends.

`progressionScreenNames` lists the screens that emit `stepComplete`. Each custom-event setting maps an event name to the Pay+ signal of the same name: `approvedEventName` maps to `approved`, `purchaseCompletedEventName` maps to `purchaseCompleted`, and so on. The full list of fields, each with its description, appears in the connection settings in the mParticle dashboard.

`initiated` is emitted automatically when the kit initializes. If no settings are provided, the kit applies a default mapping: each page view is treated as a funnel step, and a custom event named `conversion` is treated as the approval.

## Message format

Each message posted to the embedding window has the following shape:

```js
{ source: 'rokt-payplus-kit', type: 'approved', detail: { /* event attributes */ } }
```

Consumers read `type` to determine the signal; `detail` carries the originating event's attributes.

## Usage

JS kits are automatically included with your mParticle.js file when you load mParticle via the snippet. To turn this integration on for your workspace and configure the settings above, contact your Rokt account team.

## Development

The kit is a single TypeScript file (`src/RoktPayPlus-Kit.ts`) built with Vite.

### Build

```shell
npm install
npm run build # outputs dist/RoktPayPlus-Kit.{common,esm,iife}.js and RoktPayPlus-Kit.d.ts
npm run build:watch # rebuild on change
```

### Test

```shell
npm test # runs the vitest suite (jsdom, no browser required)
npm run typecheck # tsc --noEmit
```

## License

Apache-2.0. See [LICENSE](LICENSE).
73 changes: 73 additions & 0 deletions kits/roktpayplus/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import js from '@eslint/js';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';
import globals from 'globals';

const vitestGlobals = {
describe: 'readonly',
it: 'readonly',
test: 'readonly',
expect: 'readonly',
beforeEach: 'readonly',
afterEach: 'readonly',
beforeAll: 'readonly',
afterAll: 'readonly',
vi: 'readonly',
vitest: 'readonly',
};

const sharedRules = {
...js.configs.recommended.rules,
...typescriptEslint.configs.recommended.rules,
...prettierConfig.rules,
'prettier/prettier': 'error',
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
'no-prototype-builtins': 'off',
};

export default [
{ ignores: ['**/node_modules/**', '**/dist/**'] },
// Source files
{
files: ['src/**/*.ts'],
plugins: {
'@typescript-eslint': typescriptEslint,
prettier,
},
languageOptions: {
parser: tsParser,
globals: { ...globals.browser, process: 'readonly' },
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: sharedRules,
},
// Test files
{
files: ['test/**/*.ts'],
plugins: {
'@typescript-eslint': typescriptEslint,
prettier,
},
languageOptions: {
parser: tsParser,
globals: { ...globals.browser, ...vitestGlobals },
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
...sharedRules,
'@typescript-eslint/no-this-alias': 'off',
},
},
];
Loading
Loading