Angular 如何在ngx中获取输入的卡详细信息

Angular 如何在ngx中获取输入的卡详细信息,angular,stripe-payments,Angular,Stripe Payments,大家好,我目前正在使用angular ngx stripe,通过遵循ngx stripe文档,当我通过卡号和mm/yy cvc时,我将获得令牌。但我想获得输入的卡号,mm/yy cvc。这样我就可以传递到后端。是否可以检索输入的详细信息。请帮我做这个 Html 我认为这样的想法是,你永远看不到卡号,因此,你没有安全责任的负担 这个过程基本上是由Stripe通过Iframe来处理的。您所需要做的就是在服务器上验证支付意图,这将创建一个安全密钥/令牌,该密钥/令牌将传回客户端,然后发送到Stripe

大家好,我目前正在使用angular ngx stripe,通过遵循ngx stripe文档,当我通过卡号和mm/yy cvc时,我将获得令牌。但我想获得输入的卡号,mm/yy cvc。这样我就可以传递到后端。是否可以检索输入的详细信息。请帮我做这个

Html


我认为这样的想法是,你永远看不到卡号,因此,你没有安全责任的负担

这个过程基本上是由Stripe通过Iframe来处理的。您所需要做的就是在服务器上验证支付意图,这将创建一个安全密钥/令牌,该密钥/令牌将传回客户端,然后发送到Stripe进行收费


我对这一点还不熟悉,最初的过程并不明显。我认为另一家支付提供商也提供了类似的流程。

“这样我就可以传递到后端。”您不应该这样做。它将您置于PCI范围内,意味着您需要执行大量审核和持续的法规遵从性步骤。使用Stripe的全部目的是避免在后端存储真正的CCs(尤其是CVV!)。存储代币,而不是卡的详细信息。谢谢您的回复ceejayoz。因此,如果我将该令牌传递给后端,他们是否可以验证该令牌并能够查看输入的卡详细信息?请阅读。您可以从一个数据库中获取诸如卡类型、到期日、最后四位数字等详细信息。
<h2>Create Token Example</h2>
<ngx-stripe-card
  [options]="cardOptions"
  [elementsOptions]="elementsOptions"
></ngx-stripe-card>
<button type="submit" (click)="createToken()">
  CREATE TOKEN
</button>
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions
} from '@stripe/stripe-js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0'
        }
      }
    }
  };

  elementsOptions: StripeElementsOptions = {
    locale: 'en'
  };

  stripeTest: FormGroup;

  constructor(private fb: FormBuilder, private stripeService: StripeService) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['', [Validators.required]]
    });
  }

  createToken(): void {
    const name = this.stripeTest.get('name').value;
    console.log(name);
    this.stripeService
      .createToken(this.card.element, { name })
      .subscribe((result) => {
        if (result.token) {
          // Use the token
          console.log(result.token.id);
        } else if (result.error) {
          // Error creating the token
          console.log(result.error.message);
        }
      });
  }
}