Edit a credit card using Stripe checkout.js - stripe-payments

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.

Related

How to create a customer and add a credit card using stripe / angular / node

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.

Specifying mandate[notification_method] client-side with Stripe.js?

I'm creating reusable SEPA source by first creating a client_secret server-side:
await stripe.setupIntents.create({
payment_method_types: ["sepa_debit"],
customer: "..."
});
I then pass the client_secret to <Elements /> as an option:
<Elements
stripe={...}
options={{
locale,
clientSecret: setupIntentClientSecret,
...
}}
>
Once the customer enters their SEPA debit data, I confirm the setup client-side via:
await stripe.confirmSetup({
elements,
confirmParams: {
return_url: window.location.href
},
redirect: "if_required"
})
Now, the SEPA debit best practices mention that
Source objects provide tooling to help you notify your users compliantly. At Source creation it is possible to specify a mandate[notification_method].
So how can I specify this mandate attribute client-side? I suppose it simply isn't possible and I'll need to update the newly created source server-side?
EDIT:
Source updating won't work because the object created by calling stripe.confirmSetup is a payment_method, not a source 🤔
The documentation you've shared (link) is for the older SEPA integration path using the Sources API. Instead, you should refer to this guide which references mandate collection and uses the new APIs including Setup Intents, Payment Methods and the Payment Element (as per the code you've shared).

Add cardholder name with Stripe custom checkout

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.

Stripe recurring payments for 3DS source

I want to use Stripe to charge cards recurrently every 30 days with amounts that oscilate.
From the docs I got that if there is a possibility that the card requires 3DS we should use Sources so I switched to sources ;)
From the source object stripe.js retrieves I look at three_d_secure param to decide whether to create a source object that requires 3DS or a normal card charging.
The flow:
With JS I get the source object that has three_d_secure set to either optional or required.
When it's set to optional after I retrieve the source with: source = Stripe::Source.retrieve(source_id) it looks like this:
"status": "chargeable",
"type": "card",
"usage": "reusable",
"card":{"exp_month":12,"exp_year":2032,"brand":"Visa",...
I attach it to a customer and charge it. I guess usage: reusable means that I can charge the card again later...
When three_d_secure=='required' I create a new source calling this:
source = Stripe::Source.create({
amount: amount,
currency: currency,
type: 'three_d_secure',
three_d_secure: {
card: source_id, #src_xcvxcvxcvc
},
redirect: {
return_url: return_url
},
})
I redirect the user to the URL Stripe provides, user enters his 3DS PIN and gets back to my return_url. When Stripe redirects the user back to my return_url I retrieve the source again and get something like this:
"status": "chargeable",
"type": "three_d_secure",
"usage": "single_use",
"three_d_secure": {"card":"src_1B1JzQHopXUl9h9Iwk05JV1z","authenticated":true,"customer":null}
I would expect that after passing the 3DS the source becomes reusable and chargeable until the date of expiry or so :|
My questions are:
1 Why is the 3DS source single_use? Is this like this only in sanbox environment or with the card I am using to test?
2 Can a 3DS protected card be charged again at all?
3 What's the correct approach to attach to customer sources (3DS or normal) that can be charged again and again?
Thank you!
Because it is a source payment token, not a source card token. It expires on a due date or when is consumed. You can use reusable token to create single_use tokens. reusable one represents a card source token
Yes if a 3ds is optional or not_supported, no if required. If required then every payement needs to fulfill a 3ds.
Steps:
Create an src_card_token for a card or use saved one (reusable)
Create an customer object with an src from src_card_token
Create an src_payment_token for a customer using one of his saved cards (as token)
fullfil a 3ds redirect process if required.
create a charge

Instagram changed policy to retrieve posts with hashtag

Instagram has changed policy since June 1st. Now my code which used to fetch posts with certain hashtag in a website stopped working.
According to this new policy, the app needs to submit for approval. But when i went through approval process, the privacy policy is a must and which should describes how this app would use data. and when i went through sample instagram policy this is huge and mostly deals with mobile app.
Now my qeustion is, do i need to write something like this when my app just needs to use client id's secret keys and general stuff just to fetch posts with certain(defined) hastag ?
I have used instafeed.js to retrieve posts by hashtag.
var feed = new Instafeed({
get: 'tagged',
tagName: "<?php echo $tagname;?>",
clientId: "<?php echo $client_id;?>",
limit: 14,
template: '<img data-attr="{{id}}" src="{{image}}" alt="{{caption}}" data-username="{{link}}" />',
});
UPDATE :
It looks like we won't be able to fetch particular hashtagged public content in our website.
Also, in the alert section As alternative solution, ..... find a company that offers this type of service (content discover, moderation, and display).
What are these company instagram talked about ?
We're in the same boat. The only one I've found so far that claims to be able to do this is called Dialog Feed. Here is their blog post about it: https://www.dialogfeed.com/instagram-api-not-working-solutions-for-hashtag-and-profile-search/
They are not cheap, however. Like 890 eur/year not cheap for just the basic.

Resources