Stripe Integration Part 9 – The Stripe Button

In part 9 of this Stripe.com + WordPress tutorial series, we are going to look at using the Stripe button for accepting payments through our website. The Stripe checkout button creates a really slick, secure popup window that the customer enters their payment details into.

Adding the Stripe button is really pretty simple. All we will do is create a new short code called [stripe_button] that will display the “Pay With Card” button. Our payment will be processed by the same function that we have used for the rest of this series.

Once complete, the button and payment form looks like this:

In our includes/shortcodes.php file, we will create a new short code:

1
2
3
4
5
6
7
8
9
10
11

function pippin_stripe_button_shortcode( $atts, $content = null ) {
 
	extract( shortcode_atts( array(
		'amount' => '',
		'desc'   => get_bloginfo( 'description' )
	), $atts ) );
 
	// html will go here
 
}
add_shortcode( 'stripe_button', 'pippin_stripe_button_shortcode' );

This short code functions very much like the [payment_form] short code. It has a parameter for amount and one for desc(ription). When used, the short code looks like this:

[stripe_button amount="20"]

or this

[stripe_button amount="20" desc="Make Payment of $20 to Pippin Williamson"]

In order to create a token (which is then used for creating the charge in Stripe), we need our publishable key, so we set that up at the top of our short code, just as we have done before:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function pippin_stripe_button_shortcode( $atts, $content = null ) {
 
	extract( shortcode_atts( array(
		'amount' => '',
		'desc'   => get_bloginfo( 'description' )
	), $atts ) );
 
	global $stripe_options;
 
	if( isset( $stripe_options['test_mode'] ) && $stripe_options['test_mode'] ) {
		$publishable = trim( $stripe_options['test_publishable_key'] );
	} else {
		$publishable = trim( $stripe_options['live_publishable_key'] );
	}
 
	ob_start();
 
	// payment form is here
 
	return ob_get_clean();
}
add_shortcode( 'stripe_button', 'pippin_stripe_button_shortcode' );

Note the use of the trim() function. This ensures that there is no extraneous white space around our publishable key.

The Stripe button / popup itself is created with a script tag provided by Stripe, and it looks like this:

1
2
3
4
5
6

<script
  src="http://checkout.stripe.com/v2/checkout.js" class="stripe-button"
  data-key="publishable key here"
  data-name="site name here"
  data-description="payment description here">
</script>

This script tag needs to be placed inside of a form tag, so our final short code looks like 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

function pippin_stripe_button_shortcode( $atts, $content = null ) {
 
	extract( shortcode_atts( array(
		'amount' => '',
		'desc'   => get_bloginfo( 'description' )
	), $atts ) );
 
	global $stripe_options;
 
	if( isset( $stripe_options['test_mode'] ) && $stripe_options['test_mode'] ) {
		$publishable = trim( $stripe_options['test_publishable_key'] );
	} else {
		$publishable = trim( $stripe_options['live_publishable_key'] );
	}
 
	ob_start();
 
	if(isset($_GET['payment']) && $_GET['payment'] == 'paid') {
		echo '<p class="success">' . __('Thank you for your payment.', 'pippin_stripe') . '</p>';
	} else { ?>
		<form action="" method="POST" id="stripe-button-form">
			<script
			  src="http://checkout.stripe.com/v2/checkout.js" class="stripe-button"
			  data-key="<?php echo $publishable; ?>"
			  data-name="<?php bloginfo( 'name' ); ?>"
			  data-description="<?php echo esc_attr( $desc ); ?>">
			</script>
			<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'); ?>"/>
		</form>
		<?php
	}
	return ob_get_clean();
}
add_shortcode( 'stripe_button', 'pippin_stripe_button_shortcode' );

The hidden input fields I have added at the same ones that we used in the [payment_form] short code and are used by our payment processing function.

Our short code is finished, but there is one more change we need to make. In our [payment_form] short code, there is a field for the customer to enter their email, but the Stripe button does not provide one, so we need to tweak our payment processing function to make sure it doesn’t error out if no email is provided. To do that, we change line 83 of includes/process-payment.php from

'email' => strip_tags( trim( $_POST['email'] ) )

to

'email' => isset( $_POST['email'] ) ? strip_tags( trim( $_POST['email'] ) ) : null,

And that’s it! Your Stripe button payment form is now fully functional!

Download the complete source code for the plugin up to this point below.

[download id=”52″ format=”1″]

85 thoughts so far

Have your say

  1. FlashBuddy

    I fell in love with stripe the minute I activated your plugin and created my account, thanks!

    I may have bit off more than I can chew; volunteered to build a donation website for a dialysis patient. I thought Stripe would be the perfect solution to allow visitors to donate with a credit card:

    http://batibasaga.com/donate-now/

    Using shortcodes: [stripe_button amount=”20″ desc=”Make Payment of $20 to Kayla Batisaga”]

    What I overlooked was presenting an input for a use selectable donation amount, or at least a drop down for the pre-configured amounts. The way it stands now, when a user submits a payment, the response appears below each of the amount line items, as though they were just charged for each and every amount available!

    I need counseling and advice on how to proceed?

    • Pippin

      Great!

  2. Mahbub Rony

    WOW. Just great. Thanks a lot. I love it.

  3. Farshad Ghazaei

    There is a bug in your code, when using different credit cards, the POST for “tokens” gets updated with new credit card info but the POST for “charges” doesn’t use the latest token and only uses the initial token received for the first card.

    • Pippin

      What do you mean when using “different credit cards”?

  4. Jason Ostrander

    Is there a place I can download this plugin with all the features you have covered?

    • Pippin

      Yes, the last part (up to now) of the series is the complete plugin. I just keep adding to it.

  5. Helms

    Can you add subscription plans, email address, and discount codes to the stripe button?

    • Pippin

      Yes, you can add anything you want.

  6. Adam

    How do you factor in Stripe Connect into this? I want to add a $2.00 charge every time there is a purchase using my stripe account for my clients.

    • Pippin

      Are the purchasing being processed through Stripe as well?

    • Pippin

      Sorry but no, I don’t do custom work.

  7. John Smith

    Hi pippin,
    Can i add fields to the form which appears when i click on stripe button?
    I need to add plan and discount fields there.

    • Pippin

      Yes you can! Check out the Stripe API docs as they have some further examples.

  8. Anthony

    Hey Sir! Like, Adam above, I would love to see a tutorial on how we could integrate Stripe Connect into the mix. Do you think you could go over that? Or do you have any plans to release a premium plugin with this functionality? I will buy in a heartbeat. Thanks!

    • Pippin

      It’s on my list!

  9. Ahni

    Hello there. First, I’d just like to say thanks for putting this plugin together. I’m just wondering if it’s ok to use it (specifically, the payment form and the stripe button) on the donation page of my website without an SSL certificate?

    • Pippin

      IF you use the Strip Button (as shown in this part of the series), no SSL certificate is needed.

    • James Wagoner

      You don’t even need an SSL if you are using the js sdk to create your card token. For conversion rate’s sake (someone donating on your site is a conversion), you want to have an SSL regardless for user piece of mind.

    • Ahni

      @Pippin Thanks!

      @James I’m not too sure what the js sdk is, I’m just straight up using the “[payment_form]” and “[stripe_button]” shortcodes Pippin has so kindly provided us. I hear you about the piece of mind; I would actually feel better about it too.

    • Pippin

      If you’re using my short codes, then you are using the JS SDK 🙂

    • Ahni

      Yay! 😀 thanks Pippin

  10. suresh

    Hi,

    Stripe payment is working fine in systems but when i open the website using ipad or mobile and click the payment button the stripe popup is not working and it is opening in new window.

    Is this possible to remove popup and use custom credit card form page page and verify the status like normal credit card integration.

    http://projects.teamtweaks.com/ghfinest/ we integrated stripe payment in that link.

    • Pippin

      Yes you can use a custom credit card form. Take a look at the previous parts of this tutorial series.

  11. chrismccoy

    the download link is 404, just a headsup

    • Pippin

      Try now.

  12. Dee

    Just tried using it but I keep getting the error msg:
    Cannot charge a customer that has no active card

    I am using download and shortcode from above and test cc# from tutorial 1.

    Am I missing a step?

    Thanks

    • Pippin

      Sounds like you might a javascript error. Can you show me a live URL?

  13. Ishan

    Hello Pippin,

    Hats off to your work. The plugin is simply the best I’ve encountered while using Stripe. I am presently working on a site that requires the user to upload a document before making the payment so the same is to be put inside the form. Also the same document is either to be mailed to admin or stored in the db. Can, you please help me with it as I am a newbie to this. I tried editing the shortcode . php but somehow didn’t achieve the expected result.

    Regards,

    Ishan

    • Pippin

      I’m sorry but that goes beyond what I can help you with.

  14. Adrian

    Hi,
    Love your tutorials. As previous commenters mentioned will you have a tutorial on how you can integrate Stripe Connect with Stripe Payment button?

    There is a WP Stripe Connect plugin available: for http://codecanyon.net/item/stripe-connect-for-wordpress/5295475

    “Stripe Connect Plugin allows you to authenticate stripe users and allows you to collect a stripe token that can then be used to process payments on behalf of your users. This allow you to add an application fee for every transaction they process.”

    Thing is how can different users on your WP site create their own Stripe buttons for products they want to sell where you are processing payments on their behalf. They are connected to your Stripe account through Stripe Connect and would be creating their own Stripe Buy buttons.

    Any solution to this?

    Thank you!

    • Pippin

      I’m hoping to write a tutorial on Stripe connect sometime soon.

  15. Ishan

    Hey Pippin,

    Sorry for taking your valuable time but can you please tell me the procedure for following: adding a file attachment field to form and sending this attachment as mail to admin on successful payment.

    I added the field to form in shortcodes.php tried editing process-payment.php but the mail part doesnt seem to work. I feel i am missing something.

    Thanks,

    Ishan

    • Pippin

      No, I’m sorry but that goes far beyond what I can help with. You should consider hiring someone to do it for you.

  16. Frederic Havez

    When using Live key, I get the following error:
    exception ‘Stripe_InvalidRequestError’ with message ‘No such customer: cus_2sjuK3cL39PWc1’ in /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php:66 Stack trace: #0 /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php(114): Stripe_ApiRequestor->handleApiError(‘{? “error”: {?…’, 400, Array) #1 /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php(54): Stripe_ApiRequestor->_interpretResponse(‘{? “error”: {?…’, 400) #2 /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiResource.php(69): Stripe_ApiRequestor->request(‘post’, ‘/charges’, Array) #3 /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/Charge.php(26): Stripe_ApiResource::_scopedCreate(‘Stripe_Charge’, Array, NULL) #4 /home/dsa/public_html/wp-content/plugins/wordpress-stripe-integration/includes/process-payment.php(161): Stripe_Charge::create(Array) #5 /home/dsa/public_html/wp-includes/plugin.php(429): pippin_stripe_process_payment(”) #6 /home/dsa/public_html/wp-settings.php(340): do_action(‘pippin_stripe_p…’, Array) #7 /home/dsa/public_html/wp-config.php(92): require_once(‘/home/dsa/publi…’) #8 /home/dsa/public_html/wp-load.php(29): require_once(‘/home/dsa/publi…’) #9 /home/dsa/public_html/wp-blog-header.php(12): require_once(‘/home/dsa/publi…’) #10 /home/dsa/public_html/index.php(17): require(‘/home/dsa/publi…’) #11 {main}

    Basically the customer is not created and I get an error message.
    What am I missing?

    • Pippin

      Check the Stripe Logs in your Stripe Dashboard. That will give you a better error message.

  17. Ravinder

    hi…pippin, when i try it to test mode, it gives this error. can you please tell me how to resolve this error. i will be highly thankful to you.

    exception ‘Stripe_InvalidRequestError’ with message ‘Invalid positive integer’ in D:\wamp\www\wordpress\wp-content\plugins\wp-stripe\stripe-php\lib\Stripe\ApiRequestor.php:66 Stack trace: #0 D:\wamp\www\wordpress\wp-content\plugins\wp-stripe\stripe-php\lib\Stripe\ApiRequestor.php(114): Stripe_ApiRequestor->handleApiError(‘{? “error”: {?…’, 400, Array) #1 D:\wamp\www\wordpress\wp-content\plugins\wp-stripe\stripe-php\lib\Stripe\ApiRequestor.php(54): Stripe_ApiRequestor->_interpretResponse(‘{? “error”: {?…’, 400) #2 D:\wamp\www\wordpress\wp-content\plugins\wp-stripe\stripe-php\lib\Stripe\ApiResource.php(76): Stripe_ApiRequestor->request(‘post’, ‘/charges’, Array) #3 D:\wamp\www\wordpress\wp-content\plugins\wp-stripe\stripe-php\lib\Stripe\Charge.php(26): Stripe_ApiResource::_scopedCreate(‘Stripe_Charge’, Array, NULL) #4 D:\wamp\www\wordpress\wp-content\plugins\wordpress-stripe-integration\includes\process-payment.php(161): Stripe_Charge::create(Array) #5 [internal function]: pippin_stripe_process_payment(”) #6 D:\wamp\www\wordpress\wp-includes\plugin.php(429): call_user_func_array(‘pippin_stripe_p…’, Array) #7 D:\wamp\www\wordpress\wp-settings.php(340): do_action(‘init’) #8 D:\wamp\www\wordpress\wp-config.php(90): require_once(‘D:\wamp\www\wor…’) #9 D:\wamp\www\wordpress\wp-load.php(29): require_once(‘D:\wamp\www\wor…’) #10 D:\wamp\www\wordpress\wp-blog-header.php(12): require_once(‘D:\wamp\www\wor…’) #11 D:\wamp\www\wordpress\index.php(17): require(‘D:\wamp\www\wor…’) #12 {main}

    • Pippin

      Looks like the purchase amount is incorrect.

      What amount were you trying to process?

  18. joe

    Pippin, do you have instruction to set up a subscription button?

    Thank you.

    • Pippin

      Not at this time.

  19. Tim Howard

    Hi Pippin,

    Is it possible to setup recurring payments using the button?

    • Pippin

      I don’t believe so.

  20. John Garrison

    Is there a way to create a field for donation amounts?

    • Pippin

      Yes. Look at line 30. Instead of having a hidden field that has its amount preset (and encoded), simply make it a visible field that users can enter an amount into.

    • Ciaran

      Hi Pippin or John,

      Just wondering of which file on line 30 this can be done from? I have followed along and tried changing line 65 where input for amount has a type=”hidden” but I can’t get an amount field to appear? Could you help point me in the right direction please?

      Ciarán

  21. Topher

    Heya, I’m also getting the invalid positive integer that Ravinder got. I had changed the amount field to test instead of hidden and tried with 1 and 200 and got the same error.

    • Pippin

      The amount has to be in cents.

  22. jweber

    Hello,
    Thank you for the tutorial. It is very useful.
    When I intentionally made mistakes during the checkout, the errorr page looks like this
    exception ‘Stripe_CardError’ with message ‘Your card was declined. ‘ in /var/www/h2770/data/www/kazcoins.com/invoice/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php:72 Stack trace: #0 /var/www/h2770/data/www/kazcoins.com/invoice/wp-content/plugins/wordpress-stripe-integration/lib/Stripe
    etc.
    I would like to handle the error pages and change them to normal look.
    The code below is from Stripe’s web site.
    try {
    // Use Stripe’s bindings…
    } catch(Stripe_CardError $e) {
    // Since it’s a decline, Stripe_CardError will be caught
    $body = $e->getJsonBody();
    $err = $body[‘error’];

    print(‘Status is:’ . $e->getHttpStatus() . “\n”);
    print(‘Type is:’ . $err[‘type’] . “\n”);
    print(‘Code is:’ . $err[‘code’] . “\n”);
    // param is ” in this case
    print(‘Param is:’ . $err[‘param’] . “\n”);
    print(‘Message is:’ . $err[‘message’] . “\n”);
    } catch (Stripe_InvalidRequestError $e) {
    // Invalid parameters were supplied to Stripe’s API
    } catch (Stripe_AuthenticationError $e) {
    // Authentication with Stripe’s API failed
    // (maybe you changed API keys recently)
    } catch (Stripe_ApiConnectionError $e) {
    // Network communication with Stripe failed
    } catch (Stripe_Error $e) {
    // Display a very generic error to the user, and maybe send
    // yourself an email
    } catch (Exception $e) {
    // Something else happened, completely unrelated to Stripe
    }
    The code is for handling such errors. However I’m not aware of what php file this should be inserted to work with.
    Can you please help me?

    • Pippin

      Go back through the tutorial series to where it describes that part of the plugin processing. I’d recommend starting with part 1 so that you have a full understanding of how it all works.

  23. dvd

    I need the button be able to work with cents, however it works with dollars only. When i tried to charge $12.34 entering [stripe_button amount=”1234″] the Stripe charge test card for $1234. When I enter [stripe_button amount=”12.34″] or [stripe_button amount=”12,34″] the Stripe charge test card for $12. What should I change in code in order to able working with cents?

    • Pippin

      Hmm, I don’t see any reason that would be happening. I’d suggest using var_dump() to output the amount that is processed in the PHP and see what it shows.

  24. adrian

    Hi Pippin,
    Just wanted to follow up whether you had a chance to work on a tutorial on integrating Stripe Connect. Or a premium plugin that is a complete solution and integrates Stripe Button with Stripe Connect that would do what i mentioned below.

    Thank you.
    Adrian

    Hi,
    Love your tutorials. As previous commenters mentioned will you have a tutorial on how you can integrate Stripe Connect with Stripe Payment button?

    There is a WP Stripe Connect plugin available: for http://codecanyon.net/item/stripe-connect-for-wordpress/5295475

    “Stripe Connect Plugin allows you to authenticate stripe users and allows you to collect a stripe token that can then be used to process payments on behalf of your users. This allow you to add an application fee for every transaction they process.”

    Thing is how can different users on your WP site create their own Stripe buttons for products they want to sell where you are processing payments on their behalf. They are connected to your Stripe account through Stripe Connect and would be creating their own Stripe Buy buttons.

    Any solution to this?

    Thank you!

    • Pippin

      I have not yet, sorry, but it is still on my todo list.

  25. Adrian

    Thanks for update. Looking forward to it. If you accept donations for free tutorial work you do here that would help you with this tutorial please me know. Would be glad to donate.

  26. Daniel Levis Keltner

    Hi Pippin!

    First off, thank you! for all this work and easy explanation of what’s going on in this plugin. I actually feel that I can do this stuff, though I have very little PHP experience.

    Second, I’m having a problem with the button shortcode. It’s not showing up visually. When I check the source code, it’s there, but I don’t see it in my sidebar where it should be. What am I missing here?

    Any help would be greatly appreciated!

    Cheers,

    Daniel

  27. Craig Freeman

    Hi Pippin,

    Firstly great plugin. One question? I need for Stripe to record the user’s email with the tranaction for Customer Details then store the transaction in my database. Where do I go to configure the plugin to record the user email ? To store the transaction in my database?

    Thanks

    • Pippin

      I’d suggest you pass the email as part of the “description” parameter for the charge.

      Storing it in your database takes a bit more work. You will probably want to create a custom table to store those emails in.

    • Craig Freeman

      Thanks for getting back to me. What page of the plugin do I need to edit to add the email to the description? Do u have any code sample?

      Thanks

      Also, I noticed the listener wasn’t working – any ideas? If it did I could store the data then.

    • Pippin

      Did you follow the tutorial series from start to finish, or just download the final plugin?

      For the listener, did you add your webhook URL to Stripe?

  28. jimmi james

    Hi,

    How can I add this to my website? I’m not using WordPress. I want to add this to my buynow.php page.

    Any help is appreciated.

    Thanks
    jimmi

    • Pippin

      This tutorial is only for WordPress.

  29. selvakumar

    I am getting this error message. How can i do exactly correct the error message in wordpress plugin stripe payments

    exception ‘Stripe_InvalidRequestError’ with message ‘Invalid positive integer’ in /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php:66 Stack trace: #0 /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php(114): Stripe_ApiRequestor->handleApiError(‘{? “error”: {?…’, 400, Array) #1 /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiRequestor.php(54): Stripe_ApiRequestor->_interpretResponse(‘{? “error”: {?…’, 400) #2 /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/ApiResource.php(69): Stripe_ApiRequestor->request(‘post’, ‘/charges’, Array) #3 /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/lib/Stripe/Charge.php(26): Stripe_ApiResource::_scopedCreate(‘Stripe_Charge’, Array, NULL) #4 /home/vtechsup/public_html/wp-content/plugins/wordpress-stripe-integration/includes/process-payment.php(162): Stripe_Charge::create(Array) #5 [internal function]: pippin_stripe_process_payment(”) #6 /home/vtechsup/public_html/wp-includes/plugin.php(429): call_user_func_array(‘pippin_stripe_p…’, Array) #7 /home/vtechsup/public_html/wp-settings.php(347): do_action(‘init’) #8 /home/vtechsup/public_html/wp-config.php(90): require_once(‘/home/vtechsup/…’) #9 /home/vtechsup/public_html/wp-load.php(29): require_once(‘/home/vtechsup/…’) #10 /home/vtechsup/public_html/wp-blog-header.php(12): require_once(‘/home/vtechsup/…’) #11 /home/vtechsup/public_html/index.php(17): require(‘/home/vtechsup/…’) #12 {main}

    • Pippin

      What was the amount you tried to charge?

  30. Sat

    Hi, Is it possible to style (CSS) the [payment_form] the same way it appears in [stripe_button] ? The payent form works fine, but it’s styling is off. Is there a way we can make it look awesome as [stripe_button] does?

    Or can we add ‘recurring billing’ or ‘subscription’ field i.e. monthly or yearly ..to [stripe_button] ?? I want to set up monthly plans for my clients. And I wish it could do it with Stripe style.

Comments are closed.

Leave a reply

Join the discussion