Hi there,

It would be nice if we could get a UniqID / E-Mail in the User Object from extpay.getUser() to Identify the Users across Systems.

Thanks

Describe the bug
A clear and concise description of what the bug is.

I have a working Chrome extension which uses TypeScript and it makes the build with Webpack. But unfortunately when I am following the instructions of ExtPay I cannot import the ExtPay function in any way. Below there are two things I have tried:

// in background script file

import ExtPay from 'extpay';
const extpay = ExtPay('sample-extension');

Error you will get in this case

Uncaught TypeError: extpay__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function

According to the TypeScript types that this library provides this should be correct but still it doesn't work.

Then I tried another way shown in the README without any luck.

// in background script file

import 'ExtPay'
const extpay = ExtPay('sample-extension');

Error you will get

Uncaught ReferenceError: ExtPay is not defined

So I guess ExtPay tries to expose global object without being succesful. What is the reason to use globals in the first place? :P Usually they make things more complicated.

To Reproduce
Steps to reproduce the behavior:
Have a Chrome extension project with Webpack build and see it failing

So am I missing something from the docs or does this thing work with Webpack builds?

Hi there,

It would be nice when the Date Time in the Free Trial Users Grid would be a bit more formatted, shorten like YYYY-MM-DD HH:MM without all the Timezone hassle.

Cheers
surtic86

Issue
onTrialStarted listener is not getting called when user starts trial in test mode.

Expected behavior
callback function within extpay.onTrialStarted.addListener should be executed after the user clicks on the trial link in their email.

Context
I click on a button in my options.html page that triggers the extpay.openTrialPage() function. A new window opens up, asking me to enter my email to start my free trial. A link is sent to my email. I click on the link and I get a message saying that I can now use the extension's paid features. I head back to my extension and see that nothing has changed. I inspect my extension and don't see anything in the console. I have a console.log function inside of the onTrialStarted listener and I see that it never gets called either. It's important to note that the test case where I subscribe, the onPaid listener works just fine. I'm wondering why the onPaid listener works fine but the onTrialStarted listener does not work at all? See my code below.

It is also worth noting that if I reload the options page and the getUser() function is called, the user that comes back has the property paid set as true while the property trialStartedAt is set to null. I am expecting the trialStartedAt property to have a numeric value for the trial test case. Looks like there is a bigger issue with the test trial functionality but not sure.

My Setup
background.js

importScripts('ExtPay.js');
var extpay = ExtPay('my-extension'); 
extpay.startBackground(); 

extpay.onPaid.addListener((user) => {
  console.log('user has paid');
  console.log(user);
  // do something
});

extpay.onTrialStarted.addListener((user) => {
  console.log('trial has started');
  console.log(user);
  // do something
});

manifest.json

  "content_scripts": [
      {
        "matches": ["https://extensionpay.com/*"],
        "js": ["ExtPay.js"],
        "run_at": "document_start"
      },
      {
      ...
      }
    ]

Describe the bug
I'm unable to re-login to the same ExtPay account from a different browser.
Using my developer login (should be free).

To Reproduce

If I try to login with my email it says: Sorry, we don't have that email in our records. Please try another or contact the extension developer.

If I try to sign up with the same email it says: That email has already been used.

Expected behavior
It should work as before - I should be able to login with the same email I've signed up with before (especially dev email).

Google has started offering support for Manifest Version 3 (MV3). I assume they will eventually phase out MV2. Your guide for how to implement ExtPay in a Chrome extension is for MV2. Have you tried MV3 yet? Are you planning on releasing a guide for that soon? My main concern is compatibility with service workers.

Relevant Links

• Migrating to Manifest V3
• Migrating from background pages to service workers

I don't really understand what it's asking in the signup screen when it asks for the extension ID.

"A unique id for URLs and your code" is the subheading.

Is this asking for the unique webstore ID that is associated with the extension or the Full URL or is this something we can make up on our own?

How do I switch to production? I've installed my extension from Chrome Store, but I'm still seeing the payment popup in Test mode.

Is it possible to have multiple recurring plans each with a different price rather than one monthly recurring plan?

My extension breaks if I set "run_at": "document_start" but it seems like ExtPay requires this to be in manifest. If I don't use it, I get the following console error:

Uncaught (in promise) ExtPay setup error: Please make sure the ExtPay content script in your manifest.json runs at document start. You can copy the example below into your manifest.json or check the docs: https://github.com/Glench/ExtPay#2-configure-your-manifestjson

"content_scripts": [
        {
    "matches": ["https://extensionpay.com/*"],
    "js": ["ExtPay.js"],
    "run_at": "document_start"
}]

Is it really required to use "run_at": "document_start" for ExtPay?

Moreover, Google suggest to not use "run_at": "document_start" for performance reasons as mentioned in the docs

Use "document_idle" whenever possible. The browser chooses a time to inject scripts between "document_end" and immediately after the windowonload event fires. The exact moment of injection depends on how complex the document is and how long it is taking to load, and is optimized for page load speed.

Summary:

Payment processing failed in a MV3 Chrome extension that uses extension-pay, resulting in an error message Access to fetch at 'https://r.stripe.com/0' from origin 'https://js.stripe.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Description:

When attempting to process a payment using extension-pay in a MV3 Chrome extension, the payment did not proceed, and an error message was displayed in the dev console: Access to fetch at 'https://r.stripe.com/0' from origin 'https://js.stripe.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Steps to Reproduce:

Install the test extension provided by extension-pay in a Chrome browser. (MV3 or MV2 test extension)
Navigate to the payment page via extpay's extpay.openPaymentPage() function.
Attempt to process a payment by clicking the pay button.
Observe the error message in the dev console: Access to fetch at 'https://r.stripe.com/0' from origin 'https://js.stripe.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Expected Result:

The payment should be processed successfully, and no CORS policy error should occur.

Actual Result:

The payment did not proceed, and an error message was displayed in the dev console: Access to fetch at 'https://r.stripe.com/0' from origin 'https://js.stripe.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Screenshots:

Additional Information:

This issue has also been observed in a MV2 test extension, indicating that it may be a problem with extension-pay itself. Setting the request's mode to 'no-cors' as suggested in the error message is not a viable solution, as it would disable the CORS policy and potentially create security vulnerabilities.

1. I used an alternate email to start trial of my product.
2. Then I delete and reinstall my chrome extension.
3. When I try to start trial again, it displays the following message "That email has already been used."
4. When I click login and try to login as my free trial is running, it displays the following message: "Sorry, we don't have that email in our records. Please try another or contact the extension developer."

It seems the system gets in a deadlock if a trial user reinstalls the app. Can you look into it?

Describe the bug
I have the following code in my extension to listen to the onPaid event but nothing happens when onPaid should trigger. Following the instructions, I am uninstalling the extension, and "paying" with the development login, but my listener never logs anything. The only thing to happen is ExtPay logging this message: service worker got message! Here it is: fetch-user. I have no idea how to debug this further.

import ExtPay from "extpay";
var extpay = ExtPay("XXXXX");
...
extpay.onPaid.addListener(user => {
  console.log('user paid!', user);
});

Manifest setting:

  "content_scripts": [
    {
      "matches": ["https://extensionpay.com/*"],
      "js": ["lib/ExtPay_content_script.js"],
      "run_at": "document_start"
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "assets/material-symbols-outlined.woff2", "assets/logo.svg" ],
      "matches": [ "<all_urls>", "https://extensionpay.com/*" ]
    }
  ],

Per the documentation I added the file lib/ExtPay_content_script.js with the following

import 'ExtPay'

In this file I also tried doing import ExtPay from "extpay"; just in case but same result.

To Reproduce
Steps to reproduce the behavior:

1. Setup the onPaid listener.
2. Uninstall the extension
3. Reinstall
4. Follow dev login to test "paying".
5. No console log is seen

Expected behavior
I'm expecting my console log to show in the open new tab that I triggered the payment in.

Desktop (please complete the following information):

• OS: Windows 11
• Browser chrome
• Version 105

Discussed in #37

Describe the bug
I have created an extension with id gpt-assistant and when I use it, getting this error on payment page:

Error: User doesn't match extension. Are you sure you're using the right extension id in all places?

To Reproduce

importScripts('./lib/ExtPay.js')

// background.js
const extpay = ExtPay('gpt-assistant')
extpay.startBackground();
extpay.getUser().then(user => {
    if (user.paid) {
        // ...
    } else {
        extpay.openPaymentPage()
    }
})

Desktop (please complete the following information):

• OS: Mac OS
• Browser chrome
• Version [e.g. 22]

Describe the bug
I start off with an Paid subscription status in test, then I go to the payment page and change my status to "Unpaid". I then click on my extension icon, and my popup.js, which uses the extpay.getUser() function retrieves my user details my paid status is true:

However, I then go to the payment page I can see that my payment status is "Unpaid".

To Reproduce

1. Open payment form in test mode.
2. Change status from active to unpaid.
3. Reopen extension by clicking on extension icon.
4. View console output of user output from extpay.getUser() executed un popup.js. This shows that the paid=true (which is not correct).
5. Re-open payment page from extension. You will see user status is correctly set to Unpaid.

Desktop (please complete the following information):
OS: Windows 10 Pro
Chrome browser version: 111.0.5563.65 (Official Build) (64-bit)

So developers can link directly to the login page instead of just opening the payment page.

Hello,
Changing extension ID in background.js cause me this issue.
How to solve this?

hi. i would like to know if a third party payment gateway can be used with this instead of stripe? because stripe is not available in many place

Is it possible to export the ExtPay and user interface?

I want to use the interface definition without copying and pasting the type directly from the package.

Best regards
John

I want to a build auth token with the is of the user but i cant access it.

here is an idea.
i should be able to generate activation codes by either paying for them or paying the 5% fees of extensionpay. suppose i generate 10 codes.

now i can hand out 10 codes and people would activate their accounts from that date without having to pass through the stripe payment, essentially making this a standalone activation.

this would be different from current method of asking glench to activate a bunch of emails who would activate their accounts POST setup by the user as the user is free to do the activation themselves and the dev does not have to wait for the user to activate their accounts.

this way the activation would be instantaneous

I'm using ExtPay in a project that uses the rollup bundler. I got this error when running the bundler:

[!] Error: 'runtime' is not exported by node_modules/webextension-polyfill/dist/browser-polyfill.js, imported by node_modules/extpay/dist/ExtPay.module.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/extpay/dist/ExtPay.module.js (1:21)
1: import { management, runtime, storage, windows } from 'webextension-polyfill';

It appears that none of those four symbols are exported by the 'webextension-polyfill' module.

For the moment I was able to work around the issue by importing the commonjs version, which worked great.

I'm not sure if this is just some specific problem with my setup, or might be a broader issue with the module version of the package. It seems like webextension-polyfill might have an unusual module export format? From the readme:

Be aware that the polyfill module does not export the browser API object, but defines the browser object in the global namespace (i.e. window).

Describe the bug
when running "subscriptionButton.addEventListener('click', extpay.openTrialPage)", the page that loads fails to show the name of the extension and instead shows [object PointerEvent].

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 10

The goal of this ask is for ExtensionPay to support internationalization and localization of...

The Payment Page

Ideally we would be able to control...

• internationalization of the extension name and form elements
• internationalization of the currency
• localization of the price

The Log In Page

The Login Email

The Success and Error Messages

The Reciept

Issue
I noticed that the property user.trialStartedAt has a timestamp value (for example 2023-05-26T04:21:42.296Z) when the user object is being returned within the onTrialStarted listener. When the user object is being returned from the getUser() method, the value is a Date() object (for example Thu May 25 2023 21:21:42 GMT-0700 (Pacific Daylight Time)). The docs say that the values for the property user.trialStartedAt can either be null or a Date() object without mentioning the timestamp type.

Suggested fix
Is this an easy code fix that can be implemented so that a Date() object is returned for the property user.trialStartedAt instead of a timestamp value within the onTrialStarted listener? Otherwise an update to the docs would be good. Thank you.

Hi there,
I have implemented everything fine so far but when I add a button to activate trial period I have 2 problems:

• in the pop up no matter what email I insert it keeps say to me "Please provide a valid email" when I push Strat Trial
• when I implement the button trial when I push the icon of the extension automatically opens trial pop up and It do not show the two choices

\popup.html
_

ExtensionPay.com Sample Extension

User hasn't paid :(

\popupjs

_const extpay = ExtPay('************')

document.querySelector('button').addEventListener('click', extpay.openPaymentPage)

document.querySelectorAll('button[type=submit]').addEventListener('click', extpay.openTrialPage('3-days'))

extpay.getUser().then(user => {
const now = new Date();
const sevenDays = 10006060243 // in milliseconds
if (user.trialStartedAt && (now - user.trialStartedAt) < sevenDays) {
document.querySelector('p').innerHTML = 'Enjoy your trial period 🎉'
document.querySelector('.trialone').remove()
} else {
if (user.paid) {
document.querySelector('p').innerHTML = 'User has paid! 🎉'
document.querySelector('button').remove()
}
}
})_

Thanks in advance

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
Not a real bug, but the openLoginPage function is not among the typescript declarations.

To Reproduce
Steps to reproduce the behavior:

1. Create a typescript project
2. Attempt to use the function
3. Observe error

Expected behavior
Typescript declarations contain the function

Additional context
I would open a PR to fix, but not sure if any other change is needed!

I would like to offer my customers the option to pay for example either $4.99 / month or $49 / year.

Is there any way i can do this?

I thought of adding a second extension in the ExtPay dashboard for yearly... but then i would have to handle both cases in my extension. Would be great if it could be built in feature!

I'm trying to use ExtPay as a module, but it says that it's not a function:

import ExtPay from 'extpay';
const extpay = ExtPay('detoxbox');

Actually, ExtPay is an object: JSON.stringify(ExtPay) returns {}.

What am I doing wrong?

example like for 9.99 $ Please

@Glench Your Website is down with a nginx error

Right now the popup can show up in kind of a weird place on bigger screens:

It would be awesome to be possible to add free users somehow. For example, I could be able to give a free usage in exchange for promoting my extension, or just give it out to friends.

is extPay.onPaid.addListener() is only limited for real payment. When I'm changing the status to 'Active' during testing, it's NOT triggered.

Kindly help, thanks.

I'm using ExtPay from Typescript and found it quite helpful to add type declarations for the library.
I've pasted my type declarations below if you want to publish them directly with the library.

declare module "extpay" {
  interface User {
    /** user.paid is meant to be a simple way to tell if the user should have paid features activated.
     * For subscription payments, paid is only true if subscriptionStatus is active. */
    paid: boolean

    /** date that the user first paid or null. */
    paidAt: Date | null

    /** date the user installed the extension. */
    installedAt: Date

    /** date the user confirmed their free trial. */
    trialStartedAt: Date | null

    /** active means the user's subscription is paid-for.
     * past_due means the user's most recent subscription payment has failed (expired card, insufficient funds, etc).
     * canceled means that the user has canceled their subscription and the end of their last paid period has passed. */
    subscriptionStatus?: "active" | "past_due" | "canceled"

    /** date that the user's subscription is set to cancel or did cancel at. */
    subscriptionCancelAt?: Date | null
  }

  interface ExtPay {
    getUser: () => Promise<User>
    onPaid: {
      addListener: (cb: (user: User) => void) => void
    }
    openPaymentPage: () => Promise<void>
    openTrialPage: () => Promise<void>
    onTrialStarted: {
      addListener: (cb: (user: User) => void) => void
    }
    startBackground: () => void
  }

  export default function ExtPay(extensionId: string): ExtPay
}

I have following code in my ext_pay_content.js

const extpay = ExtPay('gpt-assistant');
extpay.onPaid.addListener(() => {
    console.log("onPaid listener called")
});

and following in manifest:

...
"content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "css": [
        "style.css"
      ],
      "js": [
        "./lib/jquery.js",
        "./lib/ExtPay.js",
        "./js/content.js"
      ],
      "run_at": "document_end"
    },
    {
      "matches": [
        "https://extensionpay.com/*"
      ],
      "js": [
        "./lib/ExtPay.js",
        "./js/limits.js",
        "./js/ext_pay_content.js"
      ],
      "run_at": "document_start"
    }
  ],
...

So, when in a popup, user clicks on Subscribe button, it opens up login pay, when user makes a payment, listener is not being triggered, I have ExtPay available on background script as well:

const extpay = ExtPay('gpt-assistant')
extpay.startBackground();

I mean in my country it's not supported with a Stripe so what should I do? do you have any solution? Thank you

Hi,

Currently my pricing model is $2 a month for the extension. However, I have since learned that stripe takes a flat cut of ~30 cents and that really eats into profit especially long term. I'd like to offer a 6 month/1 year option, potentially with a discount, in addition to the $2 a month in order to combat the stripe fee on each transaction. I know ExtPay currently offers 1 year subscriptions, but I'd really prefer the flexibility for the user to choose how many months they want, 1/6/12 months. I might be able to do this by creating a second/third extension within ExtPay but then you would also need double/triple the logic in the chrome extension to handle all the different ExtPays.

Hi there,

It would be nice to have an additional Filter like "show only Payed Users" so i can see faster how many where switching from free to Payed.

Cheers
surtic86

Getting an error when trying to initialize ExtPay. I followed the instructions to integrate it and I'm using the latest version. Let me know if i'm doing something wrong. Using Google Chrome as the browser.

I tried commenting that block of code out which works but it gives an error when I call extpay.openPaymentPage(). I think it's related to the browserPolyfill not being initialized properly.

This is my manifest.json.

Background.js

payment popup window controls (minimize, close buttons) are hidden from screen. I have to make it small by resizing it from sides and then the controls are shown.

Current UI:

Expected UI:

Let me know if you need further details.

When I tried to execute extpay.getUser(), I got the following error: "ExtPay Error: timed out registering user."

Now, I looked at the code and I realized that the extension can't find a key in the storage, and it is saving this key only when you visit https://extensionpay.com/:

		"matches": ["https://extensionpay.com/*"],
		"js": ["extpay.js"],
		"run_at": "document_start"

Now, when I visit this URL, I see the following error:

Uncaught TypeError: Cannot read property 'addListener' of undefined
    at ExtPay (extpay.js:138)
    at Module.123 (extpay.js:348)
    at __webpack_require__ (extpay.js:20)
    at extpay.js:84
    at extpay.js:87

It happens in this place:

A quick googling told me that onInstalled isn't supposed to work in content scripts, so that might be the issue.

In any case, should the user really visit this page to make it work?

Hi there,

I wanted to Update your Library to use the new Method "openLoginPage". But the Package is not available in the newest Version 3.0.3.

openLoginPage

Thanks

It was working fine but after testing it with my developer credentials it just stopped working. Tried clearing chrome storage and cache but still getting this error.

When I register an email for free trial, onPaid function is not triggered. Free trial is same as the user paying so it should've been triggered.

The result is that I have to manually reload the extension whenever enabling free trials.

Is this the intended behaviour?

Can multiple uses/users/seats be detected ? I dont want someone to pay once and then reuse credentials in any number of PCs and browsers.

My extension is in development now and this has me bugged. Is there a way to detect multiple logins to an email and push them to a maybe higher plan say a teams one?