Introduction
This tutorial covers how you can create a pricing page for returning users using Chargebee Atomic Pricing to support plan upgrades, downgrades, and so on for your customers by providing relevant inputs.
Setup
Connect your Chargebee account to atomic pricing by referring to this video.
Customize your pricing page further by referring to these Tutorials.
Setup Client Library
Import Chargebee SDK
Download and import the client library of your choice and configure the client library with your Chargebee TEST site name and API key.
Environment.configure("your_site_domain","your_api_key");
ChargeBee.configure(:site => "your_site_domain", :api_key => "your_api_key")
chargebee.configure({site : "your_site_domain", api_key : "your_api_key"});
import chargebee
chargebee.configure("your_site_domain", "your_api_key")
ChargeBee_Environment::configure("your_site_domain", "your_api_key");
Create a pricing page session
On the server side, use Chargebee’s pricing page session API to create a pricing page session object.
@WebServlet(name = "pricing_page_session", value = {"generate_pricing_page_session"})
public class GeneratePricingPageSession extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException {
Result result = null;
try {
result = PricingPageSession.createForNewSubscription()
.pricingPageId("your_atomicpricing_pricing_page_id")
.customerId("customer_id") // new or existing customer id
.subscriptionId("new_subscription_id")
.request(new Environment("your_site_domain", "your_api_key"));
} catch (Exception e) {
e.printStackTrace();
}
PricingPageSession pricingPageSession = result.pricingPageSession();
// Dont add the below header in production. This is only for demo
response.addHeader("Access-Control-Allow-Origin", "*");
response.setContentType("application/json");
response.getWriter().print(pricingPageSession.jsonObj);
}
}
# routes.rb
post "/api/generate_pricing_page_session" => "chargebee#generate_pricing_page_session"
# controller
def generate_pricing_page_session
result = ChargeBee::PricingPageSession.create_for_new_subscription({
:pricing_page => {:id => params[:id] },
:customer => {:id => params[:id] },
:subscription => {:id => params[:id] }
})
render :json => result.pricing_page_session.to_s
end
app.post("/api/generate_pricing_page_session", (req, res) => {
chargebee.pricing_page_session.create_for_new_subscription({
pricing_page : {
id : "your_atomicpricing_pricing_page_id"
},
customer: {
id: "customer_id", // new or existing customer id
},
subscription: {
id: "new_subscription_id",
}
}).request(function(error,result){
if(error){
//handle error
console.log(error);
}else{
res.send(result.pricing_page_session);
}
});
});
@app.route('/api/generate_pricing_page_session', methods=['POST'])
def generate_pricing_page_session():
result = chargebee.PricingPageSession.create_for_new_subscription({
"pricing_page" : {
"id" : "your_atomicpricing_pricing_page_id"
},
"customer": {
"id": "customer_id", // new or existing customer id
},
"subscription": {
"id": "new_subscription_id",
}
})
pricing_page_session = result._response['pricing_page_session']
return jsonify(pricing_page_session)
# routes
Route::post('generate_pricing_page_session', 'ChargebeeController@generatePricingPageSession');
# controller
public function generatePricingPageSession(Request $request) {
$result = ChargeBee_PricingPageSession::createForNewSubscription(array(
"pricing_page" => array(
"id" => "your_atomicpricing_pricing_page_id"
),
"customer" => array(
"id" => "customer_id", // new or existing customer id
),
"subscription" => array(
"id" => "new_subscription_id",
)
));
$pricingPageSession = $result->pricingPageSession();
return response()->json($pricingPageSession->getValues(), 200);
}
Setup your frontend
On the client side, you can use Atomic pricing JS and call openPricingPage function. The pricingPage attribute passed to this method expects a function that returns a Promise. This Promise can be a result of an API call that creates a pricing page session (as shown in the previous step), and this promise must resolve to a pricing page session object.
<script src="https://js.chargebee.com/atomicpricing/pricify.js" onload="onLoad()" defer></script>
<script>
function onLoad() {
Pricify.openPricingPage({
pricingPage: function() {
return fetch('http://localhost:8000/api/generate_pricing_page_session', {
method: "POST",
data: data,
}).then(res => res.json()),
},
});
}
</script>
<div
id="pricify-hosted-pricing-page"
data-pricify-integrationtype="api"
></div>
import React, { useEffect } from 'react';
import Pricify from '@chargebee/atomicpricing';
function PricingPage() {
useEffect(() => {
Pricify.openPricingPage({
pricingPage: function() {
return fetch('http://localhost:8000/api/generate_pricing_page_session', {
method: "POST",
data: data,
}).then(res => res.json()),
},
});
}, []);
return (
<div className="App">
<div
id="pricify-hosted-pricing-page"
data-pricify-integrationtype="api"
></div>
</div>
);
}
export default PricingPage;
<script setup lang="tsx">
import Pricify from '@chargebee/atomicpricing';
import { onMounted } from 'vue';
onMounted(() => {
Pricify.openPricingPage({
pricingPage: function() {
return fetch('http://localhost:8000/api/generate_pricing_page_session', {
method: "POST",
data: data,
}).then(res => res.json()),
},
});
});
</script>
<template>
<div
id="pricify-hosted-pricing-page"
data-pricify-integrationtype="api"
></div>
</template>
import { Component } from '@angular/core';
import Pricify from '@chargebee/atomicpricing';
@Component({
selector: 'pricing-page-component',
templateUrl: './pricing-page.component.html',
styleUrls: ['./pricing-page.component.css'],
})
export class PricingPageComponent {
title = 'pricing-page-component';
params: { [index: string]: any } = {};
ngOnInit() {
Pricify.openPricingPage({
pricingPage: function() {
return fetch('http://localhost:8000/api/generate_pricing_page_session', {
method: "POST",
data: data,
}).then(res => res.json()),
},
});
}
}
Was this tutorial helpful ?
Need more help?
We're always happy to help you with any questions you might have!
support@chargebee.com