Stripe function cannot be found

问题

I am using Stripe in my angular7 application to handle payments via firebase cloud functions. I am currently trying to create a subscription payment. However, when I try and call the following function (as a sort of pre-req to the whole subscription setup);

import * as Stripe from 'stripe';
const stripe = new Stripe('pk_test_....');

//Create payment method for customer
const {paymentMethod, createPaymentMethodError} = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElementObj.card,
    billing_details: {
      name: userName,
      email: firebaseUserEmail
    },
  });

Error:

Property 'createPaymentMethod' does not exist on type 'Stripe'.

I have the stripe package installed in my node_modules (version 7.14.0).

package.json config:

{
  "name": "functions",
  "scripts": {
    "lint": "tslint --project tsconfig.json",
    "build": "tslint -p tslint.json && tsc",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "8"
  },
  "main": "lib/index.js",
  "dependencies": {
    "@types/stripe": "^7.13.11",
    "firebase": "^7.4.0",
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.3.0",
    "moment": "^2.24.0",
    "stripe": "^7.14.0"
  },
  "devDependencies": {
    "@types/stripe-checkout": "^1.0.3",
    "@types/stripe-v3": "^3.1.9",
    "firebase-functions-test": "^0.1.6",
    "tslint": "^5.12.0",
    "typescript": "^3.2.2"
  },
  "private": true
}

Any help is appreciated! Thanks in advance.

回答1:

Stripe doesn't provide a Typescript package, so you don't need those dependencies in your package.json to get it working. Instead:

First, make sure you have the script included on the page. Note that according to their documentation, it must always be loaded from https://js.stripe.com/v3/.

Then, the Typescript code should be structured like so to get an instance of Stripe to use.

declare var Stripe : any;

@Component({
  selector    : 'payment-form',
  templateUrl : 'payment-form.component.html',
})
export class PaymentFormComponent implements OnInit {
  stripe: any;

  ngOnInit() {
    this.stripe = new Stripe(environment.stripeApiKey);
  }

  mySubmitFunction() {
    this.stripe.createPaymentMethod(...);
  }
}

This general structure of declaring the variable outside of the component definition is common when using Javascript libraries in Typescript. You'll have to follow similar steps when using the Facebook or Google OAuth libraries, for example.

来源：https://stackoverflow.com/questions/59216860/stripe-function-cannot-be-found