Creating a buy now button with the button builder on the paypal website only allows you to create a button that will send the user to the paypal website for checking out with paypal.
I'm using the nodejs SDK to directly accept credit cards and prevent the user from having to leave my website in order to complete the payment. My question is how can I create a paypal button that calls the appropriate function in my application when the button is clicked instead of taking the user to a paypal payment page?
I'm assuming that when the payment button is clicked it ought to trigger a function in my application that creates the payment using the nodejs paypal rest-SDK module instead of sending the user to the paypal website.
The problem is that I could create any old button, but to comply with paypal's developer agreement it seems you have to use their buttons. The only solution I've thought of is to download one of their button image files from their website. This image could then be used to make a button that calls the appropriate function. Would this be okay?
For Direct Credit Card integrations, you do not have to use a PayPal button as your customers do not even need to know PayPal is involved. Typically, you would build a form to collect the customer and credit card data then post that to a script on the back end to map those variables to the correct SDK fields and submit the payment.
Related
I'm building a platform for selling video courses using React and Next.js.
My goal is to create a payment form that unauthenticated users can use. I want it to work the way it works on Gumroad - a user opens a modal where they can enter their email, their credit card info, and click "Pay" (see the image). When the user submits this form, I want to create an account for them behind the scenes and process the payment at the same time, and then redirect them to the already purchased course, with them being already logged in to their account. That way the UX is much nicer, and conversions are higher - I don't have to require users to create an account before purchasing the course, to them it all looks like one step.
The problem is that to handle payments, I'm using <PaymentElement />. In order to display this form on my website, I am required to create a Payment Intent first. In order to create a Payment Intent, I have to pass it stripeCustomerId (so that I could save the payment method the user has used), as well as userId (so that, in my webhooks, after the payment succeeds, I could add the course to the list of the courses the user has purchased). And that means that in order for me to display the checkout form, the user has to already have an account and be authenticated.
Can you give me some advice? What can I do, is there a solution or a workaround to this?
What I need is:
Show the user a form where they can enter their email address and credit card info.
When the user clicks "pay", create an account for them (which has userId and stripeCustomerId).
After that, use this information to process the payment.
You can update the Payment Intent's customer after the Payment Intent is created and/or confirmed. That means the flow would look something like this:
Create a Payment Intent
Display the payment page with the Payment Element
When payment successfully completes create a Customer and update the Payment Intent's customer with the Customer ID
Normally, to add a new card information, we should follow that order
Create a new customer on Stripe (using email, first name, lastname, phone, zipcode, etc)
Create a setup intent, get a client secret
Confirm card setup with the client secret (when adding card info)
The payment process comes after with that card info. You can make that new card as default if you want.
Create a guest user first
Create a payment intent using guest user credentials
Display Stripe form on the client
Whenever the user submits the form on the client, update the payment intent with the customer id first then confirm the payment.
I am currently using paypal-rest-sdk and want to accept payment using the cards.
In both sdk's (paypal rest and paypal checkout), when I create an order, in response there is an approve URL:
{
"href":"https://www.sandbox.paypal.com/checkoutnowtoken=token",
"rel":"approve",
"method":"GET"
}
Which will take you to this page:
The payment with PayPal account (logging in) is working, it correctly redirects to the return URL.
However, the "Pay with Credit or Debit card" option is not working.
After filling the card information when I click on continue button a loading screen appears and nothing happens after that.
I have seen solutions using PayPal smart-buttons, but can it work using "Pay with Credit or Debit card" option?
What do you mean by "paypal-rest-sdk" ? The PayPal-Node-SDK is deprecated, do not use it for anything. Use the current Checkout-NodeJS-SDK.
Follow the Set up standard payments guide and make 2 routes on your server, one for 'Create Order' and one for 'Capture Order', documented here. Both routes should return only JSON data (no HTML or text). Inside the 2nd route, when the capture API is successful you should store its resulting payment details in your database (particularly purchase_units[0].payments.captures[0].id, which is the PayPal transaction ID) and perform any necessary business logic (such as sending confirmation emails or reserving product) immediately before forwarding your return JSON to the frontend caller.
Pair those 2 routes with the frontend approval flow: https://developer.paypal.com/demo/checkout/#/pattern/server
I'm new to Square and want to implement it in a React Native app with a Node backend.
I see that there is a method to save the customer's card details.
https://github.com/square/square-nodejs-sdk/blob/master/src/api/customersApi.ts#L230
But there is also the payment form?
https://developer.squareup.com/docs/payment-form/how-it-works
Firstly, I cannot see if the payment form is even available in React Native - information seems very scarce.
Secondly, even if I do implement that form, I can't see a way to connect it to the customers API endpoint.
I don't want to use in-app payments (i.e. google or apple pay). I want to be able to save card details like Amazon does, and use them whenever a user places an order in app (probably triggered by a node process). I'm not sure if I'm going about this the correct way, guidance would be appreciated.
In-App Payments SDK will be the way to go (and there is a React Native plugin already). The In-App Payments SDK is basically a mobile Square Payment Form, that you linked to. It will generate a secure nonce, and you can use the nonce to save the card on file. The next time the customer comes, instead of bringing up In-App Payments, you can simply call CreatePayment in your backend, with the customer_id and the customer_card_id as the source.
As for "connecting it to the Customers API" - you don't connect it directly per se. You would collect information from the customer, on your own, and pass it directly to the Customers API to create a customer. You can then call CreateCustomerCard using the nonce (generated by In-App Payments), and the customer_id that you just created, to save the card to this customer profile.
So far I've created a product modal and upon proceeding to checkout, Stripe popup appears and the user can proceed with the payment.
https://streamable.com/30p4eh
Although, I have to change the checkout button to popup a checkout page first so the user can enter his delivery address and so on. How does a checkout page deliver the information the user has input, into Stripe? How does the whole process work? Do I have to add all my products into Stripe product page? Can Stripes checkout page be used like in this Firebase video? Firebase
The Checkout payments guide now includes a nice diagram that I think should help understand what you're asking about.
You create a Checkout Session with the payment information and then redirect your customer to Stripe. Stripe displays the information about the purchase and collects payment information from your customer, then redirects them back to the URL you specify. In the background, you're notified about the success of the payment and you can manage order fulfillment.
If you need more information about a particular piece of this, please feel free to ask with more details!
Update: on a second review, I see that I missed that your video is showing the Legacy Checkout integration. Stripe has a new Checkout integration that supports a wide range of payment methods and supports SCA-compliant authentication challenges. Take a look at the migration guide to update your integration.
Is there any way to integrate PayPal without redirecting user to PayPal's website for payment in case of debit cards or PayPal payment type ?
Yes you can, it is explained by Paypal here : https://developer.paypal.com/docs/classic/adaptive-payments/ht_ap-embeddedPayment-curl-etc/
There are paypal products available in some countries with this functionalisty. I heard that Payflow Pro and Paypal Payments Advanced have such functionality.
But actually from my developer experience, if Stripe platform is avaialble for country where your project is hosted, then better to use Stripe Elements - they found a way to securely place fancy controls to get CC info in a way your website can get just either a token or a payment method object, without redirects, and if necessary, show a popup with 3D secure window during payment flow.