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.
Related
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"
}
}
I'm trying to integrate Paypal into my app in NodeJS. I'm using REST API since the official npm packet is deprecated.
Let's suppose I have a product with two plans, planA and planB, necessary for recurring payments like subscriptions. Suppose a customer subscribe to planA, which costs 10$. After a while, he wants to switch to planB, which costs 20$, to unlock premium content in the platform.
I found the API: POST/v1/billing/subscriptions/{id}/revise
with which one should be able to send the planID planB to switch to it. You can also send effective_time field to specify when the change is effective. After calling this API, Paypal reply with 6 links, and I use the first (approve) to redirect the customer to Paypal domain to confirm it's will to switch the plan. After the user login, confirm and click "Accept and subscribe" to the new plan, the page always give me the following error: Things don't appear to be working at the moment. Please try again later.
, despite the plan change goes fine (I can verify it through dashboard).
I'm wondering what can I do to avoid that error.
I want to clarify that in the settings, through the dashboard, under Account settings -> Website payments -> Website preferences, I temporarily have the option Block non-encrypted website payment to Off.
Thank you all in advance!
The setting "Block non-encrypted website payment" is not relevant to this issue, and will have no effect. It applies exclusively to legacy HTML-only payments, which you should not concern yourself with.
Edit: ah yes, a redirect integration requires an application_context with a return_url. For usage with the SDK, no redirect_url is used, hence why the field is not required by the API.
Previous answer follows:
The issue you describe seems to be a problem with the PayPal site, and possibly only occurs in sandbox mode or with certain browsers/cookies. You can test as desired and contact PayPal's support if needed.
It is also possible to do a revise with the JS SDK rather than a redirect. For a client-side-only integration (no API), this can be done using actions.subscription.revise. Search for that text within the SDK reference.
To combine the JS SDK with the API call you are using, have your button code fetch the revised subscription ID from your server. Here is a sample for a create, which you can adapt to be a revise as it's essentially the same thing (you'd just likely be using a /revise endpoint /path/on/your/server)
<script src="https://www.paypal.com/sdk/js?client-id=..........&vault=true&intent=subscription"></script>
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
style: {
label:'subscribe' //Optional text in button
},
createSubscription: function(data, actions) {
return fetch('/path/on/your/server/paypal/subscription/create/', {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(serverData) {
console.log(serverData);
return serverData.id;
});
},
onApprove: function(data, actions) {
/* Optional: At this point, notify your server of the activated subscription...
fetch('/path/on/your/server/paypal/subscription/activated/' + data.subscriptionID , {
method: 'post'
}).then(function(res) {
return res.json();
}).then(function(serverData) {
//
});
*/
//You could additionally subscribe to a webhook for the BILLING.SUBSCRIPTION.ACTIVATED event (just in case), as well as other future subscription events
//Ref: https://developer.paypal.com/docs/api-basics/notifications/webhooks/event-names/#subscriptions
// Show a message to the buyer, or redirect to a success page
alert('You successfully subscribed! ' + data.subscriptionID);
}
}).render('#paypal-button-container');
</script>
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.
In the documentation for setting up Apple pay with Stripe, the steps tell you to create a payment request with stripe elements in order to display the apple pay button - the example request is a one-time direct charge. You must have a payment request to display the button - so how can I create a payment request for a subscription? The payment request object is a stripe elements thing and is not described in the stripe api.
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
paymentRequest: paymentRequest,
});
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
if (result) {
prButton.mount('#payment-request-button');
} else {
document.getElementById('payment-request-button').style.display = 'none';
}
});
The flow for using a credit card is completely different. It doesn't require any payment request, you simply create a token from the stripe elements card form to create a customer.
The Stripe support page for Using Apple Pay for recurring payments just says "apple pay will create a token" but provides no clue how you would set it up without a one-time charge.
How can I make stripe display the apple pay button without requesting payment? If I have to request payment, is it just for one interval of the subscription, and will this amount be able to be billed on a recurring basis?
The payment request that you make with Stripe.js does not actually process a payment:
It simply confirms that the user's browser supports Apple/Google Pay, and displays a payment-sheet with the provided payment details.
After the user authorizes the payment described on the payment-sheet, Stripe will produce a payment method.
At this point, if you don't integrate the remaining steps, the user would never be charged - you would simply have a Stripe payment method ID.
Remaining steps you'd need to integrate at this point are:
Save the payment method ID to a Customer: https://stripe.com/docs/api/payment_methods/attach
Set the payment method as the default for subscription invoices: https://stripe.com/docs/api/customers/update (by setting invoice_settings.default_payment_method)
Subscribe the customer to a recurring Price (e.g., https://stripe.com/docs/billing/subscriptions/fixed-price)
You would trigger all of the above logic as a result of receiving the payment method from the payment request:
paymentRequest.on('paymentmethod', function(ev) {
const paymentMethodId = ev.paymentMethod.id;
// Send ID to your server to:
// a) attach it to a Customer
// b) set it as the default for subscription invoices
// c) create the subscription
});
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