I’m trying to set up a payment with Stripe, and I must be misunderstanding a step in the documentation. The problem I’m seeing seems a lot like the one described in an Oct 2023 message — but they worked around the problem by embedding code instead of getting the button to work. I’ll try that route if I have to, but first I want to find out for sure that I can’t get the button to work.
I have a Stripe account already. On a different website, I’m using Snipcart as my shopping cart and Stripe handles the payments. But I don’t need a shopping cart for this site — I’m going to register men to come to a retreat and they’re going to sign up and pay for one of the four options. I created a new account for this website, and it’s connected to a different bank account,
-
I created four products in Stripe with different names and prices. And I can see their Product IDs. I also created a fifth product with a $0 cost that I can use to test.
-
I’ve added a Stripe button for each product on my Sparkle page. The payment is a Stripe Payment Button. The button label is Buy. The product is Product. For the Price ID, I’m using the Product ID for the item I created in Stripe. Is that the correct value for the Price ID? I have a Blue theme, and I’ve identified a Checkout Success and Checkout Cancellation page.
-
When I press the Configure button for the payment button, it takes me to the Payment settings. I don’t know if I’m using the correct key. On the Stripe site, on the API page, I see two keys: a publishable key and a secret key. (I don’t remember what the secret key is used for anymore.) I copied the publishable key to the Payment settings for Stripe. I also confirmed that the publishable key for my new account is not the same as the publishable key for my existing account.
-
On the Stripe site, I’ve enabled client-only integration. I entered the site that is hosting the page and saved it. I listed both www.hinkles.us and hinkles.us.
-
I’ve published the page.
-
I navigate to the purchase page. I can see the Buy button, and I press it. And nothing happens.
The step I’m really uncertain about is if I’m using the correct key. All of the other steps seem correct, but maybe I’m misunderstanding one of those steps.
Chuck
I read the page again in the documentation about setting up Stripe, and it confirms that I used the correct API key in the Payment settings,
Is the Stripe button currently working for anyone? I’m using Sparkle 5.5.3. (And I’m licensed for 4.x. – could that cause it to fail?)
I’m inspecting the buttons that are on the published page. Why does the button say Event = $0. Why don’t I see the PriceID anywhere when I inspect the button properties?
I’m looking at the Event log in Stripe.
I see a bunch of errors corresponding to pressing buttons on my page. So it looks to me that the event is being sent to Stripe, but Stripe didn’t know what to do with the event.
And I also see an error message in the details for each log entry that a resource is missing. And the plan that it says is missing matches the PriceID that the button sends to it.
So now I suspect that there’s a step in Stripe that’s left out, but I don’t know what it is yet.
I’m sorry @chuckbo I don’t have enough knowledge or experience on this topic…
If no one else chimes in it might be best to direct your concerns towards @duncan at feedback@sparkleapp.com explaining the situation with your screenshots.
Well, I thought I had found the answer, and I was going to add one last reply to share what I’d learned.
It’s not enough to create products with prices in stripe and then put the productID in Sparkle. There’s a step in Stripe to create a payment link for each product that gives details about the payment of the product: what payments are accepted, if tax is included, … things like that. So I created a payment link for each productID and was excited to reload the page and press the Buy button. But still nothing happens.
Thanks for the suggestion to write to Duncan. My next step is to contact Stripe and find out if there’s another step on their end that I don’t know about. It seems to me that I have the Sparkle side correct but I’ve left out something on the Stripe side. I promise to post whatever I end up learning.
Thanks, and I think it would be fantastic if you let us know how you resolve it in the end!
Good Luck! 
Just got done talking with Stripe support, and we found what I was doing wrong. I never would’ve found it without his help; it’s buried. I’ll describe it more tomorrow — it’s after 1 AM here. But the basic thing is that we set up Products with ProductIDs in Stripe, and the button refers to the Product, and I assumed that the label in the properties called Price ID was a mistake. I never saw any reference to a Price ID and put the Product ID there. But Sparkle really does expect you to put the Price ID there.
Now I know how to set up Sparkle to work with Stripe. What made this very difficult is that the error message I was getting on Stripe was about an invalid Plan (which is a term that doesn’t appear anywhere) when what they meant was that it was an invalid PriceID. And the PriceID is an item that’s buried and not easy to find and use.
Here are the details to solve this and get your Stripe to work with Sparkle.
- Set up your Stripe account and link it to your bank account.
- Define products in Stripe.
- For each product, you have to create a Payment Link.
- In Sparkle, add payment buttons to your page and identify them as Stripe buttons.
- For each button, enter the PriceID – this is not intuitively easy to find. (Maybe they will make this easier by the time someone else needs to use this thread)
a) In Stripe, go to the Product catalog and select the product for the button that you just created.
b) At the bottom of the page, you will see a heading called Events. You will see an entry that looks like this: A new price called price_1PfwB0HblrxTLGlq7RJaorjP was created. That’s the PriceID. Of course that’s a long ID and you don’t want to type it, but it’s a link, and you can’t just select the priceID and copy it.
c) Click on the line that contains the PriceID. That will open a page with all of the details for that event (the Price.Created event). One of the properties is the id. That ID is what you want, but it’s a link, and you can’t highlight just the ID and copy it.
d) Click on the priceID property. That opens a page which shows the properties for the price for that product. In the upper right-hand portion of the page, immediately above the Edit button, is the PriceID.
e) Click on the PriceID, and it will copy it into your clipboard.
f) Go back to the Stripe button in Sparkle and paste that PriceID into the field labeled Price ID.
- Copy the Publishable Key from the Stripe API Key Settings page to the Stripe key in Sparkle on the Payment Setting screen. You can get to this page by selecting the Configure button in the button properties.
- In the Stripe checkout settings, turn on the client-only checkout.
3 Likes
Thank you for sharing your solution @chuckbo 
