时间戳

首页 > 解决方案 > 如何在 ngx stripe angular 中获取输入的卡片详细信息

angular - 如何在 ngx stripe angular 中获取输入的卡片详细信息

问题描述

嗨，伙计们，我目前正在通过 ngx-stripe 文档使用 angular ngx-stripe，当我通过卡号和 mm/yy cvc 时，我在其中获取令牌。但我想获取输入的卡号，mm/yy cvc。这样我就可以传递到后端。是否可以检索输入的详细信息。请帮助我。

html

<h2>Create Token Example</h2>
<ngx-stripe-card
  [options]="cardOptions"
  [elementsOptions]="elementsOptions"
></ngx-stripe-card>
<button type="submit" (click)="createToken()">
  CREATE TOKEN
</button>

TS

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);
        }
      });
  }
}

标签： angularstripe-payments

解决方案

我认为这个想法是您永远不会看到卡号，因此不会承担安全责任。

该过程几乎由 Stripe 通过 iframe 处理。您需要做的就是在您的服务器上验证支付意图，这会创建一个安全的密钥/令牌，该密钥/令牌会传回您的客户端，然后发送给 Stripe 进行收费。

我是新手，这个过程最初并不明显。我认为其他支付提供商提供了类似的流程。

推荐阅读