Stripe Subscription Payment in CodeIgniter

Recurring payments also known as AutoPay are automatic payments to authorize and collect charges immediately, Stripe Subscriptions provides you the platform to set up and manage recurring payments.

In this tutorial, We will share how to integrate Stripe Manage Subscription Payment using Codeigniter. This is a very simple example, you can just copy-paste, and change it according to your requirements.

Also Read : Manage Recurring Payments using Razorpay Billing in Codeigniter

Step-1: Create a Stripe account and get API keys

Create a Stripe account and login to the dashboard.
Navigate to the Developers » API keys page.
There is two type of standard API keys named secret key and publishable key.To show the Secret key, click on Reveal test key token button.
Stripe’s php library download: click here

Before started to implement the Stripe Manage Subscription Payment using Codeigniter, look files structure:

stripe-manage-subscription-payment-using-codeigniter
- application
  - config
    - autoload.php
    - constants.php
    - routes.php
  - controllers
    - Subscription.php
  - models
  - views
    - subscription
      - index.php
      - thankyou.php
    - templates
      - header.php
      - footer.php
- system
- index.php
- assets
  - css

Step 2: Open a file constants and update

Open “application/config/constants.php” file and define constants:

  <?php
    define('STRIPE_PUBLISHABLE_KEY', 'pk_test_bp0hgenwLtjlkLSGZCCZfaLy00qyh25x7r');
    define('STRIPE_SECRET_KEY', 'sk_test_b73hMjWizHrLSw6iS1EO6zqL00CxsUqewp');
  ?>

<?php

define('STRIPE_PUBLISHABLE_KEY', 'pk_test_bp0hgenwLtjlkLSGZCCZfaLy00qyh25x7r');

define('STRIPE_SECRET_KEY', 'sk_test_b73hMjWizHrLSw6iS1EO6zqL00CxsUqewp');

Step 3: Create controllers

Create a controllers file named Subscription.php inside “application/controllers” folder.

The controller handles the Subscription process.
__construct() – Loads the required library, helper and model.
index() – load package data.
create() – create subscription.
thankyou() – return success payment

<?php
defined('BASEPATH') OR
    exit('No direct script access allowed');
/**
 * Version: 1.0.0
 *
 * Description of Subscriptions Controller
 *
 * @author TechArise Team
 *
 * @email  info@techarise.com
 *
 **/

// Subscriptions class
class Subscription extends CI_Controller {
  //Load libraries in Constructor.
  public function __construct() {
        parent::__construct();
        $this->load->library('stripe');
    }

  public function index() {
        $data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";
        $data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');
        $this->load->view('subscription/index', $data);
    }

    // create subscription
    public function create() {
        $data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";
        $data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');
         
        \Stripe\Stripe::setApiKey(STRIPE_SECRET_KEY);

        $token  = $this->input->post('stripeToken');
        $email  = $this->input->post('stripeEmail');
        $plan  = $this->input->post('plan');
        $interval  = $this->input->post('interval');
        $price  = $this->input->post('price');
        $currency  = $this->input->post('currency');

        $time = time();
        $plan = \Stripe\Plan::create(array( 
            "product" => [
                "name" => $plan,
                "type" => "service"
            ],
            "nickname" => $plan,
            "interval" => $interval,
            "interval_count" => "1",
            "currency" => $currency,
            "amount" => ($price*100) ,
        ));

        $customer = \Stripe\Customer::create([
            'email' => $email,
            'source'  => $token,
        ]);

        $subscription = \Stripe\Subscription::create(array(
            "customer" => $customer->id,
            "items" => array(
                array(
                    "plan" => $plan->id,
                ),
            ),
        ));
        $data['price'] = $price;
        $this->session->set_flashdata('price', $price);  
        redirect('subscription/thankyou');
    }

    // successfully pay
    public function thankyou() {
        $data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';
        $data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";
        $data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');
        
        $data['price'] = $this->session->flashdata('price');
        $this->load->view('subscription/thankyou', $data);   
    }
}

?>

<?php

defined('BASEPATH') OR

exit('No direct script access allowed');

/**

* Version: 1.0.0

* Description of Subscriptions Controller

* @author TechArise Team

* @email info@techarise.com

**/

// Subscriptions class

class Subscription extends CI_Controller {

//Load libraries in Constructor.

public function __construct() {

parent::__construct();

$this->load->library('stripe');

}

public function index() {

$data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";

$data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');

$this->load->view('subscription/index', $data);

}

// create subscription

public function create() {

$data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";

$data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');

\Stripe\Stripe::setApiKey(STRIPE_SECRET_KEY);

$token = $this->input->post('stripeToken');

$email = $this->input->post('stripeEmail');

$plan = $this->input->post('plan');

$interval = $this->input->post('interval');

$price = $this->input->post('price');

$currency = $this->input->post('currency');

$time = time();

$plan = \Stripe\Plan::create(array(

"product" => [

"name" => $plan,

"type" => "service"

"nickname" => $plan,

"interval" => $interval,

"interval_count" => "1",

"currency" => $currency,

"amount" => ($price*100) ,

));

$customer = \Stripe\Customer::create([

'email' => $email,

'source' => $token,

]);

$subscription = \Stripe\Subscription::create(array(

"customer" => $customer->id,

"items" => array(

array(

"plan" => $plan->id,

));

$data['price'] = $price;

$this->session->set_flashdata('price', $price);

redirect('subscription/thankyou');

}

// successfully pay

public function thankyou() {

$data['metaDescription'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['metaKeywords'] = 'Stripe Manage Subscription Payment using Codeigniter';

$data['title'] = "Stripe Manage Subscription Payment using Codeigniter - TechArise";

$data['breadcrumbs'] = array('Stripe Manage Subscription Payment using Codeigniter' => '#');

$data['price'] = $this->session->flashdata('price');

$this->load->view('subscription/thankyou', $data);

}

Step 4:Create a view(header)

Create a view file named header.php inside “application/views/templates” folder.

This view contains the header section of the webpage. The Bootstrap library is used to provide a better UI, so, include it in the header section.

  <?php
  defined('BASEPATH') OR exit('No direct script access allowed');
  ?>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title><?php print $title; ?></title>
    <link rel="icon" type="image/ico" href="<?php print HTTP_IMAGE_PATH; ?>favicon.ico">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <!-- Custom fonts for this template -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css" />
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
    <!-- Custom styles for this template -->
    <link href="<?php print HTTP_CSS_PATH; ?>style.css" rel="stylesheet">
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top header-bg-dark" style="background: ##FFFFFF!;">
    <div class="container">
      <a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="https://techarise.com">Home
                  <span class="sr-only">(current)</span>
                </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://techarise.com/php-free-script-demos/">Live Demo</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

<!DOCTYPE html>

<head>

</head>

<body>

<a class="navbar-brand font-weight-bold" href="https://techarise.com"><h1>Tech Arise</h1></a>

</button>

<a class="nav-link" href="https://techarise.com">Home

<span class="sr-only">(current)</span>

</a>

</li>

</li>

</ul>

</div>

</nav>

Step 5: Create a view(footer)

Create a view file named footer.php inside “application/views/templates” folder.

This view contains the footer section of the webpage.

  <!-- Footer -->
    <footer class="footer bg-light footer-bg-dark">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
            <ul class="list-inline mb-2">
              <li class="list-inline-item">
                <a href="#">About</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Contact</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Terms of Use</a>
              </li>
              <li class="list-inline-item">&sdot;</li>
              <li class="list-inline-item">
                <a href="#">Privacy Policy</a>
              </li>
            </ul>
            <p class="text-muted small mb-4 mb-lg-0">Copyright &copy;  2011 - <?php print date('Y', time());?> <a href="https://techarise.com/">TECHARISE.COM</a> All rights reserved.</p>
          </div>
          <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-facebook fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item mr-3">
                <a href="#">
                  <i class="fab fa-twitter-square fa-2x fa-fw"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a href="#">
                  <i class="fab fa-instagram fa-2x fa-fw"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <script>
      var baseurl = "<?php print site_url();?>";
    </script>
    <!-- Bootstrap core JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>  
  </body>
  </html>

<a href="#">About</a>

</li>

<a href="#">Contact</a>

</li>

<a href="#">Terms of Use</a>

</li>

<a href="#">Privacy Policy</a>

</li>

</ul>

</div>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</div>

</footer>

var baseurl = "<?php print site_url();?>";

</script>

</body>

</html>

Step 6: Create views

Create a views file named index.php inside “application/views/subscription folder.

  <?php $this->load->view('templates/header');?>
 <style type="text/css">
.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing hr {
  margin: 1.5rem 0;
}

.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 20px;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }
  .pricing .card:hover .btn {
    opacity: 1;
  }
}
.pb-5, .py-5{
      padding-bottom: 15px!important;
      padding-top: 15px!important;
}

.stripe-button-el  {
    background-image: linear-gradient(#007bff,#007bff 85%,#007bff);
    margin-left: 31px;
    border-radius: 50px;
  }
  
  .stripe-button-el span {
    width: 227px;  
    position: relative;
    height: 49px;
    line-height: 49px;
    background: #007bff;
    background-image: -webkit-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -moz-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -ms-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -o-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -webkit-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -moz-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -ms-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: -o-linear-gradient(#007bff,#007bff 85%,#007bff);
    background-image: linear-gradient(#007bff,#007bff 85%,#007bff);
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
     font-size: 80%;
    border-radius: 5rem;
    letter-spacing: .1rem;
    font-weight: bold;
    transition: all 0.2s;
    padding: .0px;
  }


 </style>
 <section class="showcase">
   <div class="container">
   <div class="pb-2 mt-4 mb-2 border-bottom">
        <h2>Stripe Manage Subscription Payment using Codeigniter</h2>
      </div>
    <section class="pricing py-5">
    <div class="container">
      <div class="row">
        <!-- Free Tier -->
        <div class="col-lg-4">
          <div class="card mb-5 mb-lg-0">
            <div class="card-body">
              <h5 class="card-title text-primary text-uppercase text-center">Bronze</h5>
              <h6 class="card-price text-center">$333<span class="period">/per year</span></h6>
              <hr>
              <ul class="fa-ul">
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Single User</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>5GB Storage</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>
                <li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Unlimited Private Projects</li>
                <li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Dedicated Phone Support</li>
                <li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Free Subdomain</li>
                <li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Monthly Status Reports</li>
              </ul>
              <form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">
                <input name="plan" type="hidden" value="Starter Package<" />         
                <input name="interval" type="hidden" value="year" />         
                <input name="price" type="hidden" value="333.00" />         
                <input name="currency" type="hidden" value="usd" />
                <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"
                    data-name="BRONZE PACKAGE"
                    data-description="BRONZE PACKAGE"
                    data-panel-label="Pay Now"
                    data-label="Sign Up"
                    data-locale="auto">
                </script>
            </form>
            </div>
          </div>
        </div>
        <!-- Plus Tier -->
        <div class="col-lg-4">
          <div class="card mb-5 mb-lg-0">
            <div class="card-body">
              <h5 class="card-title text-success text-uppercase text-center">Silver</h5>
              <h6 class="card-price text-center">$555<span class="period">/per year</span></h6>
              <hr>
              <ul class="fa-ul">
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>5 Users</strong></li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>50GB Storage</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Private Projects</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Dedicated Phone Support</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Free Subdomain</li>
                <li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Monthly Status Reports</li>
              </ul>
              <form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">
                <input name="plan" type="hidden" value="Starter Package<" />         
                <input name="interval" type="hidden" value="year" />         
                <input name="price" type="hidden" value="555.00" />         
                <input name="currency" type="hidden" value="usd" />
                <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"
                    data-name="SILVER PACKAGE"
                    data-description="SILVER PACKAGE"
                    data-panel-label="Pay Now"
                    data-label="Sign Up"
                    data-locale="auto">
                </script>
            </form>
            </div>
          </div>
        </div>
        <!-- Pro Tier -->
        <div class="col-lg-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title text-warning text-uppercase text-center">Gold</h5>
              <h6 class="card-price text-center">$999<span class="period">/per year</span></h6>
              <hr>
              <ul class="fa-ul">
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>Unlimited Users</strong></li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>150GB Storage</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Private Projects</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Dedicated Phone Support</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>Unlimited</strong> Free Subdomains</li>
                <li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Monthly Status Reports</li>
              </ul>
              <form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">
                <input name="plan" type="hidden" value="Starter Package<" />         
                <input name="interval" type="hidden" value="year" />         
                <input name="price" type="hidden" value="999.00" />         
                <input name="currency" type="hidden" value="usd" />
                <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                    data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"
                    data-name="GOLD PACKAGE"
                    data-description="GOLD PACKAGE"
                    data-panel-label="Pay Now"
                    data-label="Sign Up"
                    data-locale="auto">
                </script>
            </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  </div>
</section>
<?php $this->load->view('templates/footer');?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<?php $this->load->view('templates/header');?>

.pricing .card {

border: none;

border-radius: 1rem;

transition: all 0.2s;

box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);

}

.pricing hr {

margin: 1.5rem 0;

}

.pricing .card-title {

margin: 0.5rem 0;

font-size: 20px;

letter-spacing: .1rem;

font-weight: bold;

}

.pricing .card-price {

font-size: 3rem;

margin: 0;

}

.pricing .card-price .period {

font-size: 0.8rem;

}

.pricing ul li {

margin-bottom: 1rem;

}

.pricing .text-muted {

opacity: 0.7;

}

.pricing .btn {

font-size: 80%;

border-radius: 5rem;

letter-spacing: .1rem;

font-weight: bold;

padding: 1rem;

opacity: 0.7;

transition: all 0.2s;

}

/* Hover Effects on Card */

@media (min-width: 992px) {

.pricing .card:hover {

margin-top: -.25rem;

margin-bottom: .25rem;

box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);

}

.pricing .card:hover .btn {

opacity: 1;

}

.pb-5, .py-5{

padding-bottom: 15px!important;

padding-top: 15px!important;

}

.stripe-button-el {

margin-left: 31px;

border-radius: 50px;

}

.stripe-button-el span {

width: 227px;

position: relative;

height: 49px;

line-height: 49px;

background: #007bff;

font-size: 16px;

color: #FFFFFF;

font-weight: bold;

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

text-shadow: 0 -1px 0 rgba(0,0,0,0.25);

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);

-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);

-ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);

-o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);

box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-ms-border-radius: 0px;

-o-border-radius: 0px;

border-radius: 0px;

font-size: 80%;

border-radius: 5rem;

letter-spacing: .1rem;

font-weight: bold;

transition: all 0.2s;

padding: .0px;

}

</style>

<h2>Stripe Manage Subscription Payment using Codeigniter</h2>

</div>

<h5 class="card-title text-primary text-uppercase text-center">Bronze</h5>

<hr>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Single User</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>5GB Storage</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>

<li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Unlimited Private Projects</li>

<li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Dedicated Phone Support</li>

<li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Free Subdomain</li>

<li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Monthly Status Reports</li>

</ul>

<form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">

data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"

data-name="BRONZE PACKAGE"

data-description="BRONZE PACKAGE"

data-panel-label="Pay Now"

data-label="Sign Up"

data-locale="auto">

</script>

</form>

</div>

<h5 class="card-title text-success text-uppercase text-center">Silver</h5>

<hr>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>5 Users</strong></li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>50GB Storage</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Private Projects</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Dedicated Phone Support</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Free Subdomain</li>

<li class="text-muted"><span class="fa-li"><i class="fas fa-times text-danger"></i></span>Monthly Status Reports</li>

</ul>

<form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">

data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"

data-name="SILVER PACKAGE"

data-description="SILVER PACKAGE"

data-panel-label="Pay Now"

data-label="Sign Up"

data-locale="auto">

</script>

</form>

</div>

<hr>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>Unlimited Users</strong></li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>150GB Storage</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Public Projects</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Community Access</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Unlimited Private Projects</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Dedicated Phone Support</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span><strong>Unlimited</strong> Free Subdomains</li>

<li><span class="fa-li"><i class="fas fa-check text-success"></i></span>Monthly Status Reports</li>

</ul>

<form action="<?php print site_url();?>subscription/create" method="post" class="frmStripePayment">

data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"

data-name="GOLD PACKAGE"

data-description="GOLD PACKAGE"

data-panel-label="Pay Now"

data-label="Sign Up"

data-locale="auto">

</script>

</form>

</div>

</section>

</div>

</section>

<?php $this->load->view('templates/footer');?>

Step 7: Stripe Javascript code

You add Stripe Javascript code on your page.

  <form action="charge.php" method="post" class="frmStripePayment">
    <input name="plan" type="hidden" value="Starter Package<" />         
    <input name="interval" type="hidden" value="year" />         
    <input name="price" type="hidden" value="555.00" />         
    <input name="currency" type="hidden" value="usd" />
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
        data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"
        data-name="NAME PACKAGE"
        data-description="NAME PACKAGE"
        data-panel-label="Pay Now"
        data-label="Get started"
        data-locale="auto">
    </script>
  </form>

data-key="<?php echo STRIPE_PUBLISHABLE_KEY; ?>"

data-name="NAME PACKAGE"

data-description="NAME PACKAGE"

data-panel-label="Pay Now"

data-label="Get started"

data-locale="auto">

</script>

</form>

Step 8: Create views

Create a views file named thankyou.php inside “application/views/subscription folder.

<?php $this->load->view('templates/header');?>
<section class="showcase">
   <div class="container">
    <div class="text-center">
      <h1 class="display-3">Thank You!</h1>
      <?php if(!empty($price)) { ?>
        <h3>Successfully charged $<?php print $price;?>!</h3>
      <?php } ?>
      <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
      <hr>
      <p>
        Having trouble? <a href="mailto:info@techarise.com">Contact us</a>
      </p>
      <p class="lead">
        <a class="btn btn-primary btn-sm" href="<?php print site_url();?>" role="button">Continue to homepage</a>
      </p>
    </div>
    </div>
</section>
<br><br><br><br><br><br>
<?php $this->load->view('templates/footer');?>

<?php $this->load->view('templates/header');?>

<h1 class="display-3">Thank You!</h1>

<?php if(!empty($price)) { ?>

<h3>Successfully charged $<?php print $price;?>!</h3>

<?php } ?>

<p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>

<hr>

<p>

Having trouble? <a href="mailto:info@techarise.com">Contact us</a>

</p>

<a class="btn btn-primary btn-sm" href="<?php print site_url();?>" role="button">Continue to homepage</a>

</p>

</div>

</section>

<?php $this->load->view('templates/footer');?>

Also Read : Stripe Payment Gateway Integration in Codeigniter using cURL

Demo Download