Can you have a custom card data with Stripe PaymentIntent API?

I am using Angular, Stripe.js 3, Stripe elements, Spring Boot, PaymentIntent API.

I need to use the PaymentIntent API to use Strong Customer Authentication. I have got the code working with stripe elements and I am successfully being brought to a payment verification page. My problem is when using Stripe elements, I must get the card info from the user each time. My application saves the card data separate from Stripe and I want to give the feature of saving the card and not having to input it each time. How do i pass the card data to stripe.js from my own card form and not require the user to submit the card data manually each time?

  <!-- <form novalidate>
    <input type="text" name="cardNumber" id="" placeholder="Card Number">
    <input type="text" name="expiry-month" id="" placeholder="Expiry Month">
    <input type="text" name="expiry-year" id="" placeholder="Expiry Year">
    <input type="text" name="cardNumber" id="" placeholder="CVV">

  </form> -->
  <form id="payment-form">
    <div id="link-authentication-element">
      <!--Stripe.js injects the Link Authentication Element-->
    </div>
    <div id="payment-element" class="stripe-form-input">
      <!--Stripe.js injects the Payment Element-->
    </div>
    <!-- <button id="submit">
      <div class="spinner hidden" id="spinner"></div>
      <span id="button-text">Pay now</span>
    </button> -->
    <div id="payment-message" class="hidden"></div>
  </form>

</div>




<button type="submit" class="fill" style="width: 100%;" (click)="testCreateCard()">Pay</button>
<div class="iframe-wrapper" #if> <iframe *ngIf="showIframe" frameborder="0" [src]="ifHtml | safe" height="600" width="400" #if></iframe></div>

export class AppComponent {
  title = 'stripePaymentIntents';
  clientSecret:string = ""
  elements:any;
  email?:string;
  paymentElement:any;

  showIframe:boolean = false;
  ifHtml:string = ""

  paymentIntent:string = ""
  @ViewChild('if') iframeWrapper!: ElementRef;

  constructor(private http: HttpClient, private sanitizer: DomSanitizer, private route: ActivatedRoute){}

  ngOnInit(): void {
    this.route.queryParams.subscribe(qp => {
      this.paymentIntent = qp['payment_intent']
      console.log("Payment Intent From SCA:   " + this.paymentIntent)
    })

    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    const appearance = {
      theme: 'stripe',
    };

    this.http.get("http://localhost:8080/api/payment/intent/clientSecret", {responseType:'text'}).subscribe(secret => {
      this.elements = stripe.elements({ appearance, clientSecret: secret });
      this.clientSecret = secret;
      const linkAuthenticationElement = this.elements.create("linkAuthentication");
      linkAuthenticationElement.mount("#link-authentication-element");

      linkAuthenticationElement.on('change', (event:any) => {
          this.email = event.value.email;
      });

      const paymentElementOptions = {
          layout: "tabs",
      };

      const cardElementStyle = {
        classes: 'stripe-'
      }

      this.paymentElement = this.elements.create("card", paymentElementOptions);
      this.paymentElement.mount("#payment-element");
    })


  }

  testCreateCard(){


      console.log(this.clientSecret);

      console.log(this.elements);
      const here = this;

      stripe.confirmCardPayment(this.clientSecret, {
          payment_method: {
            card: this.paymentElement,
            billing_details: {
              name: 'Barack Obama',
            },
          },
            return_url: 'http://localhost:4200/'

        }, {handleActions: false})
        .then(function(result:any) {
          // Handle result.error or result.paymentIntent
          if(result.paymentIntent.next_action.redirect_to_url.url !== null){
            window.location = result.paymentIntent.next_action.redirect_to_url.url
          }




          if (result.error) {
            // Display error.message in your UI.
            console.log(result);

          } else {
            here.showIframe = true
            console.log('iframe show; ' + here.showIframe);

            // The SetupIntent was successful
            console.log("SUCCESS: ")
            console.log(result);
          }

        });



  }
}```

</details>


# 答案1
**得分**: 0

如果您不符合PCI合规性级别1或SAQ D，根据[PCI DSS](https://stripe.com/docs/security/guide)，您不应存储卡信息。

为了将来在Stripe中保存卡信息（而不是在您自己的系统中保存数据），您可以按照此指南保存带有支付元素的付款方法详细信息，该元素会返回一个支付方法ID（pm_xxx），可用于将来的支付：https://stripe.com/docs/payments/save-during-payment

<details>
<summary>英文:</summary>

If you are not PCI compliance level 1 or SAQ D, you shouldn&#39;t store card information as per [PCI DSS](https://stripe.com/docs/security/guide). 

To save the card information future usage with Stripe (instead of saving the data on your own), you may follow this guide to save the payment method details with Payment Element on the customer that returns a payment method ID (pm_xxx) which can be used for future payment: https://stripe.com/docs/payments/save-during-payment

</details>