Détecter une fermeture de fenêtre avec stripe

Version imprimable

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:

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

Code:

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:

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é!");
        });
      }   
    });

Citation:

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.

28/03/2020, 12h27
krakatoa
l'astuce est de sauvegarder le context pour l'utiliser :
Code:

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

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:

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:

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

28/03/2020, 17h54
krakatoa

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

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

Code:

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);
 
      }   
    });

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

(1)
ça donne quoi ça ?

Code:

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:

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

voici la doc de stripe
https://stripe.com/docs/api
le but était que lorsque stripe à enregistrer la carte bleu, je récupère la clé public et demander de faire la transaction de la carte bleu,
et indiquer au client que le paiment à bien été effectuer.

je this je l'ai mls, je l'ai pas mis en dehors de handler..
J'ai réussi à valider la transaction il me faut juste adapté correctement et proprement.
du côté java(backend) j'ai juste un erreur utf8 qui n'est pas accepter mais je suis pas au bon endroit ....

en tout ca merci de cette éclaircicement.

je pense que vais y arriver avec toutes ces infos :)

le code fonctionne:
Code:

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 const that = this; let handler = (<any>window).StripeCheckout.configure({ key: this.pk, locale: 'auto', currency: "eur", token: function (token: any) { console.log(token); let req = that.http.post( "http://localhost:8181/payer", {"tok":"tok_1GRxmjBtMA0ZeA454554TeAdy","email":"test@dsf.fr","amount":10000}, // {headers: new HttpHeaders({ 'Authorization': localStorage.getItem('token') ,'Content-Type': 'application/json; charset=utf-8'})} ).subscribe(data => { console.log(data) console.log('Token Created!!'); alert("paiement effectué!"); }); }, }); handler.open({ name: 'test stripe 28 mars', description: '2 widgets', amount: this.montant * 100 }); }