Angular> Payment Frontend 2

Customer detail 추가 

onSubmit 함수에 billing_details 내용을 넣는다. 

 

설명 부분 추가

 

 

 

---

구매 버튼 비활성화

중복구입을 막는 기능을 넣는다. 

 

개발 순서

1. checkout.component.ts 업데이트

1) boolean 필드 isDisabled 을 추가한다.

2) REST API 콜을 부르기 전에는 isDisabled를 true로 설정

3) REST API 콜을 부르면 isDisabled를 false로 설정

 

2. checkout.component.html 업데이트

1) isDisabled 필드에 disabled attribute 넣기

 

 

1.

필드 추가  

REST API call 하기 전 true로 설정

부르고 나서 다시 false로 변경

onSubmit(): void {
    if (this.checkoutFormGroup.invalid){
      this.checkoutFormGroup.markAllAsTouched();
    }

    let order = new Order();
    order.totalPrice = this.totalPrice;
    order.totalQuantity = this.totalQuantity;

    const cartItem = this.cartService.cartItems;

    let orderItems: OrderItem[] = [];
    for (let i=0; i<cartItem.length; i++){
      orderItems[i] = new OrderItem(cartItem[i]);
    }

    let purchase = new Purchase();
    purchase.customer = this.checkoutFormGroup.controls['customer'].value;

    purchase.shippingAddress = this.checkoutFormGroup.controls['shippingAddress'].value;
    const shippingState: State = JSON.parse(JSON.stringify(purchase.shippingAddress.state));
    const shippingCountry: Country = JSON.parse(JSON.stringify(purchase.shippingAddress.country));
    purchase.shippingAddress.state = shippingState.name;
    purchase.shippingAddress.country = shippingCountry.name;

    purchase.billingAddress = this.checkoutFormGroup.controls['billingAddress'].value;
    const billingState: State = JSON.parse(JSON.stringify(purchase.billingAddress.state));
    const billingCountry: Country = JSON.parse(JSON.stringify(purchase.billingAddress.country));
    purchase.billingAddress.state = billingState.name;
    purchase.billingAddress.country = billingCountry.name;

    purchase.order = order;
    purchase.orderItem = orderItems;

    this.paymentInfo.amount = Math.round(this.totalPrice * 100);
    this.paymentInfo.currency = "USD";

    if(!this.checkoutFormGroup.invalid && this.displayError.textContent ===""){

      this.isDisabled = true;

      this.checkoutService.createPaymentIntent(this.paymentInfo).subscribe(
        (paymentIntentResponse) =>{
          this.stripe.confirmCardPayment(paymentIntentResponse.client_secret,
            {
              payment_method: {
                card: this.cardElement,
                billing_details:{
                  email: purchase.customer.email,
                  name: `${purchase.customer.firstName} ${purchase.customer.lastName}`,
                  address: {
                    linel: purchase.billingAddress.street,
                    city: purchase.billingAddress.city,
                    state: purchase.billingAddress.state,
                    postal_code: purchase.billingAddress.zipCode,
                    country:this.billingAddressCountry.value.code
                  }
                }
              }
            }, { handleActions: false })
            .then(function(result){
              if(result.error){
                alert(`There was an error : ${result.error.message}`);
                this.isDisabled = false;
              } else{
                this.checkoutService.placeOrder(purchase).subscribe({
                  next: response => {
                    alert(`Your order has been received. \n
                       Order tracking number : ${response.orderTrackingNumber}`);
                    this.resetCart();
                    this.isDisabled = false;
                  },
                  error: err => {
                    alert(`There was an error: ${err.message}`);
                    this.isDisabled = false;
                  }
                })
              }
            }.bind(this));
        }
      );
    } else {
      this.checkoutFormGroup.markAllAsTouched();
      return;
    }
  }

전문

 

 

2.

버튼을 checkout.component.ts의 isDisabled 필드에 연결한다. 

버튼이 자동적으로 disabled/enabled 된다. 

 

 

---