Я использую элементы стипа и кнопку оплаты полосы в диалоге углового материала.Когда оплата будет завершена, я хочу закрыть диалог.Все хорошо работает с элементами, но не с кнопкой 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});
}
}