Проблема с card.mount с использованием Stripe.js API - PullRequest
Новая
       26

Проблема с card.mount с использованием Stripe.js API

0 голосов
/ 02 ноября 2019

Я хочу интегрировать платежи по кредитным картам в свое приложение Ionic, я попробовал это с плагином de Stripe cordova, но плагин не поддерживает новые Payment Intents, я должен использовать API Stripe.js, но каким-то образом проектпроисходит сбой на card.mount ('# card-element');безо всяких ошибок

Я использовал этот урок https://stripe.com/docs/stripe-js

import { HttpService } from './../../Service/http.service';
import { Component, OnInit } from '@angular/core';
import { trimTrailingNulls } from '@angular/compiler/src/render3/view/util';
import { ActivatedRoute, Router, NavigationExtras } from '@angular/router';

import { EventClass } from 'src/app/models/event';
declare var Stripe;

@Component({
  selector: 'app-credit-card-details',
  templateUrl: './credit-card-details.page.html',
  styleUrls: ['./credit-card-details.page.scss'],
})

export class CreditCardDetailsPage implements OnInit {

  private passedEvent: EventClass
  private errorMSG: string;

  stripe = Stripe('myKey');


  constructor(/*private stripe: Stripe,*/private route: ActivatedRoute, private router: Router,private httpservice:HttpService) { 
    this.setupStripe();
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.passedEvent = this.router.getCurrentNavigation().extras.state.evend;
      }
    });
  }

  ngOnInit() {
  }

  setupStripe(){
    let elements = this.stripe.elements();
    var style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4'
        }
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
      }
    };

    var card = elements.create('card', {style: style});   
    console.log("mount now")
    card.mount('#card-element');
    console.log("mounted")
    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });
    console.log("payment form")
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', event => {
      event.preventDefault();

      // this.stripe.createToken(this.card)
      this.stripe.createToken(card).then(function(result) {
        if (result.error) {
          // Inform the user if there was an error.
          var errorElement = document.getElementById('card-errors');
          errorElement.textContent = result.error.message;
        } else {
          // Send the token to your server.
          console.log("help pls")
        }
      });
    });
  }

}

<ion-header>

  <ion-toolbar>
    <ion-title>Kreditkartenzahlung</ion-title>
  </ion-toolbar>

</ion-header>

<ion-content>

  <script src="https://js.stripe.com/v3/"></script>

<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

</ion-content>
...