{"id":4170,"date":"2016-11-16T19:01:36","date_gmt":"2016-11-16T08:01:36","guid":{"rendered":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/?p=4170"},"modified":"2021-04-13T09:51:14","modified_gmt":"2021-04-12T23:51:14","slug":"wp-payment-gateway-bundle-stripe-basic-gateway-setup","status":"publish","type":"post","link":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-payment-gateway-bundle-stripe-basic-gateway-setup-4170","title":{"rendered":"WP Payment Gateway Bundle &#8211; Stripe Basic Gateway Setup"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/payment-gateway-bundle-checkout-experience-4050\" target=\"_blank\" rel=\"noopener noreferrer\">Read this page<\/a> to get a good idea of how the checkout flow works when you use the gateway bundle addon.<\/p>\n\n\n\n<p class=\"has-pale-cyan-blue-background-color has-background\"><strong>Note:<\/strong> There are a couple of different checkout flows available for the Stripe gateway. The recommended setup is the <a href=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-payment-gateway-bundle-stripe-checkout-sca-setup-4645\">Stripe SCA setup explained here<\/a>.<\/p>\n\n\n\n<p>Stripe Basic is a simplified method for accepting payments with the Stripe payment gateway. When you enable this option in the payment gateway bundle addon, the payment information is collected in a popup form instead of our default&nbsp;<a href=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/payment-gateway-bundle-checkout-experience-4050\" target=\"_blank\" rel=\"noopener noreferrer\">checkout page<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"303\" height=\"497\" src=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-payment-form.png\" alt=\"screenshot of Stripe basic payment form in a popup\" class=\"wp-image-4173\" srcset=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-payment-form.png 303w, https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-payment-form-183x300.png 183w\" sizes=\"(max-width: 303px) 100vw, 303px\" \/><\/figure>\n\n\n\n<p>This method is&nbsp;useful if you just want to quickly accept payments from your customers.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"422\" src=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-credit-card-form.png\" alt=\"screenshot of Stripe basic credit card form\" class=\"wp-image-4175\" srcset=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-credit-card-form.png 305w, https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2016\/11\/stripe-basic-credit-card-form-217x300.png 217w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/figure>\n\n\n<h2 class=\"wp-block-heading\" id=\"stripe-basic-setup\">Stripe Basic Setup<\/h2>\n\n\n<p>After you install the <a href=\"https:\/\/www.tipsandtricks-hq.com\/wp-payment-gateway-bundle-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">WP Payment Gateway Bundle<\/a>&nbsp;addon, you will need to configure some Stripe Gateway specific settings in the plugin which you will need to obtain from your Stripe merchant account.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Enable Stripe Basic Checkout Using the Payment Gateway Bundle\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/V11XoJs1cJ8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>You can find the Stripe Basic specific settings under the &#8220;Gateway Settings&#8221; tab when you go to the payment gateway bundle plugin&#8217;s settings menu. The following screenshot shows how you can access the settings page of this addon:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"151\" height=\"344\" src=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/payment-gateway-bundle-settings.png\" alt=\"\" class=\"wp-image-4648\" srcset=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/payment-gateway-bundle-settings.png 151w, https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/payment-gateway-bundle-settings-132x300.png 132w\" sizes=\"(max-width: 151px) 100vw, 151px\" \/><\/figure>\n\n\n\n<p>In order to configure the Stripe portion of the payment gateway bundle you will need to obtain the required details from your Stripe merchant account by following the steps outlined below:<\/p>\n\n\n\n<p><strong>Step 1:<\/strong>  Log into your Stripe merchant account and&nbsp;click on the&nbsp;<strong>API Keys<\/strong>&nbsp;menu item (Under&nbsp;<strong>Developers<\/strong>).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"247\" src=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/stripe-api-keys-menu.png\" alt=\"\" class=\"wp-image-4650\" srcset=\"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/stripe-api-keys-menu.png 700w, https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-content\/uploads\/2019\/08\/stripe-api-keys-menu-300x106.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p><strong>Step 2:<\/strong>&nbsp; Copy the values for the secret key and the publishable key as shown in the figure above.<\/p>\n\n\n\n<p><strong>Step 3:<\/strong> Now from your WordPress administration panel, go to Stripe Basic Settings (under&nbsp;<strong>WP eStore<\/strong>&nbsp;-&gt;&nbsp;<strong>Payment Gateway Bundle<\/strong>&nbsp;-&gt;&nbsp;<strong>Gateway Settings<\/strong>) and check &#8220;Use Stripe Basic Payment Gateway&#8221; option.<\/p>\n\n\n\n<p><strong>Step 4:<\/strong> Enter your Test Secret Key.<\/p>\n\n\n\n<p><strong>Step 5:<\/strong> Enter your Test Publishable Key.<\/p>\n\n\n\n<p><strong>Step 6:<\/strong> Enter your Live Secret Key.<\/p>\n\n\n\n<p><strong>Step 7:<\/strong> Enter your Live Publishable Key.<\/p>\n\n\n\n<p><strong>Step 8:<\/strong> Enter a selector label for Stripe Basic option. For example: Stripe Payment (This text will be displayed in the select box in the shopping cart as a checkout option).<\/p>\n\n\n\n<p><strong>Step 9:<\/strong>&nbsp;Copy the Stripe Webhook URL for your site and add it as a webhook endpoint in your Stripe account (<strong>Developers<\/strong>&nbsp;-&gt;&nbsp;<strong>Webhooks<\/strong>). You should only have one webhook set up for our plugin (remove any other URL that you may have configured previously for our plugin).<\/p>\n\n\n\n<p>You can either choose to be notified of all the events (may increase load on your server) or select the ones that our plugin processes at the moment:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>charge.refunded<\/li><li>checkout.session.completed<\/li><li>invoice.payment_succeeded<\/li><li>customer.subscription.deleted<\/li><li>invoice.payment_failed<\/li><\/ul>\n\n\n\n<p><strong>Step 10:<\/strong> Hit the &#8220;Update&#8221; button at the bottom to save the settings and now your customers can checkout using the stripe basic payment form.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-buy-now-type-buttons-for-stripe-basic\">Creating Buy Now Type Buttons For Stripe Basic<\/h2>\n\n\n<p>If you want to use &#8220;Buy Now&#8221; type buttons instead of the standard &#8220;Add to Cart&#8221; buttons then check the following documentation to learn how to create a buy now buttons for any payment gateways offered in WP eStore plugin:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/support.tipsandtricks-hq.com\/forums\/topic\/how-to-use-gateway-specific-buy-now-type-buttons\" target=\"_blank\" rel=\"noopener noreferrer\">How to use payment gateway specific buy now button<\/a><\/li><\/ul>\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode-for-subscription-button\">Shortcode for Subscription Button<\/h2>\n\n\n<p>You need to embed the following shortcode in a WordPress Post\/Page to accept recurring payments via Stripe Basic:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_pg_eStore_subscription_button id=\"1\" gateway=\"stripe_basic_subsc\"]\n<\/pre>\n\n\n\n<p>(Replace <strong>1<\/strong> with your actual eStore product ID)<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"customizing-the-look-of-the-stripe-subscriptionnbspbutton\">Customizing the Look of the Stripe Subscription Button<\/h2>\n\n\n<p>WP eStore plugin allows you to customize all of your subscription&nbsp;buttons by using a custom button image of your choice. If you want to customize the look of your stripe subscription&nbsp;button then <a href=\"https:\/\/support.tipsandtricks-hq.com\/forums\/topic\/how-to-change-the-buy-button-images-for-estore-and-simple-shopping-cart-plugins\" target=\"_blank\" rel=\"noopener noreferrer\">read this post<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"using-stripe-subscription-button-with-fancy-display-template\"><strong>Using Stripe Subscription Button with Fancy Display Template<\/strong><\/h2>\n\n\n<p>You can use the following shortcode to use a fancy display template with the Stripe subscription button:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[wp_eStore_fancy_display id=\"50\" type=\"3\" style=\"1\" gateway=\"stripe_basic_subsc\"]\n<\/pre>\n\n\n\n<p>WP eStore product ID of the item is 50 in the above example. You will need to change that value to your actual product ID.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Read this page to get a good idea of how the checkout flow works when you use the gateway bundle addon. Note: There are a couple of different checkout flows available for the Stripe gateway. The recommended setup is the Stripe SCA setup explained here. Stripe Basic is a simplified method for accepting payments with [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[48,68],"tags":[117,91,118,119],"class_list":{"0":"post-4170","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-payment-gateway","7":"category-wp-payment-gateway-bundle","8":"tag-accept-payment-via-stripe","9":"tag-estore-addon-2","10":"tag-estore-and-stripe","11":"tag-stripe-integration","12":"entry"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/4170"}],"collection":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/comments?post=4170"}],"version-history":[{"count":0,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/posts\/4170\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/media?parent=4170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/categories?post=4170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tipsandtricks-hq.com\/ecommerce\/wp-json\/wp\/v2\/tags?post=4170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}