Stripe.js 개인 정보 구문 분석 - 자바 스크립트

Question

개인 정보 입력 양식을 사용하여 신용 카드 정보를 얻은 다음 토큰을 생성하는 데 사용하려고합니다. Stripe.js 3에서는 각 div 요소에 입력 필드를 탑재하기 위해 iframe을 사용하기 때문에이 방법을 사용하기가 어렵습니다. 분명히 다른 곳 (내 자신의 UI)에서 값을 가져올 수있는 update() 함수가 있지만 작동하도록 할 수는 없습니다. 누구든지이 구현하는 방법에 대한 아이디어가 있습니까?

https://jsfiddle.net/507oh942/2/

https://stripe.com/docs/stripe.js#other-methods

var cardNumber = elements.create('cardNumber'); 
cardNumber.mount('#number'); 
var cardExpiry = elements.create('cardExpiry'); 
cardExpiry.mount('#example2-card-expiry'); 
var cardCvc = elements.create('cardCvc'); 
cardCvc.mount('#example2-card-cvc'); 

나는 또한 확실하지 오전이 여전히 활성화 지원 Stripe.js 2, 그. 누구든지 이전 버전을 사용하는 작업 fiddle합니까?

Answer 1

Stripe.js v3에서는 모든 카드 정보가 Stripe의 도메인에서 호스팅되는 iframe에 제공되며 카드 정보를 자신의 양식에서 가져올 수 없습니다. 이 작업을 수행해야한다면 Stripe.js v2를 계속 사용 하겠지만 PCI 관련 내용 (SAQ A-EP vs SAQ A)이 있음을 알고 있어야합니다.

v3의 입력란을 별도의 구성 요소 (숫자, 만료 등의 입력란 하나)로 분리하려면 iframe에서 계속 호스팅되지만 쉽게 할 수 있습니다.

, 전체 예를 들어 여기에 추가 정보를 원하시면 https://jsfiddle.net/o2n3js2r/132/

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

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

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

var postalCodeElement = elements.create('postalCode', { 
    style: style 
}); 
postalCodeElement.mount('#postal-code-element');