How to obtain a client-side token without using Stripe's UI layer?
Question
I have the following php page that works fine:
<html>
<head>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: '<?=$stripePublicKey?>',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
console.log("token.id: " + token.id);
console.log("token: " + token);
}
});
function init(){
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'TruckerCert',
description: 'Buy Certs',
amount: 2000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
}
</script>
</head>
<body onload="init()">
<h1>Stripe Token Test</h1>
<button id="customButton">Purchase</button>
</body>
</html>
It works and produces the following JSON:
{
"id": "tok_1E255j2*****wC135im",
"object": "token",
"card": {
"id": "card_1E255j2H1*****RGS4Kqc",
"object": "card",
"address_city": null,
"address_country": null,
"address_line1": null,
"address_line1_check": null,
"address_line2": null,
"address_state": null,
"address_zip": null,
"address_zip_check": null,
"brand": "Visa",
"country": "US",
"customer": null,
"cvc_check": "pass",
"dynamic_last4": null,
"exp_month": 12,
"exp_year": 2021,
"fingerprint": "3nk5B*****29xV",
"funding": "unknown",
"last4": "1111",
"metadata": {
},
"name": "her*******@gmail.com",
"tokenization_method": null,
"type": "Visa"
},
"client_ip": "67.***.***.17",
"created": 1549754315,
"email": "her********@gmail.com",
"livemode": false,
"type": "card",
"used": false
}
So that is all as expected. The problem is, the only way I can find to submit my credit card # and exp date and receive back the JSON is by going through their UI. For example, when I click my customButton , this dialog appears:
I don't want to use their cc form. I have my own CC form. I want to use my own form, send an ajax request to Stripe's API endpoint, and receive back the JSON just as above. I have combed through Stripe's online docs for an hour and can't find any way to do this.
How is it done?
2 answers
solution1
2 ACCPTED 2019-02-10 07:27:33
The product you mentioned is called Stripe Checkout and lets you collect card details securely without having to build your own payment form.
Since you mentioned having your payment form already though you should instead look into Stripe Elements . This lets you design and style your own payment form while still meeting the lowest level of PCI compliance, SAQ A, as documented here .
You can still multiple examples of payments form and the corresponding code here: https://stripe.github.io/elements-examples/
solution2
1 2019-02-10 17:24:43
Stripe.js version 2 supported this. As of the time of writing this you can see the old documentation here . If I had to guess Stripe.js v2 will be depreciated fully and removed from use at some point. So although you can use it with some hassle, it is depreciated, and you have to ask yourself if it's worth the risk of having to rewrite in the future. Since you are building it currently, I would just use the latest technology.
Also, according to Stripe's page on PCI compliance :
If you continue to use Stripe.js v2, you'll be required to upload your SAQ A-EP annually to prove your business is PCI compliant.
Overall using Stripe's Elements system is the way to go. There is no way you can touch the user's payment information, which makes it as secure as possible. Much less possibility of you messing up in your code vs an AJAX call. What if you accidentally send the AJAX call to your own server? You are in violation of PCI compliance then.
Stripe Elements also provides a LOT of customization in terms of styling. You should be able to design it in a way that integrates with your existing form pretty easily.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.