使用条形支付按钮时无法关闭棱角材质对话框

时间:2019-04-05 23:08:25

标签: angular angular-material stripe-payments

我在有角材质对话框中使用了刀柄元素和条纹付款按钮。付款完成后,我想关闭对话框。所有元素都可以很好地工作,但是不能使用sripe按钮。

这是PaymentRequest令牌事件的代码(已编辑,添加了更多代码):

constructor(private paymentMethodsService: PaymentMethodsService,
              private charityService: CharityService,
              private snackBar: MatSnackBar,
              private dialogRef: MatDialogRef<NonRegisteredPayDialogComponent>,
              private cd: ChangeDetectorRef,
              @Inject(MAT_DIALOG_DATA) public data: any)
async createPaymentButton() {
    const paymentRequest = stripe.paymentRequest({
      country: 'GB',
      currency: 'gbp',
      total: {
        label: `Donate for ${this.charity.name}`,
        amount: this.amount,
      }
    });
    this.paymentButton = elements.create('paymentRequestButton', {
      paymentRequest,
      style: {
        type: 'donate',
        theme: 'light'
      }
    });
    const paymentRequestSupport = await paymentRequest.canMakePayment();
    if (paymentRequestSupport) {
      this.paymentButton.mount(this.stripePaymentButton.nativeElement);
      paymentRequest.on('token', (event) => {
        this.charityService.donateToken(this.charity.id, event.token.id, this.amount)
          .subscribe(
            res => {
              event.complete('success');
              this.snackBar.open('Thank you! Your donation has been received.', null, {duration: 2000});
              this.dialogRef.close();
            },
            error => {
              event.complete('fail');
              this.snackBar.open('Some error occurred', '', {duration: 2000});
              this.dialogRef.close();
            });
      });
    } else {
      this.paymentStripeButtonAccepted = false;
    }
    this.cd.markForCheck();
  }

所有元素都在同一组件中工作

async onSubmit() {
    this.submitted = true;
    const {token, error} = await stripe.createToken(this.cardNumber);
    if (error) {
      this.submitted = false;
      console.log('Something is wrong:', error);
      this.error = error.type === 'validation_error' ? null : error.message;
    } else {
      this.dialogRef.close({token: token});
    }
  }

0 个答案:

没有答案