Capacitor plugin not working in js

1

hello,
can anyone help me with capacitor plugins in vanilla js?
I cannot find a guide how to do.
I follow the plugin’s documentation, install with npm and sync, add the code on main.js but the plugin don’t works.
it doesn’t seem to start, maybe I’m doing some configuration wrong or something. There is no documentation to follow, can anyone help me?

2

Can’t help without you posting more detailed information and the actual code you are using.

3

i made an app with framework7 cli and capacitor.
I need (for example), this plugin :

Where do i put the

import { Stripe } from '@capacitor-community/stripe';

export async function initialize(): Promise<void> {
  Stripe.initialize({
    publishableKey: "Your Publishable Key",
  });
}

code? On main.js it’s not working

4

No one can anwser this.
No help found on the docs/internet

5
6

I’ve searched the whole forum, and there is no answer to this question.

7

Your didn’t provide proper examples of what and where did you try

8

I think it should go in the file where it is going to be used. Also, if you use VS Code install the Ionic extension, I find it useful when dealing with Capacitor.

9

thanks. What do you mean with “the file where it is going to be used?”
When i create a new project (js core and capacitor) i have this folder structure :

image
image254×762 11.5 KB

Where do i put the code? On js/app.js it’s not working

10
11

like mine, that topic was never solved

12

Hi @peradev,

I read this thread and I think there are some structure things that you (and maybe others) may need to understand (no shaming, I am by no means an expert!)

A couple of things:

  1. It looks like you are installing the capacitor plugin properly (at least from what I can tell) but the way you are referencing it in Framework7 is where the issue is.

  2. @fluxxus mentions “it should go in the file where it is going to be used” and he is absolutely right. He means the specific “.f7” page you want to use the stripe plugin. In the screenshot you gave the only page I see in your “pages” folder is “home.f7” (probably because this is a new project and you only have 1 page) so put it there in your testing OR wait until you make your “cart.f7” or “checkout.f7” page and import the stripe plugin there on the page you are going to do that ACTUAL charge.

  3. The reason it’s good practice to import it on the specific page you are going to use the plugin is how Vite (in former framework7 versions, we used WebPack) help to “compress/minify/obfuscate” your final production code and will try only keep what you actually use and if you are specific on the pages, you can do lazy loading of modules/plugins/etc to not load everything when your users get to your home page. (Especially if you don’t charge any cards with the Stripe plugin on the home.f7 page)

  4. While #3 and #2 absolutely applies… I am going to try to meet where I think you are trying to go and if you REALLY wanted to import your capacitor plugin in the ‘js/app.js’ file, you need to make sure you give a reference that will NOT be obfuscated/changed by the builder when you build your framework7 app. I am going to use the stripe code you shared explaining what I think is happening and then going to give you an option to maybe help you move forward so you can move forward on this project of yours!

Here is the code you have and said you tried it in “main.js” as well as “js/app.js” and it did not work right?

import { Stripe } from '@capacitor-community/stripe';

export async function initialize(): Promise<void> {
  Stripe.initialize({
    publishableKey: "Your Publishable Key",
  });
}

This, (and all code really), Vite (or any bundler like WebPack) will TRY to minify/obfuscate things. So the variable in this case “Stripe” will only be accessible from “main.js” or “js/app.js” because it’s going to get a randomly assigned minified name like “a” or “aa” to shrink your final production code. (kind of like compiling but this is not changing to machine code so it’s called minifying and obfuscating)

Okay now to maybe “bridge” the way you are thinking and trying to make this work, try this inside your “js/app.js” file:

import { Stripe } from '@capacitor-community/stripe';
// This next line here:
window.Stripe = Stripe;
// THIS will assign "Stripe" as a property of "window" that
// will not be obfuscated/changed when you build this app.
// "Stripe" the variable will still change to something random on build
// but "window.Stripe" will stay and be linked to
// that new random variable.

export async function initialize(): Promise<void> {
  Stripe.initialize({
    publishableKey: "Your Publishable Key",
  });
}

This way/example I gave is not best practice and is a little old thinking but it works and is probably going to help you move forward. Once “Stripe” is assigned as a property of the global “window” object, it can be referenced globally from any page, from any part of your app. (either with window.Stripe OR Stripe by itself because any property under the window object is automatically considered global)

The reason why it’s an old way of thinking is you are not letting Vite do it’s thing and help you modularize your code/calls/functions. You are forcing this variable to be global 100% of your app even though you may only use it in 5% of your app. It’s best practice to only load the bare minimum of what you need to get the fastest loading of whatever page you are building.

Let me know if this does not make sense and I am hoping other smarter developers than me can chime in and let me know if I am wrong with any of my breakdown above.

2 Likes
13

Thank you so much for the explanation.
Yes, I know, the method I’m using to do this is a bit obsolete and not entirely good, but I need to do it this way.
I’ve tested with various plugins (including Stripe) and it works!

I was stuck at this point for weeks, not realizing that just create that variable globally.

Thank you so much for taking your time to help me.

1 Like