FireBase Function with Strip and Ionic

Hi, i try to integrate Stripe in a ionic 4 with firebase so i follow this tuto : 

https://medium.com/enappd/integrating-stripe-payment-in-ionic-4-for-apps-and-pwa-de05142c523e

But that doesn’t works. I have no error in the console and the token is successfully send to strip. But i have an error with my firebase function : 

Index.js

/* eslint-disable promise/always-return */
const functions = require('firebase-functions');
const stripe = require('stripe')('MY KEY');
const cors = require('cors')({origin: true});


exports.payWithStripe = functions.https.onRequest((request, response) => {
    // Set your secret key: remember to change this to your live secret key in production
    // See your keys here: https://dashboard.stripe.com/account/apikeys
    cors(request, response, () => {
        response.status(200).send({test: 'Testing functions'});

    // eslint-disable-next-line promise/catch-or-return
    stripe.charges.create({
        amount: request.body.amount,
        currency: request.body.currency,
        source: resquest.body.token,
    }).then((charge) => {
            // asynchronously called
            response.send(charge);
        })
        .catch(err =>{
            console.log(err);
        });

    });
});

my page with strip integration looks like : 

ts file :

import { Component } from '@angular/core';
import { Stripe } from '@ionic-native/stripe/ngx';
import { HttpClient } from "@angular/common/http";
import { HTTP } from '@ionic-native/http/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  paymentAmount: string = '3.33';
  currency: string = 'USD';
  currencyIcon: string = '$';
  stripe_key = 'MY KEY';
  cardDetails: any = {};
  constructor(private stripe: Stripe, private http: HttpClient) {}


  payWithStripe() {
    this.stripe.setPublishableKey(this.stripe_key);

    this.cardDetails = {
      number: '4242424242424242',
      expMonth: 12,
      expYear: 2020,
      cvc: '220'
    }

    this.stripe.createCardToken(this.cardDetails)
      .then(token => {
        console.log(token);
        this.makePayment(token.id);
      })
      .catch(error => console.error(error));
  }

  makePayment(token) {
    this.http
      .post('https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe', {
        token: token.id
      })
      .subscribe(data => {
        console.log(data);
      });
  }

}

And fire base functions log reponse that : 

{ Error: Must provide source or customer.
    at Function.generate (/srv/node_modules/stripe/lib/Error.js:49:16)
    at IncomingMessage.res.once (/srv/node_modules/stripe/lib/StripeResource.js:167:39)
    at Object.onceWrapper (events.js:313:30)
    at emitNone (events.js:111:20)
    at IncomingMessage.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)
    at _combinedTickCallback (internal/process/next_tick.js:139:11)
    at process._tickDomainCallback (internal/process/next_tick.js:219:9)
  raw:
   { code: 'parameter_missing',
     doc_url: 'https://stripe.com/docs/error-codes/parameter-missing',
     message: 'Must provide source or customer.',
     type: 'invalid_request_error',
     headers:
      { server: 'nginx',
        date: 'Sat, 24 Aug 2019 05:56:03 GMT',
        'content-type': 'application/json',
        'content-length': '213',
        connection: 'keep-alive',
        'access-control-allow-credentials': 'true',
        'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS, DELETE',
        'access-control-allow-origin': '*',
        'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
        'access-control-max-age': '300',
        'cache-control': 'no-cache, no-store',
        'request-id': 'req_GzXBOUP54fQ3h3',
        'stripe-version': '2019-08-14',
        'strict-transport-security': 'max-age=31556926; includeSubDomains; preload' },
     statusCode: 400,
     requestId: 'req_GzXBOUP54fQ3h3' },
  rawType: 'invalid_request_error',
  code: 'parameter_missing',
  param: undefined,
  detail: undefined,
  headers:
   { server: 'nginx',
     date: 'Sat, 24 Aug 2019 05:56:03 GMT',
     'content-type': 'application/json',
     'content-length': '213',
     connection: 'keep-alive',
     'access-control-allow-credentials': 'true',
     'access-control-allow-methods': 'GET, POST, HEAD, OPTIONS, DELETE',
     'access-control-allow-origin': '*',
     'access-control-expose-headers': 'Request-Id, Stripe-Manage-Version, X-Stripe-External-Auth-Required, X-Stripe-Privileged-Session-Required',
     'access-control-max-age': '300',
     'cache-control': 'no-cache, no-store',
     'request-id': 'req_GzXBOUP54fQ3h3',
     'stripe-version': '2019-08-14',
     'strict-transport-security': 'max-age=31556926; includeSubDomains; preload' },
  requestId: 'req_GzXBOUP54fQ3h3',
  statusCode: 400 }

It’s is the first time i use fire base so im an absolut beginner. 

ty for your help !!

Hi @alexyriche,

This post was moved to a different board that fits your topic of discussion a bit better. This means you’ll get better engagement on your post, and it keeps our community organized so users can more easily find information.

As you’ll notice, your topic is now here in the Project Development Help and Advice board. No action is needed on your part; you can continue the conversation as normal here.

Cheers!

Did you ever find the answer to this?

 Queremos completar un pago con Stripe. Aquí es donde Stripe es un poco diferente de PayPal. PayPal le permite realizar pagos completos en el front-end, mientras que Stripe solo permite pagos desde el back-end.

Stripe solo permite pagos desde el back-end.

Hi, Have you solved this issue? I’m facing the same. In my case, it’s works fine in android and I’m getting the same error as you in iOS. Please kindly help me