This entry is part 3 of 9 in the Integrating Stripe.com with WordPress Series
- Stripe Integration Part 1 – Building the Settings and a Simple Payment Form
- Stripe Integration Part 2 – Recurring Payments
- Stripe Integration Part 3 – Variable Prices and Enhanced Plan Handling
- Stripe Integration Part 4 – Multiple Recurring Payment Options
- Stripe Integration Part 5 – Accepting Discount Codes
- Stripe Integration Part 6 – Payment Receipts
- Stripe Integration Part 7 – Creating and Storing Customers
- Stripe Integration Part 8 – Working with Invoices
- Stripe Integration Part 9 – The Stripe Button
At this point in the series, we have a payment form that allows for users to submit a one-time or recurring payment, but it’s not very flexible. The payment amount is currently hard coded into our plugin, which makes almost useless for people that want to have multiple payment forms for different amounts. In this part of the series, we are going to look into expanding this a little bit to allow a price to be defined by an attribute in the short code. We are also going to add an option to our settings page that will allow you define the Stripe plan ID for recurring payments.
When finished, we will be able to do this:
[payment_form amount=20]
The first thing we need to do is modify our short code function to allow a parameter that will act as the payment amount. Open includes/shortcodes.php and replace its contents with this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | function pippin_stripe_payment_form($atts, $content = null) {
extract( shortcode_atts( array(
'amount' => ''
), $atts ) );
global $stripe_options;
if(isset($_GET['payment']) && $_GET['payment'] == 'paid') {
echo '<p class="success">' . __('Thank you for your payment.', 'pippin_stripe') . '</p>';
} else { ?>
<h2><?php _e('Submit a payment of $10', 'pippin_stripe'); ?></h2>
<form action="" method="POST" id="stripe-payment-form">
<div class="form-row">
<label><?php _e('Card Number', 'pippin_stripe'); ?></label>
<input type="text" size="20" autocomplete="off" class="card-number"/>
</div>
<div class="form-row">
<label><?php _e('CVC', 'pippin_stripe'); ?></label>
<input type="text" size="4" autocomplete="off" class="card-cvc"/>
</div>
<div class="form-row">
<label><?php _e('Expiration (MM/YYYY)', 'pippin_stripe'); ?></label>
<input type="text" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year"/>
</div>
<?php if(isset($stripe_options['recurring'])) { ?>
<div class="form-row">
<label><?php _e('Payment Type:', 'pippin_stripe'); ?></label>
<input type="radio" name="recurring" value="no" checked="checked"/><span><?php _e('One time payment', 'pippin_stripe'); ?></span>
<input type="radio" name="recurring" value="yes"/><span><?php _e('Recurring monthly payment', 'pippin_stripe'); ?></span>
</div>
<?php } ?>
<input type="hidden" name="action" value="stripe"/>
<input type="hidden" name="redirect" value="<?php echo get_permalink(); ?>"/>
<input type="hidden" name="amount" value="<?php echo base64_encode($amount); ?>"/>
<input type="hidden" name="stripe_nonce" value="<?php echo wp_create_nonce('stripe-nonce'); ?>"/>
<button type="submit" id="stripe-submit"><?php _e('Submit Payment', 'pippin_stripe'); ?></button>
</form>
<div class="payment-errors"></div>
<?php
}
}
add_shortcode('payment_form', 'pippin_stripe_payment_form'); |
First note that our function now accepts two parameters:
$atts, $content = null
This is the standard for short codes that have attributes. We will be defining our price with this amount=XX, where XX stands for the price is US dollars. We use the extract() function to get the price value, like this:
1 2 3 | extract( shortcode_atts( array( 'amount' => '' ), $atts ) ); |
The amount will now be stored in a variable named $amount, which means we can output it in a hidden form element like this:
1 | <input type="hidden" name="amount" value="<?php echo base64_encode($amount); ?>"/> |
Notice that we are not just echoing $amount into the value of the form input, instead we are echoing it after we encode it with base64_encode(). This is just a security measure that we use so that it’s harder for someone to change the price before submitting the form.
We now need to open includes/process-payment.php. Place this around line 11, just after the require_once():
1 | $amount = base64_decode($_POST['amount']) * 100; |
This will decode our payment amount and convert it to cents, which is required by Stripe. And now we need to replace the ‘amount’ variable in our Stripe_Charge function to reflect our new variable:
1 2 3 4 5 6 | $charge = Stripe_Charge::create(array( 'amount' => $amount, // amount in cents 'currency' => 'usd', 'card' => $token ) ); |
That’s it! Our form now accepts a variable price. Note, however, that this price only reflects one time payments. It does not effect recurring payments, and that’s because those must be created in Stripe before hand. To make that part of the plugin a little better, we will now add a new option to our Stripe Settings page where we can define the plan ID that we have created in Stripe.
Open includes/settings.php and add this to the bottom of the settings area:
1 2 3 4 5 6 7 8 9 10 | <tr valign="top"> <th scope="row" valign="top"> <?php _e('Plan ID', 'pippin_stripe'); ?> </th> <td> <input id="stripe_settings[plan_id]" name="stripe_settings[plan_id]" class="regular-text" type="text" value="<?php echo $stripe_options['plan_id']; ?>"/> <label class="description" for="stripe_settings[plan_id]"><?php _e('Enter the ID of the recurring plan you have created in Stripe', 'pippin_stripe'); ?></label> </td> </tr> |
Your settings should now look like this:
We now need to replace “your_stripe_plan_id” in process-payment.php with our option. To do that, update the Stripe_Customer call to this:
1 2 3 4 5 | $customer = Stripe_Customer::create(array( 'card' => $token, 'plan' => $stripe_options['plan_id'] ) ); |
The complete code for part three can be download below.
[download id=”41″ format=”1″]
Awesome! Just what I was looking for. Thanks!!
I was also looking to have the plan be variable as well so that the plugin could be used for different payment options. For example, I wanted to have a couple different levels of monthly subscription plans.
I used your example of how you made the prices variable and made the plan variable. Now I can use this shortcode to define the price and plan:
[payment-form amount=X planid=X) //Replace X with the appropriate variable.
I’m not much of a programmer, so it may not be the best but here is what I did:
In /shorcodes.php
Add this code just above: global $stripe_options;
extract( shortcode_atts( array(
‘planid’ => ”
), $atts ) );
Near the bottom, with the hidden inputs add:
<input type="hidden" name="planid" value="”/>
In /process-payment.php
Change to this:
$customer = Stripe_Customer::create(array(
‘card’ => $token,
‘plan’ => $planid
The only other thing that needs to done is create the plans in your Stripe dashboard.
One other thing: The line in shortcodes still heads the form with “Submit a payment of $10”. I changed that to “Submit a payment’ and then enter text to identify the plan and payment in the post title or the area above the shortcode.
How this is useful. Thanks for all your work on this plugin.
Now if Stripe would only add a Quarterly option in their recurring payment……
Fantastic! Thanks for adding all of this. One thing you need to make sure is that you have both “planid” and “amount” in your short code extract() function.
I’ve been hoping for quarterly payments from Stripe for a long time now. According to support, it is not likely to happen soon, unfortunately.
Yeah, I wasn’t sure how to add both shortcodes in the same extract () function. It worked doing two separate ones. What is the proper way?
Supposedly, you can create a quarterly payment by doing a $0 recurring payment and then setting up an invoice that creates and charges every three months. Apparently, the invoice will charge automatically. I’m trying to learn how to do this and maybe it can be integrated into the plugin somehow.
This is how you want to do it:
Yeah, they told me that as well, but it seems kind of messy.
**Disclaimer: Limited Programming Skills**
I love this tutorial, and it provides excellent step by step instructions. I am implementing this into our business model as a means to introduce a recurring monthly massage maintenance plan. It is my goal to have this form be for administrative use only, and not open to outside customers. I really like the inclusion of the variable plan_id into the shortcode for the charge form. My question is, is it easy or possible to have a selection list of plan_id that drive the variable cost so I only have to use one form. So the process would be:
Enter Name
Enter Card Information
Select Plan and Pricing
As I understand it now, it looks as though I would have to build separate forms for each of the different monthly subscription variations that I have. Reason I am looking to develop this into my wordpress site, is I have 3 employees that will need to have access to make charges, however I do not wish to grant them the access to the strip.com account.
Sorry for the long question/post, any way to incorporate a Name for the card we are entering?
That is absolutely possible. What you would need to do is build a drop down that automatically populates the options with plans pulled from Stripe. I think this sounds like a great idea for part 4 🙂
I just wanted to say that this plug-in was/is extremely useful. Not to mention the excellent tutorial to go along with it. I am a WordPress and Stripe newby, but this jump started my project in the matter of a few hours.
I’ll need to incorporate some extra fields(name, address, etc.) and set the plan type according to the option my user selects on a previous page no the current drop down. But that is small potatoes compared to what you’ve got going here.
My payday will be your payday too.(donation-wise I mean)
Cheers Pippin.
Double post, sorry.
I intended to have my comment on part 4 of the tutorial.
Feel free to appropriately moderate me!
Ha, no worries. There will be more parts to this series, so it’s not complete yet 😉
This is an EXCELLENT tutorial series, thank you so much!
I am interested in what Stripe calls METERED BILLING — so the amount charged to a customer each month can vary. It seems to be based on setting up Invoices and Invoice Items, to be added to the base amount of the Subscription. (It can be a negative amount, too.)
But i’m unclear how my site (on WordPress) would trigger these invoice-item api calls. I assume it’d need either cron, or a manual click by the site admin. But wouldn’t i need to send a separate api call for each customer? This sounds like re-building the recurring-billing engine in wp. I must be missing something here. If you have any experience with that, i’d love to learn more. Thanks!
Can you describe the exact billing types you need? I believe what you’re going to want to do is setup a recurring payment and then alter it by adding invoice items to the customer. Each time you add an invoice item, the next payment the subscriber makes will reflect that invoice item. The next payment after the invoice was paid will revert back to the normal amount.
I also am looking for metered billing. Yes, you described pretty close to what we need. We want to add a line item to an ongoing invoice that clears automatically at the next payment cycle.
Our usage is: They sign up for our service to pay a fix rate for phone leads. At the end of the month, I’ll calculate how many calls they got and add that to their next invoice.
Is this an existing feature? If not, do you know where I could find something like this?
I’m trying to create a form that allows for a recurring monthly donation at an amount set by the user. On the one hand, this seems like Stripe doesn’t support it. I would have to offer a limited set of defined options instead of allowing the user to define the amount. On the other hand, I saw this post on the Stripe support page that seems to suggest what I want is possible.
https://support.stripe.com/questions/recurring-billing-for-online-donations
What do you make of it?
Michael, it is possible, but it’s pretty tricky. Basically what you need to do is dynamically create a plan in Stripe for the donation amount each time a donation is submitted. Are you comfortable enough with PHP to do that?
Not really, no. If you happen to make this the next part of your tutorial, I would be grateful.
Also, I want to offer “suggested” monthly donations as well as the monthly donation of your choice, would the user-generated plans show up in the pre-populated list each time one is generated?
I will definitely consider it for an additional part to the series.
All plans would show up in the list, regardless of how they were created.
Did you manage to look any further into this – it would be an AMAZING support for charities! (surprised stripe haven’t made an ability for it…)
One idea i’ve seen is to create a $1/£1 plan then the amount the user has set just times that plan (user enters ’34’ this then x $1 plan), just makes stuff like $34.50 awkward!
ANY help would be phenomenal, thank you!
No, sorry, I have not.
I am looking for a system which stores the customers credit cards and then the customer gets a invoice (variable amount- may be diff amount every month) at the end of the month – and if no changes requested within 5 days the card is charged at on the 5th of every month
Is this possible in stripe even with a third party plugin?
Hi,
Great plugin just what I was looking for.
Is there a way to let customers enter there own payment amount?
That would be the one feature that I really need.
Keep up the great work!
Regards.
Not that is shown in this tutorial series but it’s certainly possible! You will just need to populate the amount from an input field instead of from the shortcode parameters.
Hi Pippin!
It’s possible to integrate this code with AffiliateWP and Recurring Referrals add on?
The stripe webhooks can be pointed to AffiliateWP in order to registers the recurring charges?
Thanks!
It is certainly possible but will require a large amount of custom development.
Hi
Its only working if i am passing static value to amount here :
extract( shortcode_atts( array(
‘amount’ => ”
), $atts ) );
but if i am passing a variable, the Payment Fails.
Can i pass a variable to
extract( shortcode_atts( array(
‘amount’ => ”
), $atts ) );
like :
extract( shortcode_atts( array(
‘amount’ => $amt
), $atts ) );
Yes you can pass a variable.
But its not working when i am passing a variable, although the correct value is there in the variable but its working when i pass a static value as amount.
Also whats started to happen now is even if i am passing a static value, the payment fails for this first time and i again enter the card details etc. and submit and it works. so payment is being paid successfully in second time in case of static value.
The amount is coming from another form and then the payment form is appearing in my site.
Please help.
I’ll need to see an example of how you’re doing it in order to help diagnose why it’s not working for you.