Discussion :

[keokaz]

Bonjour, j'ai un formulaire de paiement, et je souhaite qu'a la fin de la fermeture du formulaire de la carte bleu je récupère le numéro
"tok" du paiement stripe et exécuter une requête http.
voici l'appel du formulaire:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        <script src="https://js.stripe.com/v3/"></script>
        <script type="text/javascript">
            Stripe.setPublishableKey('pk_la clef ...');
          </script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    let handler = (<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
       //recupere le tok de stripe
      }   
    });

ici j'a tenté d' exécuter un post mais j'ai cette erreur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    let handler = (<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
        let Cb = "http://localhost:4200/payer";
 
 
        let req = this.http.post(
          Cb,
          {
            "id": token.id,
            "email": token.email,
            "qte": 1, 
            "amount": this.montant,
            "produit": "formation"
          },
          {
            headers: new HttpHeaders({ 'Authorization': localStorage.getItem('token') })
          }
        );
 
        req.subscribe(data => {
          console.log(data)
          console.log('Token Created!!');
          alert("paiement effectué!");
        });
      }   
    });

core.js:5873 ERROR TypeError: Cannot read property 'post' of undefined

je pense que c'est normal car il est pas possible d'appeler le httpcient le httpClient dans une variable qui appelle un callback.

je souhaite donc de trouver un autre moyen, dès que le formulaire de la carte bleu est validé et fermer j'exécute la requête post en dehors de la déclaration de la variable "handler".


Comment je pourrais procéder ?

merci de vos réponses.

[krakatoa]

l'astuce est de sauvegarder le context pour l'utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
let that = this;
 
...observable..
    that.http.post(.............

[keokaz]

Merci de l'astuce ,
je n'avais pas du tout penser, par contre je n'arrive pas à récupérer mon email et mon tok.
peut être qu'il ne faut pas que je sauvegarde toute l'attirbut "handler"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    let handler = (<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
        let monObservable = new Observable((observer) => {
         // console.log(token.id);
          console.log("1 = observe");
          let tokReady = this;
          console.log(tokReady );
          observer.complete();
        });
 
        monObservable.subscribe({
 
          next(value) {
            console.log(" valeur recup tok ");
            console.log(value);
          },
          complete() {
            console.log("3 = nouvelle req");
            console.log(this.http);
          }
        });
 
      }
    });
    handler.open({
      name: 'test stripe 28 mars',
      description: '2 widgets',
      amount: this.montant * 100
    });

voici ce que j'ai comme résulat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
1 = observe
stripe.component.ts:55 TokenCallback*{version: 1, supportsTokenCallback: ƒ, trigger: ƒ, fn: ƒ}supportsTokenCallback: ƒ ()length: 0name: ""arguments: nullcaller: nullprototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: checkout.js:3[[Scopes]]: Scopes[4]trigger: ƒ ()length: 0name: ""arguments: nullcaller: nullprototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: checkout.js:3[[Scopes]]: Scopes[4]fn: ƒ (token)arguments: (...)caller: (...)length: 1name: "token"prototype: constructor: ƒ (token)__proto__: Object__proto__: ƒ ()arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.invokeGetter (<anonymous>:1:142)]caller: (...)length: 0name: ""constructor: ƒ Function()apply: ƒ apply()bind: ƒ bind()call: ƒ call()toString: ƒ toString()Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()get arguments: ƒ ()set arguments: ƒ ()get caller: ƒ ()set caller: ƒ ()__proto__: Object[[FunctionLocation]]: <unknown>[[Scopes]]: Scopes[0][[FunctionLocation]]: stripe.component.ts:50[[Scopes]]: Scopes[2]version: 1__proto__: Objecttrigger: ƒ (token,addresses,callback)length: 3name: ""arguments: nullcaller: nullprototype: {constructor: ƒ}constructor: ƒ (token,addresses,callback)__proto__: Object__proto__: ƒ ()[[FunctionLocation]]: checkout.js:3[[Scopes]]: Scopes[3]supportsTokenCallback: ƒ ()constructor: ƒ TokenCallback(options)__proto__: Object
stripe.component.ts:66 3 = nouvelle req
stripe.component.ts:67 undefined

EDIT:
Finalement j'ai pu me débrouiller en utilisant le local storage

[krakatoa]

ce n'est pas une solution.
fait voir le code avec le local storage

[keokaz]

Je pensais pouvoir récupérer l'info , mais effectivement, cela ne fonctionne pas,
je pense que j'y suis presque ....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
   let trace = this.http.post(
      "http://localhost:8181/payer",
      {"tok":"tok_1GRh14545eANsoSqRtBhx","email":"strin@gf.fr"},
      //   {headers: new HttpHeaders({ 'Authorization': localStorage.getItem('token') })}//!mode autentifier generère erreur type
    );
 
    let handler = (<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
        let monObservable = new Observable((observer) => {
          let tok_stripe = token;
          observer.next(tok_stripe);
          observer.complete();
        });
 
        setTimeout(() => {
 
          monObservable.subscribe({
            next(value: any) {
              //  console.log(JSON.parse(value)); 
              console.log(JSON.stringify(value));
              localStorage.setItem("tok_stripe", JSON.stringify(value));
              trace.subscribe(data => {
                console.log("payé !!!");
                console.log(data);
              });;
 
            },
            complete() {
 
              console.log("C'est fini!"+this.msg);
            }
          });
        }, 3000);
 
      }   
    });

[krakatoa]

tu t'y prends pas de la bonne façon...
voyons étape par étape :


(1)
ça donne quoi ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
let handler = (<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
       //recupere le tok de stripe
console.log("token="+JSON.stringify(token));
      }   
    });

(2)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
const that = this;
 
(<any>window).StripeCheckout.configure({
      key: this.pk,
      locale: 'auto',
      currency: "eur",
      token: function (token: any) {
           //recupere le tok de stripe
           console.log("token="+JSON.stringify(token));
 
 
           that.http.post(....., ......, .........).subscribe( (rep:any) = {            // A COMPLETER !
                  console.log("rep="+JSON.stringify(rep));
           });
 
 
      }   
    });

* tu peux me filer le lien de la doc stripe sur ce que t'essais de faire