-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from Luxshan2000/paymentGateway
Payement gateway frontend added
- Loading branch information
Showing
4 changed files
with
148 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React from 'react'; | ||
|
|
||
| const PaymentModal = ({ orderId, name, amount }) => { | ||
|
|
||
| // Put the payment variables here | ||
| var payment = { | ||
| sandbox: true, // if the account is sandbox or real | ||
| merchant_id: '1223868', // Replace your Merchant ID | ||
| return_url: 'http://localhost:3000/dashboard', | ||
| cancel_url: 'http://localhost:3000/dashboard', | ||
| notify_url: 'http://sample.com/notify', | ||
| order_id: orderId, | ||
| items: name, | ||
| amount: amount, | ||
| currency: 'LKR', | ||
| first_name: 'Saman', | ||
| last_name: 'Perera', | ||
| email: '[email protected]', | ||
| phone: '0771234567', | ||
| address: 'No.1, Galle Road', | ||
| city: 'Colombo', | ||
| country: 'Sri Lanka', | ||
| delivery_address: 'No. 46, Galle road, Kalutara South', // optional field | ||
| delivery_city: 'Kalutara', // optional field | ||
| delivery_country: 'Sri Lanka', // optional field | ||
| custom_1: '', // optional field | ||
| custom_2: '', // optional field | ||
| }; | ||
|
|
||
| // Called when user completed the payment. It can be a successful payment or failure | ||
| window.payhere.onCompleted = function onCompleted(orderId) { | ||
| console.log("Payment completed. OrderID:" + orderId); | ||
| //Note: validate the payment and show success or failure page to the customer | ||
| }; | ||
|
|
||
| // Called when user closes the payment without completing | ||
| window.payhere.onDismissed = function onDismissed() { | ||
| //Note: Prompt user to pay again or show an error page | ||
| console.log("Payment dismissed"); | ||
| }; | ||
|
|
||
| // Called when error happens when initializing payment such as invalid parameters | ||
| window.payhere.onError = function onError(error) { | ||
| // Note: show an error page | ||
| console.log("Error:" + error); | ||
| }; | ||
|
|
||
| function pay(){ | ||
| window.payhere.startPayment(payment); | ||
| } | ||
|
|
||
| return <button className="btn btn-success mt-4" onClick={pay}>Pay with Payhere</button>; | ||
| }; | ||
|
|
||
| export default PaymentModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,92 @@ | ||
| import '../assets/CSS/premiumStyle.css' | ||
| import React, { useState } from 'react'; | ||
| import FrameComponent from '../components/FrameComponent'; | ||
| import "../assets/CSS/premiumStyle.css"; | ||
| import React, { useState } from "react"; | ||
| import FrameComponent from "../components/FrameComponent"; | ||
| import PaymentModal from "../PaymentModal/PaymentModal"; | ||
|
|
||
| const PremiumView = () => { | ||
| const [agree, setAgree] = useState(false); | ||
| const [payment, setPayment] = useState(false); | ||
|
|
||
| const checkboxHandler = () => { | ||
| setAgree(!agree); | ||
| } | ||
| }; | ||
| const btnHandler = () => { | ||
| alert('The button is clickable!'); | ||
| setPayment(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <FrameComponent> | ||
| <section> | ||
| <div className="container premium__container"> | ||
| <div className='premium__title'> | ||
| <h1 className="text-center">Unlock Your Premium Features</h1> | ||
| </div> | ||
| <div className='premium__content'> | ||
| <div className='premium__paragraph'> | ||
| <h4>UPGRADE TO PREMIUM</h4> | ||
| <h6>Boost your learning today - go premium with a one-time payment of 400.00 LKR. | ||
| Get access to exclusive study materials, videos, and interactive quizzes!</h6> | ||
| <h6>අදම ඔබේ ඉගෙනීම ඉහළ නංවන්න - වාරිකය 400/= කට පමණයි. සුවිශේෂී අධ්යයන ද්රව්ය, | ||
| වීඩියෝ සහ අන්තර්ක්රියාකාරී ප්රශ්නාවලිය වෙත ප්රවේශය ලබා ගන්න!</h6> | ||
| <h6>இன்றே உங்கள் கற்றலை அதிகரிக்கவும் 400.00 LKR ஒரு முறை செலுத்துவதன் மூலம் பிரீமியத்திற்கு செல்லுங்கள். | ||
| பிரத்தியேக வீடியோக்கள் மற்றும் வினாடி வினாக்களுக்கான அணுகலைப் பெறுங்கள்!</h6> | ||
| <section> | ||
| <div className="container premium__container"> | ||
| <div className="premium__title"> | ||
| <h1 className="text-center">Unlock Your Premium Features</h1> | ||
| </div> | ||
| <div> | ||
| <input type="checkbox" id="agree" onChange={checkboxHandler} /> | ||
| <label htmlFor="agree"> I agree to <b>terms and conditions</b></label> | ||
| </div> | ||
| <div className='premium__btn'> | ||
| <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}> | ||
| Unlock Sinhala | ||
| </button> | ||
| <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}> | ||
| Unlock Tamil | ||
| </button> | ||
| <button disabled={!agree} className="btn btn-primary" onClick={btnHandler}> | ||
| Unlock English | ||
| </button> | ||
| {/* <a href='##' className='btn btn-primary' disabled={!agree}>Unlock Tamil</a> | ||
| <div className="premium__content"> | ||
| <div className="premium__paragraph"> | ||
| <h4>UPGRADE TO PREMIUM</h4> | ||
| <h6> | ||
| Boost your learning today - go premium with a one-time payment | ||
| of 400.00 LKR. Get access to exclusive study materials, videos, | ||
| and interactive quizzes! | ||
| </h6> | ||
| <h6> | ||
| අදම ඔබේ ඉගෙනීම ඉහළ නංවන්න - වාරිකය 400/= කට පමණයි. සුවිශේෂී | ||
| අධ්යයන ද්රව්ය, වීඩියෝ සහ අන්තර්ක්රියාකාරී ප්රශ්නාවලිය වෙත | ||
| ප්රවේශය ලබා ගන්න! | ||
| </h6> | ||
| <h6> | ||
| இன்றே உங்கள் கற்றலை அதிகரிக்கவும் 400.00 LKR ஒரு முறை | ||
| செலுத்துவதன் மூலம் பிரீமியத்திற்கு செல்லுங்கள். பிரத்தியேக | ||
| வீடியோக்கள் மற்றும் வினாடி வினாக்களுக்கான அணுகலைப் பெறுங்கள்! | ||
| </h6> | ||
| </div> | ||
| <div> | ||
| <input type="checkbox" id="agree" onChange={checkboxHandler} /> | ||
| <label htmlFor="agree"> | ||
| {" "} | ||
| I agree to <b>terms and conditions</b> | ||
| </label> | ||
| </div> | ||
| <div className="premium__btn"> | ||
| <button | ||
| disabled={!agree} | ||
| className="btn btn-primary" | ||
| onClick={btnHandler} | ||
| > | ||
| Unlock Sinhala | ||
| </button> | ||
| <button | ||
| disabled={!agree} | ||
| className="btn btn-primary" | ||
| onClick={btnHandler} | ||
| > | ||
| Unlock Tamil | ||
| </button> | ||
| <button | ||
| disabled={!agree} | ||
| className="btn btn-primary" | ||
| onClick={btnHandler} | ||
| > | ||
| Unlock English | ||
| </button> | ||
| {/* <a href='##' className='btn btn-primary' disabled={!agree}>Unlock Tamil</a> | ||
| <a href='###' className='btn btn-primary' disabled={!agree}>Unlock English</a> */} | ||
| </div> | ||
| </div> | ||
| {payment ? ( | ||
| <div className="App"> | ||
| <PaymentModal | ||
| // Use a unique value for the orderId | ||
| orderId={45896588} | ||
| name="Subscription for Premium" | ||
| amount="1500" | ||
| /> | ||
| </div> | ||
| ) : null} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </section> | ||
| </FrameComponent> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default PremiumView; |