So I have a simple react frontend connected to stripe checkout, right now I created a product on stripe for 10 dollars and capture it with the API. I would like to implement something where the user can enter a custom amount and send it. Is this possible to do using the stripe checkout only? I do not want to setup a backend or something too complicated. Any ideas will be appreciated thank you :)
lineItems:[
{
price: process.env.REACT_APP_PRODUCT,
quantity: 1,
},
],
mode:"payment",
cancelUrl: window.location.origin,
Yes, it's possible. You can do it like this:
https://jsfiddle.net/captainapollo/atgycd2s/
console.log("I can't put a JSFiddle link without code so here's some code.");
Related
I been trying to figure out how to create a user and store his credit card info in stripe for like a day and I cant get it to work.
I can see the following docs:
https://stripe.com/docs/api/customers/create
const stripe = require('stripe')('sk_test_xxx');
const customer = await stripe.customers.create({
description: 'My First Test Customer (created for API docs at https://www.stripe.com/docs/api)',
});
I understand the secret key aspect of the code.
I dont understand how to create the user object, though. where do I add the user name and info and email and stuff?
is there an example I can see using angular?
maybe the example can be for creating and storing the following information:
first name: juan
last name: cheese
email: jcasas#gmail.com
creditcard: 424242424242
csv: 231
creditcard name: juan cheese
exp: 02/02/25
i literally bough a course on udemy for this but that does not work either :(
If your intention is to save payment details, without an initial payment then you should follow this guide from the Stripe documentation.
The process creates a Customer object, and uses Setup Intents to correctly setup and save the payment details to that customer. Stripe.js and the Payment Element are used to safely collect payment details in a PCI compliant manner and handle any requested 3DS/authentication.
We have to use payment links as were coming from a native desktop app on MacOS and Windows, Stripe has no support here.
The native desktop apps do not have a web-view.
Using the following API with url params.
https://stripe.com/docs/payments/payment-links#url-parameters
const paymentLink = await stripe.paymentLinks.create({
line_items: [
{
price: price.id,
quantity: 3,
//
},
],
});
The url on the frontend opens as such (note to "client_reference_id")
final url = link + "?client_reference_id=$customerId&prefilled_email=${stripeCustomer!.email}";
The key url params are added.
The problem is, is that "client_reference_id" is ignored and a new customer is created on the Stripe dashboard, this is no good for making payments as we generate the payment for a specific account created on the database.
Any ideas what I could do here?
We tried checkout session but there is no way to open from a link. :-/
I found the answer to this question. So the generic payment link does not work with a customer id, however you can create a session and attach a customer id to it. The session object will return with a url.
Example:
const session = await stripe.checkout.sessions.create({
line_items: [{ price: price_id, quantity: 1 }],
mode: 'subscription',
success_url: 'https://app.seedscout.com',
cancel_url: 'https://app.seedscout.com',
customer: cus_id,
});
You can find more information in their documentation here.
https://stripe.com/docs/api/checkout/sessions/create
Important to note: Stripe has requirements for the format of customer_reference_id:
client_reference_id can be composed of alphanumeric characters,
dashes, or underscores, and be any value up to 200 characters. Invalid
values are silently dropped and your payment page will continue to
work as expected.
I was tearing my hair out trying to work out why client_reference_id wasn't being passed, and it looks like this was the issue – I was separating two values with a period.
I'm new to integrate stripe payment. I confused how to integrate 3D secure authentication. In my application on Backend platform using node with Hapi framework. Here is the some of code of paymnet intent which is given below.
let params = {
amount: 100,
currency: "CAD",
payment_method_types: ['card'],
payment_method: "card_1HqytjG6OdQYWdifbWxCrVGB", //cardId
customer: "users5fc1c5ff44d8605030499c00", //userId
}
let intent = await stripe.paymentIntents.create(params {
idempotencyKey: uuidv4());
let paymetConfirm = await stripe.paymentIntents.confirm(intent.id, intend.payment_method);
It's working fine with some of the test cards which not require 3D secure authentication.
4242424242424242
2223003122003222
Not working with these cards require 3D authentication)
4000002760003184
4000002500003155
So, when I check the response of the API (with 3D authentication card) return one of the sub-object is
next_action: {
type: 'use_stripe_sdk',
use_stripe_sdk: {
type: 'three_d_secure_redirect',
stripe_js: 'https://hooks.stripe.com/redirect/authenticate/src_1Hs1zhG6OdQYWdifEWTcyUvC?client_secret=src_client_secret_okgYE1A4eOovEFL9g0sgN29U',
source: 'src_1Hs1zhG6OdQYWdifEWTcyUvC'
}
},
When I take this URL and paste on the browser it redirects the page of 3d Secure, There are two option
complete authentication
fail authentication
Note-
Stripe SDK is set up only on the backend platform(Node)
My question is that
Is there any way not to confirm from the client-side, automatically confirm from the backend platform.
For the scenario, we have to set up a stripe SDK on the client-side(android,IOS).?
when I click on the URL which are inside next_action object which are given above,There are two option inside it,that is complete and failure authentication(3D page view) how to integrate clicking on itmy API hit respectively. how to achieve it?
Please help me.Thanks
Your payments are failing with 3DS enabled cards because you aren't authenticating them on the client. Your current flow of confirming server side won't work with 3DS enabled cards, as you aren't giving the user an opportunity to do the 3DS flow.
It's not really recommended to confirm the payment server-side, as it adds unnecessary round trips to the server without really adding anything. However if you do still want to confirm server side, Stripe has a guide on how to do that here: https://stripe.com/docs/payments/accept-a-payment-synchronously
Stripe has recently launched Radar 2.0 to improve payment fraud detection. One of the requirements for using Radar 2.0 is that you need to provide the cardholder name during the purchase.
I'm using the "custom" form of Stripe's checkout.js documented here.
The documentation does not tell you how to specify the cardholder name as part of the checkout process. Has anyone figured this out?
I've copied relevant portions of my implementation below in case that is helpful.
If this can't be done, then I guess Stripe is insisting that people upgrade to Stripe Elements, but if that is that case it would be great for them to say so.
<script src="https://checkout.stripe.com/checkout.js"></script>
$(document).ready(function() {
var stripe_btn = document.getElementById('stripe-btn');
var handler = StripeCheckout.configure({
key: 'pk_live_...',
token: function(token) {
$("#stripe-token").val(token.id);
$("#stripe-form").submit();
}
});
stripe_btn.addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
email: $('#stripe-btn').data('email')
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
});
Stripe Checkout does not support collecting only the cardholder's name today. There's also no way to pre-fill or pass the cardholder's name to Checkout if you already have it on your end.
The only solution in that case would be to collect the full billing address instead which would also collect the cardholder's name. This can be done by passing billingAddress: true to the StripeCheckout.configure() call.
Checkout from Stripe has a great way to add a credit card for a transaction, by simply invoking StripeCheckout.open().
Is it possible to use .open() to edit a card? (passing in the card token)
Also, where can I download a non-minified version of checkout.js to see the .open() method signature?
There is no way to edit a card that way. What you can do though is use Stripe Checkout to ask your customer for a new card without asking him to pay anything. The idea is to avoid setting the amount or data-amount parameter.
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_XXX"
data-name="Demo Site"
data-description="Update Card Details"
data-panel-label="Update Card Details"
data-label="Update Card Details">
</script>
</form>
You would get a new card token for that new card and you could then use the Update Customer API to save the new card on the customer.
As for your second question, there is unfortunately no unminified version of Checkout.js accessible at the moment.
Try http://unminify.com/ to see an unminified version of checkout.
I saw this done for the first time today. If you have an app where users log in, you should be able to do it with a custom Checkout integration (the above is the simple integration) found here https://stripe.com/docs/checkout#integration-custom
On the server side you would retrieve the customer via Stripe's API. From the linked custom example, you can pass the retrieved ID through to Checkout via session data so it knows which customer to update here:
$('#customButton').on('click', function(e) {
// Open Checkout with further options
handler.open({
name: 'Your Company Name',
email: customer_email,
id: customer_id,
zipCode: false,
});
I have not yet tested this, if I get a chance I'll report back.