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.
Related
I am building an application which includes a custom donation form where users can select:
Frequency: monthly, single
Amount: 3 x Buttons with values, input for custom value
I am using the PayPal Donate SDK and cannot find a way to pass across the amount or frequency so that the amount is pre-filled and the "make this a monthly donation" checkbox selected/deselected based on the users input.
The PayPal button has been added to the page (just absolute styled over the form button) and the SDK opens the donation page in a modal which is my desired result.
This is the code to display my button:
window.PayPal.Donation.Button({
env: "sandbox",
hosted_button_id: "xxxxxxxxxxxx",
onComplete: function() {
// Redirect to success page, save the PP transaction details, etc.
}
}).render("#paypal-donate-button-container");
With the standard PayPal.Buttons API, I am able to pass in a createOrder function like so, where I can set the amount, for example;
window.PayPal.Buttons({
// ...
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: document.querySelector(".selected-premium").dataset.value
},
reference_id: document.querySelector(".selected-premium").dataset.days + "-days"
}]
});
}
}
Is there a way to pass through the amount and frequency using the SDK, similar to how I can do it with the standard payments API? If not, what are the alternatives in 2022 that don't rely on SO answers that use docs that no longer exist/deprecated methods?
With the PayPal Donations flow (this includes the Donate SDK)
You can pass a parameter for the amount and currency_code. If you do pass a prefilled amount, an option to make the donation recurring will not be available.
You cannot pre select the option to make the donation recurring in the Donations flow.
For the case of recurring donations -- since it's not possible to precheck the option to make them recurring in the Donations flow, nor is it possible to prefill the amount and have that choice of recurrence even be available -- what you could do is instead use a Subscription flow for when a recurrence is selected, and have this render in a separate div container that is shown/hidden based on your monthly vs single selection. A subscribe button for your account can be generated at: https://www.paypal.com/billing/plans . The plan it uses must have a specific amount, but this can be overridden in the JS createSubscription function (based on whatever selection or amount was entered on your site) by (in addition to the base plan_id) adding a plan object that contains a billing_cycles object with the amount/frequency you want.
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 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
});
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.
I am trying to setup Stripe Connect and need to
charge the buyer by creating a customer first,
then generate a token and finally
charge the customer with this token.
This works fine as long as the buyer and seller are not the owners of the Stripe Connect Platform.
I.e. let's assume the following email corresponds to the account holder:
admin#admin.com
Now, we have two sellers:
seller_1#sellers.com
admin#admin.com
And we have one buyer:
buyer_1#buyers.com
My code works when buyer_1 buys from seller_1. All goes fine and an application fee is charged.
The problem however arises when buyer_1 wants to buy from admin#admin.com.
Eventhough admin#admin.com is connected to the account platform (I go through the same process as for seller_1), I keep getting the error:
message: "Must authenticate as a connected account to be able to use customer parameter. See https://stripe.com/docs/api#create_card_token for more details."
param: "customer"
raw: Object
rawType: "invalid_request_error"
requestId: "req_8EtIue0F4JWFmQ"
stack: 400
type: "StripeInvalidRequestError"
I use the following tutorial to save a customer and charge customers:
// store
// Set your secret key: remember to change this to your live secret key in production
// See your keys here https://dashboard.stripe.com/account/apikeys
var stripe = require("stripe")("SECRETKEY");
// (Assuming you're using express - expressjs.com)
// Get the credit card details submitted by the form
var tokenID = request.body.stripeToken;
// Create a Customer
stripe.customers.create({
source: tokenID,
description: "Example customer"
}, function(err, customer) {
});
// Create token
// Create a Token from the existing customer on the platform's account
stripe.tokens.create(
{ customer: CUSTOMER_ID, card: CARD_ID },
{ stripe_account: CONNECTED_STRIPE_ACCOUNT_ID }, // id of the connected account
function(err, token) {
// callback
}
);
I know this question is not recent but I have come across this same problem several times in my development testing.
The problem was fixed when I did a db:reset or removed the user(customer account) and reauthorized.
It turned out I had duplicate connect accounts for the same user, for old plans and the api_key was old.
Since I was in development and testing, I also found it useful to clear the test data from Stripe, on the dashboard >business settings >data > Delete all test data
Hope that helps.
Same thing happened to me. It's somewhat deceiving because Stripe let's you connect your account directly to the same account in the Settings (where it says "test the OAuth flow"), like a single account is acting as both the platform and the connected account. However, when you attempt to actually create charges or customers on the connected account, you get the above error.
I had this problem when testing charges using Stripe Connect. It turned out that when I went through the process of connecting a test business to my app (via the Connect To Stripe test page they provide) I was also already logged into my app's Stripe account in another browser window. This ended up saving my app's account data in the place of the new "test business" which kept causing charges to fail with that error.
When I went through the same process logged out of Stripe, it worked fine and charges were processed normally.
The answer was to simply change the customer id as the customer and the card is as source.
You can find the complete source code of a working example Stripe Connect with Ionic here:
https://www.noodl.io/market/product/P201601151251248/stripe-connect-guide-with-complete-source-code-all-you-need-to-start-accepting-money-on-behalf-of-others