CODEWITHSUNDEEP
angularstripe-payments
ADEEL FAROOQ
ADEEL FAROOQ

Reputation: 51

How to confirm payment using payment intent cliet secret in angular

I am new to stripe/angular and trying to integrate it into angular to confirm payment from the client side. I have a client-secret key from server-side and I am calling

stripe.confirmCardPayment(
  client-secret,
  {
    payment_method: {card: cardElement}

  }
).then(function(result) {
  if (result.error) {
    console.log(result.error);
    // Display error.message in your UI.
  } else {
    console.log(result);
    
    // The payment has succeeded
    // Display a success message
  }
});

which is mentioned in stripe doc I have no idea about cardElement and stripe did not mention clearly.

My code.

Upvotes: 1

Views: 1480

Answers (1)

Aqib Javed
Aqib Javed

Reputation: 36

here is the correct code i have edited the code by using your links and added the following code to make it work

   ngAfterViewInit() {
   this.payment();
   }

    payment() {
    this.stripe = Stripe('pk_test_TYPazNES7wQJ4WyN83oLTlEa');
    var elements = this.stripe.elements();
    var style = {
    base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',
    '::placeholder': {
      color: '#CFD7E0',
      },
     },
   };
   this.cardElement = elements.create('card', { style: style });
   this.cardElement.mount('#card-element');
   }
   sendPayment() {
   this.stripe
  .confirmCardPayment(
    'pi_3KU4ONITlRqRee7h0D8UANuT_secret_ysrjhG7BhlD5XRsDHZWA7n8Uc',
    {
      payment_method: { card: this.cardElement },
    }
  )
  .then(function (result) {
    if (result.error) {
      // Display error.message in your UI.
      console.log(result.error, ' ==== error');
    } else {
      console.log('success ==== ', result);
      // The payment has succeeded
      // Display a success message
    }
  });
  }

in your html file add class in card element

    <label>
   Card details
    <!-- placeholder for Elements -->
    <div id="card-element" class="field"></div>
   </label>
   <button type="submit" (click)="sendPayment()">Submit Payment</button>

Upvotes: 2

Related Questions