how to save card details without making payment on stripe? - javascript

I want to save customer's card details and use them for future usage. I am asking the users to enter the card details, For that I am creating a customer on stripe, then creating a setup intent using stripe.setupIntents.create(). and I have created stripe elements using stripe.elements() Now I want to save the card, so which method or api is used to save the card-details on stripe?
I have gone throgh the docs but coul not find a proper way
Can anyody tell me what to do next?

I used the method
setupIntent.client_secret, {
payment_method: {
card: card,
billing_details: {
name: "name"
}
}

Related

PayPal JavaScript SDK: Getting the Basic Card Info onApprove()

In PayPal JavaScript SDK, we get the details object onApprove as shown below:
onApprove: function (data, actions) {
console.dir(data);
// This function captures the funds from the transaction.
return actions.order.capture()
.then(function (details) {
console.dir(details);
// This function shows a transaction success message to your buyer.
alert('Transaction completed by ' + details.payer.name.given_name);
});
}
We noticed that the details object does not contain any information about the payment method that the payer used to make the payment, i.e. PayPal, Debit Card, or Credit Card, which of course, the last 4 digits card number isn't provided too.
Why we need the Basic Card Info?
We need the basic card info to generate a more useful receipt to our customers (including corporate customers). Without such information, it's useless for our customers to keep the receipt and for their accounting purposes because they can't even reference to which card of which bank that they were using for the payments.
Based on the PayPal Here docs, we found this from the Receipt API's response object:
"payment_card": {
"card_scheme": "CREDIT",
"card_number": "2677", // This is what we're looking for
"authorization_code": "087202",
"card_soft_description": "PP*PAYDIANTPAY",
"icc_info": {
"pin_present":false,
"signature_verified":false,
"authorization_response_code": "00",
"authorization_response_code_label": "APPROVED",
"icc_application_cryptogram": "606C700D55FB5C0A",
"icc_application_cryptogram_label": "TC",
"icc_application_identifier": "A0000000041010",
"icc_application_PAN_number": "01",
"terminal_id": "7688",
"transaction_status_information": "E800",
"issuer_application_data": "011060700222000014E100000000000000FF",
"terminal_verification_results": "0000008000"
}
}
But how can we get the same info with the JavaScript SDK of PayPal? I've also gone through the PayPal REST API but didn't seem to find it. Please advise, thank you.
If you integrate using the standard black Debit or Credit Card button, you will not receive any information about which card they used. In fact, you will not even know whether they paid with a card -- they might have fallen back to a regular PayPal checkout and used a different funding source. All billing information is kept private in PayPal by design.
If your country and currency are supported by advanced credit and debit card payments you could see about activating that for your account and integrate using that custom form (hosted fields) instead. This method will tell you the brand and last digits of the card in the details response.

Auth0: How to add custom properties to UserObject?

Hello dear StackOverFlow community,
i don't know much about Auth0 and need help. And I wonder how to add my own properties when creating a user? just for info i have connected Auth0 to my own MongoDB atlas database.
i want to add a customId when creating a user, and this should be a 16-digit random number.
And my userObj should then look something like this:
{
_id: ObjectId("5f720126054c87001662a138"),
connection:"MongoDB"
client_id:"zoClZ3gZE56iwblHXQ1vgwEcLfYr81Bx"
email:"gustek#gustek.com"
username:"gustek"
password:"$2b$10$dE69gGsDqVfWtmnXZ6EaKetILUmEju8N9PVjtDpgzzAp4jYNQbe8G"
tenant:"dev-test"
email_verified:false
customId:"9829539769841530"
}
I mean I found something in the documentation but I do not know how to implement it:
https://auth0.com/docs/users/set-metadata-properties-on-creation
Do I have to do it over this surface?
As I said before, I have no idea how I could achieve this. I am grateful for every answer!
You can use an app_metadata property in the user object to store data that is not part of the normalized user profile. This would include a custom UUID like you described here.
The user object would look like this:
{
client_id: "<ID of creating client (application)>",
tenant: "<name of creating Auth0 tenant>",
email: "<email address for the user>",
password: "<password for the user>",
username: "<name associated with the user>",
user_metadata: {
"language": "en"
},
app_metadata: {
"custom_id": "1234567890"
}
}
While user_metadata and app_metadata are optional, if supplied, they do not need to be stored in the legacy identity store; Auth0 automatically stores these values as part of the user profile record created internally. These values are (optionally) provided as a reference: their contents potentially being influential to legacy identity creation.

How to create discrete inputs for credit card information with the Vue Stripe Checkout library?

Shown in an example screenshot on its GitHub page, Vue Stripe Checkout library displays a credit card input form with individual inputs for the card information (CC#, expiration, CVV) and also the name, country, and email:
Based on the Vue Stripe Elements example shown in the GitHub README.md, my single-file Vue component currently creates a single input for all the credit card information. It looks like this:
And this is the code that created it:
<template>
<div>
<StripeElements
ref="elementsRef"
:pk="publishableKey"
:amount="amount"
#token="tokenCreated"
#loading="loading = $event"
>
</StripeElements>
<button #click="submit">Pay ${{ amount / 100 }}</button>
</div>
</template>
<script>
import { StripeElements } from "vue-stripe-checkout";
export default {
components: {
StripeElements
},
data: () => ({
loading: false,
amount: 1000,
publishableKey: process.env.VUE_APP_PUBLISHABLE_KEY,
token: null,
charge: null
}),
methods: {
submit() {
this.$refs.elementsRef.submit();
},
tokenCreated(token) {
this.token = token;
// for additional charge objects go to https://stripe.com/docs/api/charges/object
this.charge = {
source: token.id,
amount: this.amount, // the amount you want to charge the customer in cents. $100 is 1000 (it is strongly recommended you use a product id and quantity and get calculate this on the backend to avoid people manipulating the cost)
description: this.description // optional description that will show up on stripe when looking at payments
}
this.sendTokenToServer(this.charge);
},
sendTokenToServer(charge) {
// Send to charge to your backend server to be processed
// Documentation here: https://stripe.com/docs/api/charges/create
console.log(charge)
}
}
};
</script>
<style lang="scss" scoped></style>
However, after scouring its documentation, limited examples (here and its source code), and Issues section, I am unclear on how a credit card input form with individual inputs for the card information (CC#, expiration, CVV) and also the name, country, and email can be created. I am hoping someone with experience with Stripe might be able to shed some light.
Unfortunately, it's not possible to create separate card number, expiry, and cvc inputs in the current version of Vue Stripe Checkout.
The library's Stripe Elements component creates a Card Element under the hood as you can see here:
https://github.com/jofftiquez/vue-stripe-checkout/blob/master/src/Elements.vue#L84
This means that the component will include the card number, expiry, and cvc inputs combined, as shown in your second screenshot. As far as I can tell, the library has no components or options to create discrete card number, expiry, and cvc inputs which would require making three distinct Stripe Elements as shown here: jsfiddle.net/3p89x9gL
The first screenshot is an image of Stripe Checkout which is a product built by Stripe. The idea is that you add a button to your site which redirects to a form hosted by Stripe and they handle the rest. In this case, the library has a component that makes it easy to redirect to Stripe Checkout:
https://github.com/jofftiquez/vue-stripe-checkout#vue-stripe-checkout-1

Create a cutom form to accept credit card with Stripe

EDIT: I found a solution, see my comment.
I try to understand how to make a cutom form with informations like: credit card number, expiration, cvc, name and postal code, get all these information and trigger a payment.
I don't want to use the integration of stripe. So i found this page on stripe: https://stripe.com/docs/payments/accept-a-payment
In this page we can learn how to create a form that is generated by Stripe with the DIV card-element:
<form id="payment-form">
<div id="card-element">
<!-- Elements will create input elements here -->
</div>
<!-- We'll put the error messages in this element -->
<div id="card-errors" role="alert"></div>
<button id="submit">Pay</button>
</form>
In the doc we can see examples made by stripe: https://stripe.dev/elements-examples/ i use sample 2
Example 2 shows a "floaty-label" form that uses individual cardNumber, cardExpiry, and cardCvc Elements with a custom web font.
We can get the js file and css file and here the common code: https://github.com/stripe/elements-examples/blob/master/js/index.js
But i don't understand, in the sample2 the common code use stripe.createToken and in the doc they use confirmCardPayment
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
name: 'Jenny Rosen'
}
}
}).then(function(result) {
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
}
}
i don't know how to get my informations (price, postal code, credit card number, expiration, cvc) and trigger the payment. I'm lost.
Please help, thanks.
Because Stripe needs to meet the requirements of new data protection regulation, you are no longer able to retrieve form data. The data is instead sent straight to Stripe and you receive a secret client token that represents that data.

Meteor Accounts add extra fields

How do I add extra fields to the Meteor Accounts?
Ex: Profile Picture, Header Picture field etc...
I know how to change the password Accounts.setUsername(userId, username);
But how would I add an extra field to the Accounts?
You need to update the users collection in mongo. The way to access it is by using
Meteor.users.update(Meteor.userId(), {
$set:{
profile: {
picture: 'url-to-picture'
}
}});
According to documentation, anything that need to be updated by user should be stored under the profile key
profile: an Object which the user can create and update with any data.
Do not store anything on profile that you wouldn't want the user to
edit unless you have a deny rule on the Meteor.users collection.

Categories