अलग-अलग तत्वों का उपयोग करके पट्टी टोकन बनाना

Question

तत्व प्रकार 'कार्ड' का उपयोग करने के बजाय मुझे तत्वों को अलग करने की आवश्यकता है, प्रलेखन उदाहरण में वे केवल 'कार्ड' का उपयोग करते हैं, इसलिए जब वे टोकन बनाते हैं तो वे कार्ड ऑब्जेक्ट को बनाने के लिए पास करते हैं टोकन पैरामीटर।

stripe.createToken(card).then(function(result) { 

}); 

टोकन बनाने के लिए मैं इन एकाधिक ऑब्जेक्ट्स को कैसे पास कर सकता हूं?

var cardNumber = elements.create('cardNumber'); 
cardNumber.mount('#card-number'); 
var cardExpiry = elements.create('cardExpiry'); 
cardExpiry.mount('#card-expiry'); 
var cardCvc = elements.create('cardCvc'); 
cardCvc.mount('#card-cvc'); 
var cardPostalCode = elements.create('postalCode'); 
cardPostalCode.mount('#card-postal-code'); 

Answer 1

Elements संदर्भ से।

तत्व: वह तत्व जिसे आप डेटा टोकन करना चाहते हैं। एलिमेंट टोकननाइज़ करने के लिए तत्वों के समान उदाहरण पर बनाए गए अन्य तत्वों से डेटा खींचें।

https://stripe.com/docs/elements/reference#stripe-create-token

तो तुम को प्रारंभ कर सकते हैं तत्वों

var elements = stripe.elements(); 

और फिर परिभाषित/अपने क्षेत्रों माउंट

var cardNumber = elements.create('cardNumber'); 
cardNumber.mount('#card-number'); 
var cardExpiry = elements.create('cardExpiry'); 
cardExpiry.mount('#card-expiry'); 
var cardCvc = elements.create('cardCvc'); 
cardCvc.mount('#card-cvc'); 
var cardPostalCode = elements.create('postalCode'); 
cardPostalCode.mount('#card-postal-code'); 

फिर इस उन सब में खींच चाहिए क्योंकि वे elements का हिस्सा हैं

stripe.createToken(cardNumber).then(doSomething); 

Answer 2

यहाँ एक साथ रखा धारी टीम से एक jsfiddle किसी कि एक अलग दृष्टिकोण लेता है:

https://jsfiddle.net/ywain/o2n3js2r/

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

var style = { 
    base: { 
    iconColor: '#666EE8', 
    color: '#31325F', 
    lineHeight: '40px', 
    fontWeight: 300, 
    fontFamily: 'Helvetica Neue', 
    fontSize: '15px', 

    '::placeholder': { 
     color: '#CFD7E0', 
    }, 
    }, 
}; 

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


function setOutcome(result) { 
    var successElement = document.querySelector('.success'); 
    var errorElement = document.querySelector('.error'); 
    successElement.classList.remove('visible'); 
    errorElement.classList.remove('visible'); 

    if (result.token) { 
    // In this example, we're simply displaying the token 
    successElement.querySelector('.token').textContent = result.token.id; 
    successElement.classList.add('visible'); 

    // In a real integration, you'd submit the form with the token to your backend server 
    //var form = document.querySelector('form'); 
    //form.querySelector('input[name="token"]').setAttribute('value', result.token.id); 
    //form.submit(); 
    } else if (result.error) { 
    errorElement.textContent = result.error.message; 
    errorElement.classList.add('visible'); 
    } 
} 

cardNumberElement.on('change', function(event) { 
    setOutcome(event); 
}); 

document.querySelector('form').addEventListener('submit', function(e) { 
    e.preventDefault(); 
    stripe.createToken(cardNumberElement).then(setOutcome); 
});