Angular> Payment Frontend

개발순서

1. StripeAPI 설치하기

2. TypeScript declaration file 생성

3. Stripe Publishable key 추가

4. PaymentInfo DTO 생성

5. PaymentIntent 생성하는 CheckoutService 수정

6. index.html에서 Stripe JavaScript 라이브러리 불러오기

7. Checkout form에 Stripe Elements를 추가

 

 

1. 

npm install stripe

 

 

2.

 

자바스크립트 라이브러리를 위해 자료형 정보를 전달한다. 

TypeScripit application 에서 이걸 사용하게 허락한다. 

 

 

3.

Publishable key는 Stripe에 계정을 확인하는 키이다. 

 

 

 

4.

 

 

 

 

 

5.

paymentIntentUrl과 createPaymentIntent 함수 작성.

 

6. 

 

7.

원래 있는 내용인 creditCard 파트를 모두 지운다. 

 

stripe 부분을  적는다. 

 

 

ngOnInit함수에 있는 FormGroup의 FormBuilder - group - creditCard 부분 내용을 주석처리하여 지운다.   

 

ngOnInit함수에 있는 해당 부분 주석처리

 

 

ngOnInit함수에 setupStripePaymentForm 실행

 

 

함수 내용 

 

 

onSubmit 함수 내용에서 드래그 한 부분은 지우고 amount와 currency 내용은 쓴다. 

 

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.checkoutService.createPaymentIntent(this.paymentInfo).subscribe(
        (paymentIntentResponse) =>{
          this.stripe.confirmCardPayment(paymentIntentResponse.client_secret,
            {
              payment_method: {
                card: this.cardElement
              }
            }, { handleActions: false })
            .then(function(result){
              if(result.error){
                alert(`There was an error : ${result.error.message}`);
              } else{
                this.checkoutService.placeOrder(purchase).subscribe({
                  next: response => {
                    alert(`Your order has been received. \n
                       Order tracking number : ${response.orderTrackingNumber}`);
                    this.resetCart();
                  },
                  error: err => {
                    alert(`There was an error: ${err.message}`);
                  }
                })
              }
            }.bind(this));
        }
      );
    } else {
      this.checkoutFormGroup.markAllAsTouched();
      return;
    }
  }

이런 식으로 구성

 

 

구입하고 나서 장바구니는 리셋이 되는데

하지만 이 때 새로고침을 하면 이전 장바구니가 돌아온다.

그 이유는 리셋되고 나서 비어 있는 상태를 메모리에 저장해야 하는데 

저장을 안 했으니 새로 고침할 경우 메모리에 저장한 이전 값이 불러와져서

이전 장바구니가 보이는 것. 

따라서 리셋되고 비어져 있는 상태를 메모리에 저장해야 한다.

persistCartItems 함수를 실행한다. 

 

 

 

 

 

 

Angular - TypeScript configuration

Angular

 

Testing | Stripe Documentation

Testing