Stripe Integration using Javascript and PHP
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This job is similar to this other job (already solved): https://bountify.co/stripe-integration-using-javascript. I've worked out about 50% of the code; however, now I'm stuck. Stripe's documentation is here: https://stripe.com/docs/subscriptions/quickstart.

  • I use Stripe for subscriptions
  • I have two buttons on the page (one for monthly subscription, one for annual subscription)

For each button, I want this to happen:

Customer clicks button > popup shows Stripe checkout form > customer fills out form > customer clicks "Pay" to checkout > customer is billed inside Stripe > a subscription is created for that customer inside Stripe

  • Monthly button should charge $19 now and $19 every month
  • Annual button should charge $189 now and $189 every year
  • I've already created the corresponding plans inside Stripe

From what I understand, Javascript is used to create initial billing info and token. Then, PHP is used to create subscription in Stripe.

Here's the HTML and JS I have so far:

http://drmuscleapp.com/subscribe_stripedebug_custom_test_2016-12-09.html

On my page, this almost works. When I click the "Subscribe Annual" button, I see the $189 popup. This is expected and correct. However, when I click on "Pay $189.00", my test Stripe dashboard shows a transaction for $19 (and a subscription for our $19 plan). This is not correct and needs to be fixed.

So, at this point, my unresolved issues are:

1- Stripe shows a transaction for $19 even when the annual button is clicked and the popup shows $189.

2- Stripe creates a subscription for our $19 plan, even when the annual button is clicked.

For point 2, my previous solution was to create two forms with 2 server-side PHP scripts. This may be wrong, but here's the code anyway:

<form id="subscribe" action="https://drmuscleapp.com/create-sub-m19-test.php" method="POST">
<input type="hidden" id="stripeToken" name="stripeToken"/>
<input type="hidden" id="stripeEmail" name="stripeEmail"/>
</form>

<input class="button orange" type="button" id="monthly19" value="Subscribe Monthly">

<form id="subscribe" action="https://drmuscleapp.com/create-sub-a189-test.php" method="POST">
<input type="hidden" id="stripeToken" name="stripeToken"/>
<input type="hidden" id="stripeEmail" name="stripeEmail"/>
</form>

<input class="button orange" type="button" id="annual189" value="Subscribe Annual">

PHP code for these 2 files is here:

https://docs.google.com/document/d/11qbNgp84s1OEmJ54APPvqU6--4I70sNZtMuBRTFM4uQ/edit?usp=sharing

Thank you very much for your help.

awarded to iamkdev
Tags
stripe

Crowdsource coding tasks.

1 Solution

Winning solution

I think you hard coded the plan to 'plan' => 'monthly19'
Therefore it taking that only. You have to set the value depending which button user click. Set a hidden field.

$customer = \Stripe\Customer::create(array(
 'email' => $_POST['stripeEmail'],
 'source'  => $_POST['stripeToken'],
 'plan' => 'monthly19' // change to something $_POST['plan'] , which will contain either monthly19 or anual189

));

OK. I've edited my PHP file to include $_POST['plan']. I've also added a hidden field to my form, like so: <form id="subscribe" action="https://drmuscleapp.com/create-sub-m19-test.php" method="POST"> <input type="hidden" id="stripeToken" name="stripeToken"/> <input type="hidden" id="stripeEmail" name="stripeEmail"/> <input type="hidden" id="plan" name="plan" name="plan"/> </form> Now, how do I set the value of field "plan" depending on which button the user clicks?
EtienneJ 1 year ago
Best I've came up with is to add this line of JS: $("#plan").val(annual189); But it's not working. Please see updated http://drmuscleapp.com/subscribe_stripedebug_custom_test_2016-12-09.html
EtienneJ 1 year ago
Try this $("#plan").val('annual189');
iamkdev 1 year ago
This worked! Thank you.
EtienneJ 1 year ago
I've posted a follow-up question here: https://bountify.co/pre-populating-an-email-address-in-stripe
EtienneJ 1 year ago