#karryon_code
odd sentinelBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1367272498655137813
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- karryon_code, 4 hours ago, 31 messages
woeful junco
Hey! I hope that you're doing well.
import React, { useEffect, useRef, useState } from "react";
import { loadStripe } from "@stripe/stripe-js";
import axios from "axios";
import "./Payment.css";
const stripePromise = loadStripe("pk_test_key");
const PaymentPage = () => {
const formRef = useRef();
const [stripe, setStripe] = useState(null);
const [elements, setElements] = useState(null);
const [status, setStatus] = useState("idle");
useEffect(() => {
const initStripe = async () => {
const stripe = await stripePromise;
const { data } = await axios.post("http://localhost:8100/create-payment-intent");
const elements = stripe.elements({
clientSecret: data.clientSecret,
appearance: { theme: "stripe" },
customPaymentMethods: [
{
id: "cpmt_1RJduAGOpcD47fofRwUJHF9X",
options: {
type: "static",
subtitle: "Pay with PayPal"
}
}
]
});
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");
setStripe(stripe);
setElements(elements);
};
initStripe();
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
setStatus("processing");
const result = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "http://localhost:5174/payment?success=true"
}
});
if (result.error) {
console.error(result.error.message);
setStatus("error");
}
};
return (
<div className="signnow-container">
<h2 className="signnow-title">Almost There!</h2>
<p className="payment-text">Thanks for signing the waiver. Please complete the $95 payment to reserve your seat.</p>
<form onSubmit={handleSubmit} ref={formRef} className="payment-form">
<div id="payment-element" />
<button className="payment-button" disabled={status === "processing" || !stripe || !elements}>
{status === "processing" ? "Processing..." : "Pay $95"}
</button>
{status === "error" && <p className="payment-error">Something went wrong. Try again.</p>}
</form>
</div>
);
};
export default PaymentPage;```
I can't seem to find a way to get the PayPal payment option to show.
umbral lance
HI! Is there a reason you're not using the built-in PayPal functionality? https://docs.stripe.com/payments/paypal
woeful junco
I was recommended to try this based on the previous thread
Is there any documentation to integrate the build in paypal functionality?
umbral lance
Yup, there sure is. It's described (and further linked to) in that link I provided there.
umbral lance
In theory maybe - I haven't really looked at Custom Payment Methods yet - but it likely would make more sense to use the built-in support Stripe already has for Paypal, no?
umbral lance
I suspect it would take a heck of a lot more work to build it yourself as a custom payment method, but that's just a guess.
woeful junco
Fair point, let me have a look
woeful junco
@umbral lance its because thats via payment links
Payment links take the user to a seperate tab
umbral lance
Tell me more.
woeful junco
I was aiming to keep the user on the website without redirecting them through a payment link
I thought of using an iFrame with the payment link
But i found out that it violates the rules
woeful junco
So the only way is this custom approach
I think i followed it well from the custom payments approach
umbral lance
How are you going to create the PayPal payment? Also add the PayPal API and implement all the PayPal stuff - including the redirect to PayPal's website - yourself?
woeful junco
No, so the custom payment docs: https://docs.stripe.com/payments/payment-element/custom-payment-methods
It says you can add the custom payment link
The ID its probably referencing is this one
I think it integrates it for you, atleast PayPal, but the button doesn't even show for me
Like the docs show this:
umbral lance
You're talking about two totally different things.
A Custom Payment Method lets you create a way to record payments made entirely outside Stripe, in Stripe - but you still have to do whatever else is required to actually process that payment.
woeful junco
Ohhhh
I was thinking that the custom payment method would basically add that as a payment option
Where if you set it up, the person would click next, and it takes them to the payment screen
umbral lance
Enabling PayPal for use in Checkout, Payment Element, etc just requires going through the onboarding process and enabling it as described here: https://docs.stripe.com/payments/paypal#get-started
woeful junco
So now I'm confused, if I want to incorporate PayPal as an option for people to make a purchase, they must go through a payment link?
umbral lance
What is a 'payment link'?
umbral lance
When you use the words "payment link", what are you talking about?
woeful junco
So my endgoal is to make the entire experience of purchasing this event ticket through the website, without the user having to click a link, and pay through that link, and then it redirecting them to a success url
My assumption of payment link is a link where the user would open it, pay through stripes link, and then get redirected to either a success or fail page
umbral lance
Why are you talking about Payment Links though?
(That is essentially what a Payment Link does, yes)
woeful junco
HI! Is there a reason you're not using the built-in PayPal functionality? <http...
The document here says you have to use a Payment Link
The last sentence of the paragraph
umbral lance
To accept PayPal and other payment methods without any code, use Payment Links.
woeful junco
Ah, got it, so sorry, having a rough day
So if I want to accept PayPal without a payment link, what would I do?
umbral lance
No worries at all - me too tbh.
https://docs.stripe.com/payments/paypal/paypal-button and then look at its siblings in the left-hand menu for related content.
umbral lance
Do you meet the requirements listed on https://docs.stripe.com/payments/paypal?
woeful junco
Is it only for Europe?
umbral lance
I'm totally wrong. I'm really sorry. It is only supported in Europe. Outside of Europe, you have to build it all yourself using a Custom Payment Method as a 'wrapper' to your server endpoint that handles creating the Paypal charge.
umbral lance
Haha fair. So sorry. 😦
At some point it may become available to just add 'with a flip of a switch-ish', but it isn't ready yet.
umbral lance
Are you on an Apple device with a card in the Wallet?
umbral lance
I'd need a Stripe ID associated with that screen to find out why.