Taking payments on the site

1

Does Stripe work for taking payments on Treepl sites? I have set up Stripe in Treepl and added the web form to my page, if you enter details it appears that a payment has been made but nothing is recorded on Stripe or on my credit card. (Test page - https://naturalnetwalking.co.uk/join-membership-stripe)
Does it work or is this still under development still?
Does anyone know if there is a way I can add a payment button on my website now - I need a simple form that collects a few details and then a fixed payment amount. HELP!!! I have tried a paypal button, but this does not collect the data from the form.

2

Hi @Dawn. I’ve briefly tested payments in forms again but like you I haven’t had a successful transaction.
Anyone else have payments working?

3

Ah, ok. I’ve got it now.
The form is expecting a price/value and even if you type a price in to the price field it doesn’t register for some reason.
the default setup for specifying the price is to add a custom parameter in the form component tag like:
{% component type: "form", alias: "pay_test", price: "1" %}

If you want to set different values for different situations you could pass it in the URL like:
www.mydomain.com/pay-form?price=1.5

Then in your form component:
{% component type: "form", alias: "pay_test", price: "{{request.request_url.params.price}}" %}

4

…and just figured out if you want to adjust the form price dynamically with javascript or by user input, you need to update the data-trp_price data attribute on the ‘Amount’ input field. So probably some JS required there.

5

Thank you so much Adam for taking a look.
I am afraid Javascript is still a foreign language to me. If you get it to work I would love to have some instructions and the code. In the meantime I think I might have to resort to paypal.

6

Is your form a fixed price or do users enter their own amount?

7

I’m assuming, since it’s a membership form, the price is fixed. In which case you only need to add the fixed price your form component:
{% component type: "form", alias: "pay_test", price: "39.95" %}

No JS required.

8

Thank you Aadam, I will give this a try, I am using a fixed price, so hopefully this should do the trick. You are a star for taking the time to look into this, really appreciated.

9

Hi. I’m stuck on payments. Here’s what I’ve done so far, but I’m missing something:

1 - Created a new form with the “Select Payment” option selected
2 - Hardcoded form amount and data-trp_price attribute -
2 - Added form to test page - https://dr-bills-syrup.treepl.co/test-payment
3 - When I click “submit” to pay, I enter testing card 4400 0000 0000 0077 09/19 999, then get the error message - “You did not set a valid publishable key. Call Stripe.setPublishableKey() with your publishable key.”

What am I missing?

Do I need to follow the steps here? https://stripe.com/docs/payments/checkout/client
I see that Treepl adds javascript and don’t want to duplicate anything.

10

In your Treepl CMS admin, go to Settings > Payments and insert the Stripe test publishable key and test secret key. After that then go to Content > Forms and select your payment form. Go to Edit Layout tab and have a look at the code for “paymentType”. The data-key should show the test publishable key. If not, go to the Form Builder tab, delete the Accept Payment field, save, add Accept Payment back again and save. Back on the Edit Layout tab, the paymentType should now look something like:
option value = “stripe” data-key=“pk_test_xxxxxxxxx”

Note that when you go live, you’ll need to update the keys in Settings > Payments AND in the form.

1 Like
11

Hi - I have another website that needs a payment portal and just wondered if ‘Stripe’ payment integration now works.
I tried a while back in March on a differnt website and could not get it to work.
Has anyone got any tutorials or tips or instructions on how to do this without having to write any special code or Javascript please.

12

Hi @Dawn. Yep, payments are working via Stripe.
First enter your Stripe API details in the Admin under ‘Settings’ > ‘Payments’ (as per @hopestew post above).
Then create your form with the “Accept Payment” field, but when added the form component tag to the page, be sure to add the price parameter, ie:
{% component type: "form", alias: "pay_form", price: "39.95" %}

Let us know anywhere you are getting stuck if still having issues.

13

Thank you Adam that is really helpful. I will let you know if I have any issues.
Regards
Dawn

14

THANKS SO MUCH! Just what I needed. Works perfectly :slight_smile:

15

One more question: How can I pre-populate the Stripe email field?

If I hard-code the email address into the Payment Type options with attribute - data-email="test@test.com"; the field is populated; however, if I populate it dynamically, it doesn’t work.

$(’#shoppingcartform’).submit(function() {
$(’#PaymentType’).attr(‘data-email’, $("#Email").val());
return true; // return false to cancel form action
});

16

Hi @shannonlynd. I’d guess that the Stripe JS is running before your jQuery script and so the payment form is already set up.
Perhaps try targeting the payment form email field directly?

Could you also show your code for how you hard coded the email address via the Payment Type?
I want to do this too :slight_smile:
Are you referencing any particular Stripe documentation for these options?

17

Here’s my page so far:
https://dr-bills-syrup.treepl.co/cart/shop
Once I clean it up a little, I can share as an example. It works really well except that the cart gets wiped out if you leave the page.

If I hard-code the email like this, it works:

<select id="PaymentType" name="paymentType" class="hide" >
    <option value="stripe" data-key="pk_test_vLGzYaLHKRhZ8YG7cMLHjyfo00gCp0xhjg" data-currency="USD" is_zero_decimal="1" data-image="https://dr-bills-syrup.treepl.co/_assets/img/default-logo-blue.png" data-email="shannon@dovetail.digital"> Stripe </option>
</select>

Here’s the test page that I setup with the hard-coded email address - https://dr-bills-syrup.treepl.co/test-payment

It will pass the email to Stripe, but not if I add it dynamically.

18

Cool, thanks for that.

I think the Stripe JS is setting up everything before your jQuery script runs so try adding your script in the HEAD so it might run before the inserted Stripe JS.
Not sure if it’ll work but that’s all I can think of at the moment…

19

Oh, but you can’t do this as you don’t know the email address at that time… hmmm.

20

This was very helpful - thanks both of you. I had a similar question on having the form email field populate the pop up Stripe form. Did anyone figure out a method for this? As Shannon noted, We can put it in the Option using data-email=“email goes here” but I am not strong enough evidently in Javascript to know how to dynamically populate that area from the form field #Email.

By setting a name on the option field - and setting an onblur event on the email field, I can get it to add the data attribute to the DOM in the proper place just like if I had hard coded it in. However, when I click submit, it doesn’t carry through.

<script> function dataEmail() { var formEmail = document.getElementById('Email').value; $('[name=stripeopt]').attr('data-email', formEmail); } </script>
So this makes me wonder if it is read in as page loads which would mean we have no way to dynamically pass it with front end code.