Teja - Saving Card Details | Stripe Developers | Page 1

polar sun Feb 28, 2022, 11:15 PM

#

Hello! Do you want to place a hold on the funds for those two days or collect payment information and then collect a payment two days later?

void phoenix Feb 28, 2022, 11:19 PM

#

Hello Rubeus,

Basically when they send a request to us, I want to save their final cost as well as their card details.

Then once their service is done, Then I want to charge them with the saved details

The only reason I want to do this way is to make sure they dont have additional request which would increse the final cost of service. If I do this way, I can update the final cost and then charge them

polar sun Feb 28, 2022, 11:20 PM

#

So you do not want to place a hold on the funds, just collect payment details then charge an amount two days later?

#

If so, we have a guide for doing so here: https://stripe.com/docs/payments/save-and-reuse

void phoenix Feb 28, 2022, 11:22 PM

#

Thank you very much

#

But

#

I have a problem to retrieve the PaymentMethod Id from angular code

#

Would you be able to check it if I can share the code here?

fervent root Feb 28, 2022, 11:25 PM

#

👋 Hello! Rubeus has to step away soon so I'm hopping in as well - yes, feel free to give us more details on what isn't working about your retrieve request

void phoenix Feb 28, 2022, 11:27 PM

#

Thank you very much.

So this is the Page

#

var stripe = Stripe(
'pk_test_51JNGlYEJ9GwgkweQhVgjvR5lY5niSPuxWys7c9NtYIfgy71CcmFh8xRC1NPCtPHHPIKOk2cpiiPkp8ZUjq3BWZtk00B9bjTgKe'
);
var elements = stripe.elements();

 var cardMumberElementStype= {
   base: {
     
     iconColor: '#666EE8',
     color: '#31325F',
     lineHeight: '30px',
     fontWeight: 300,
     fontSize:'10px',
     backgroundColor:'whitesmoke',

     '::placeholder': {
       color: '#CFD7E0',
       
       
               
     },
   },
   invalid: {
    iconColor: '#FFC7EE',
    color: 'red',
  },

 }

 var cardNumberElement = elements.create('cardNumber', {
  style: cardMumberElementStype,
   placeholder: 'xxxx xxxx xxxx xxxx',
 });
 cardNumberElement.mount('#card-number-element');

 var cardExpiryElement = elements.create('cardExpiry', {
   style: cardMumberElementStype,
   placeholder: 'MM/YY',
 });
 cardExpiryElement.mount('#card-expiry-element');

 var cardCvcElement = elements.create('cardCvc', {
   style: cardMumberElementStype,
   placeholder: 'xxx',
 });
 cardCvcElement.mount('#card-cvc-element');
 //------------------------------------------


  var cardholderName = document.getElementById('cardholder-name')["value"];
  console.log(cardholderName);


  var cardButton = document.getElementById('card-button');
  var resultContainer = document.getElementById('card-result');

#

cardButton.addEventListener('click', function (ev) {
stripe
.createPaymentMethod({
type: 'card',

            card: cardNumberElement,
            billing_details: {
              name: cardholderName,
            }
            
          })
          .then( (result) =>{
            if (result.error) {
              console.log(result);
              resultContainer.textContent = result.error.message;
            } else {
              console.log(result);
              console.log(typeof result.paymentMethod.id)
              
              
              
              resultContainer.textContent =
                'Created payment method: ' + result.paymentMethod.id;
                console.log("You have successfully created a new PaymentMethod");
            }
          });
      });

#

So I was able to get the result either payment created or error message. All I need is to save that paymentMethod.id to a global variable where I can use this to send a post request to create a customer in java

#

When I just try to assign like this

"this.getPaymentMethodId(paymentMethod.id)" once getting the result, it says "Property 'getCardtoken' does not exist on type 'HTMLElement"

#

I tried so many forums but able to find a solution. Please help me

fervent root Feb 28, 2022, 11:35 PM

#

Why are you doing this.getPaymentMethodId(paymentMethod.id)? If you already have paymentMethod.id can you't just set that to a variable?

void phoenix Feb 28, 2022, 11:43 PM

#

but I should anyways send that variable into this method to submit a post request right..

#

stray nexus Feb 28, 2022, 11:43 PM

#

which method exactly? That's a picture of code

#

what exact line is blocking/confusing you?

void phoenix Feb 28, 2022, 11:43 PM

#

#

In this picture, line number 120

stray nexus Feb 28, 2022, 11:44 PM

#

please don't post pictures of code

#

Write real code and explain which exact line is confusing you

void phoenix Feb 28, 2022, 11:44 PM

#

This is my personal code...

stray nexus Feb 28, 2022, 11:44 PM

#

but no, why are you call this method? What is the context? That's not Stripe-specific code

void phoenix Feb 28, 2022, 11:44 PM

#

In order to better understand, I am posting picture

stray nexus Feb 28, 2022, 11:44 PM

#

I know, but you can share code in the channel as text between three ` before and after

void phoenix Feb 28, 2022, 11:45 PM

#

sorry if this is not the better way to convey my request

stray nexus Feb 28, 2022, 11:45 PM

#

but ultimately there's no such thing as getCardToken. That doesn't exist. So where did you get this from? Maybe if I see where the code comes from I can better understand

void phoenix Feb 28, 2022, 11:45 PM

#

📎 message.txt

#

"getCardToken()" is just a method name. my bad

stray nexus Feb 28, 2022, 11:47 PM

#

you're just sharing way too much code. I'm sorry. To help you I need to focus on a handful of lines. Like 5 or 6 as best, as you ask the question.

#

But what's blocking you, what is that method trying to do exactly?

void phoenix Feb 28, 2022, 11:48 PM

#

I was able to get the paymentMethod object as a response

#

in angular

#

but

#

all I need is to capture tha paymentMethodId from the response and use it in another method to send a post request

stray nexus Feb 28, 2022, 11:49 PM

#

Okay so you're in Angular, client-side, you get the pm_123456 and now you want to do something with it? But what and why? Why are you creating a customer client-side? That's impossible. Also that's not how you attach a card to a customer. Our docs clearly say to use a SetupIntent for that instead

void phoenix Feb 28, 2022, 11:51 PM

#

so my idea was to create a paymentMethod by collecting card details on client side (angular) and send this paymentMethodId to backend (spring boot)

stray nexus Feb 28, 2022, 11:52 PM

#

yeah but that's not what we recommend in our canonical doc, and it's partly why you're stuck

void phoenix Feb 28, 2022, 11:52 PM

#

Then

create a customer with paymentMethod

stray nexus Feb 28, 2022, 11:52 PM

#

The real flow instead should be
1/ Create a Customer
2/ Create a SetupIntent
3/ (Client-side) confirm the SetupIntent -> this attaches the payment method to the customer automatically

void phoenix Feb 28, 2022, 11:53 PM

#

okay

#

so my real project idea was this:

Basically when they send a request to us, I want to save their final cost as well as their card details.

Then once their service is done, Then I want to charge them with the saved details

The only reason I want to do this way is to make sure they dont have additional request which would increse the final cost of service. If I do this way, I can update the final cost and then charge them

stray nexus Feb 28, 2022, 11:54 PM

#

yep that's what SetupIntent was designed for

void phoenix Feb 28, 2022, 11:54 PM

#

okay

stray nexus Feb 28, 2022, 11:54 PM

#

that's why my colleague shared https://stripe.com/docs/payments/save-and-reuse which you'll need to review carefully

#

you could also use Checkout, your life would be way easier

void phoenix Mar 1, 2022, 12:05 AM

#

ok Thank you very much

#

I will look into this and get back if I have any questions. But Thank you for being patience with me

#Teja - Saving Card Details