integration-libs/digital-payments/src/checkout/cms-components/dp-payment-method/dp-payment-method.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cx-payment-method |
| templateUrl | ./dp-payment-method.component.html |
Properties |
Methods |
constructor(userPaymentService: UserPaymentService, checkoutService: CheckoutService, checkoutDeliveryService: CheckoutDeliveryService, checkoutPaymentService: CheckoutPaymentService, globalMessageService: GlobalMessageService, activatedRoute: ActivatedRoute, translation: TranslationService, activeCartService: ActiveCartService, checkoutStepService: CheckoutStepService)
|
||||||||||||||||||||||||||||||
|
Parameters :
|
| hideCallbackScreen |
hideCallbackScreen()
|
|
Returns :
void
|
| isDpCallback |
isDpCallback()
|
|
Returns :
boolean
|
| paymentDetailsAdded | ||||||
paymentDetailsAdded(paymentDetails: PaymentDetails)
|
||||||
|
Parameters :
Returns :
void
|
| showCallbackScreen |
Default value : false
|
import { DP_CARD_REGISTRATION_STATUS } from '../../../utils/dp-constants';
import { ActivatedRoute } from '@angular/router';
import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import {
CheckoutStepService,
PaymentMethodComponent as CorePaymentMethodComponent,
} from '@spartacus/checkout/components';
import {
UserPaymentService,
GlobalMessageService,
TranslationService,
ActiveCartService,
PaymentDetails,
} from '@spartacus/core';
import {
CheckoutService,
CheckoutDeliveryService,
CheckoutPaymentService,
} from '@spartacus/checkout/core';
@Component({
selector: 'cx-payment-method',
templateUrl: './dp-payment-method.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DpPaymentMethodComponent
extends CorePaymentMethodComponent
implements OnInit
{
showCallbackScreen = false;
isDpCallback(): boolean {
const queryParams = this.activatedRoute.snapshot.queryParamMap.get(
DP_CARD_REGISTRATION_STATUS
);
if (queryParams) {
return true;
} else {
return false;
}
}
hideCallbackScreen(): void {
this.showCallbackScreen = false;
}
paymentDetailsAdded(paymentDetails: PaymentDetails) {
this.selectPaymentMethod(paymentDetails);
this.next();
}
constructor(
protected userPaymentService: UserPaymentService,
protected checkoutService: CheckoutService,
protected checkoutDeliveryService: CheckoutDeliveryService,
protected checkoutPaymentService: CheckoutPaymentService,
protected globalMessageService: GlobalMessageService,
protected activatedRoute: ActivatedRoute,
protected translation: TranslationService,
protected activeCartService: ActiveCartService,
protected checkoutStepService: CheckoutStepService
) {
super(
userPaymentService,
checkoutService,
checkoutDeliveryService,
checkoutPaymentService,
globalMessageService,
activatedRoute,
translation,
activeCartService,
checkoutStepService
);
this.showCallbackScreen = this.isDpCallback();
}
}
<!-- Copied from core module except #newPaymentForm -->
<ng-container *ngIf="cards$ | async as cards">
<h3 class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'paymentForm.payment' | cxTranslate }}
</h3>
<ng-container *ngIf="!showCallbackScreen; else loadingPaymentDetails">
<ng-container *ngIf="!(isLoading$ | async); else loading">
<ng-container
*ngIf="
cards?.length && !newPaymentFormManuallyOpened;
else newPaymentForm
"
>
<p class="cx-checkout-text">
{{ 'paymentForm.choosePaymentMethod' | cxTranslate }}
</p>
<div class="cx-checkout-btns row">
<div class="col-md-12 col-lg-6">
<button
class="btn btn-block btn-action"
(click)="showNewPaymentForm()"
>
{{ 'paymentForm.addNewPayment' | cxTranslate }}
</button>
</div>
</div>
<div class="cx-checkout-body row">
<div
class="cx-payment-card col-md-12 col-lg-6"
*ngFor="let card of cards; let i = index"
>
<div class="cx-payment-card-inner">
<cx-card
[border]="true"
[fitToContainer]="true"
[content]="card.content"
(sendCard)="selectPaymentMethod(card.paymentMethod)"
></cx-card>
</div>
</div>
</div>
<div class="row cx-checkout-btns">
<div class="col-md-12 col-lg-6">
<button class="btn btn-block btn-action" (click)="back()">
{{ backBtnText | cxTranslate }}
</button>
</div>
<div class="col-md-12 col-lg-6">
<button
class="btn btn-block btn-primary"
[disabled]="!(selectedMethod$ | async)?.id"
(click)="next()"
>
{{ 'common.continue' | cxTranslate }}
</button>
</div>
</div>
</ng-container>
</ng-container>
<ng-template #newPaymentForm>
<cx-dp-payment-form
(setPaymentDetails)="setPaymentDetails($event)"
(closeForm)="hideNewPaymentForm()"
></cx-dp-payment-form>
</ng-template>
</ng-container>
<ng-template #loading>
<div class="cx-spinner"><cx-spinner></cx-spinner></div>
</ng-template>
<ng-template #loadingPaymentDetails>
<cx-dp-payment-callback
(paymentDetailsAdded)="paymentDetailsAdded($event)"
(closeCallback)="hideCallbackScreen()"
></cx-dp-payment-callback>
</ng-template>
</ng-container>