search

DevCEDTeam / CED

0 stars 0 forks source link

Description #31

Open DevCEDTeam opened 1 year ago

DevCEDTeam commented 1 year ago

To build and deploy a Sinatra framework with payment processing using Stripe and Ruby on Rails as the backend framework of a logic server hosted on Google Cloud Functions, follow the step-by-step guide below.

DevCEDTeam commented 1 year ago

Step 1: Set up a Google Cloud project

  1. Create a new project in the Google Cloud Console.
  2. Enable the Cloud Functions API for your project.

Step 2: Install the necessary tools and frameworks

  1. Install Ruby and Ruby on Rails on your local development machine.
  2. Install the Stripe gem by running the following command: 
    gem install stripe

Step 3: Set up a Sinatra application

  1. Create a new directory for your Sinatra application.
  2. Initialize a new Sinatra application by running the following command: 
    bundle exec sinatra new myapp

    Replace "myapp" with the desired name of your application.

Step 4: Configure Stripe integration

  1. Obtain your Stripe API keys from the Stripe dashboard.
  2. In your Sinatra application, create a new file called config.rb and add the following code: 
    
require 'stripe'

Stripe.api_key = 'YOUR_STRIPE_SECRET_KEY'

Replace `'YOUR_STRIPE_SECRET_KEY'` with your actual Stripe secret key.

### **Step 5: Implement payment processing functionality**
1. Create a new file called `app.rb` in your Sinatra application's directory.
2. Add the following code to `app.rb` to implement payment processing using Stripe:
```ruby
require './config'

post '/charge' do
  # Retrieve the amount and token from the form
  amount = params[:amount]
  token = params[:stripeToken]

  # Create a charge using the Stripe API
  charge = Stripe::Charge.create(
    amount: amount,
    currency: 'usd',
    source: token,
    description: 'Donation'
  )

  # Handle the successful payment response
  if charge.paid
    # Perform any necessary actions (e.g., save the donation to a database)
    # Return a success message or redirect to a thank you page
  else
    # Handle the payment failure
    # Return an error message or redirect to an error page
  end
end

Step 6: Deploy the Sinatra application to Google Cloud Functions

  1. Set the project ID for the Cloud Functions deployment: 
    gcloud config set project [PROJECT_ID]

    Replace [PROJECT_ID] with your actual project ID.

  2. Deploy the application to Cloud Functions by running the following command in your Sinatra application's directory: 
    gcloud functions deploy myapp --runtime ruby313 --trigger-http

    Replace "myapp" with the desired name of your Cloud Function.

Step 7: Use the HTML code for the frontend

  1. Create a file named donation.html.erb and add the provided HTML code for the donation form.
  2. Upload the donation.html.erb file to your hosting server.

Step 8: Use the HTML code for the donor acknowledgement page

  1. Create a file named acknowledgement.html.erb and add the provided HTML code for the donor acknowledgement page.
  2. Upload the acknowledgement.html.erb file to your hosting server.

That's it! You have now built and deployed a Sinatra framework with payment processing using Stripe and Ruby on Rails as the backend logic server hosted on Google Cloud Functions. Make sure to replace any placeholders with the actual values required for your application.

DevCEDTeam commented 1 year ago

donation.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Donate to Council for Education</title>
  </head>
  <body>
    <section>
      <h2>Donate to Council for Education</h2>
      <form id="donation-form">
        <label for="donor-name">Your Name:</label>
        <input type="text" id="donor-name" required><br>

        <label for="donation-amount">Donation Amount:</label>
        <input type="number" id="donation-amount" min="50" step="any" required><br>

        <button type="submit">Donate</button>
      </form>
    </section>

    <script>
      document.getElementById("donation-form").addEventListener("submit", function(event) {
        event.preventDefault();

        var donorName = document.getElementById("donor-name").value;
        var donationAmount = document.getElementById("donation-amount").value;

        // Redirect to the donor acknowledgement page
        window.location.href = "acknowledgement.html?name=" + encodeURIComponent(donorName) + "&amount=" + encodeURIComponent(donationAmount);
      });
    </script>
  </body>
</html>

acknowledgement.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Donor Acknowledgement</title>
  </head>
  <body>
    <h2>Dear <span id="donor-name"></span>,</h2>
    <p>I am writing to thank you for your generous donation of <span id="donation-amount"></span> to the Council for Education on <span id="donation-date"></span>. Your membership donation is greatly appreciated and will be used to raise funds to operate a public bank and to grant an auditor access to confidential records, which is in support of an Orange County ballot initiative: Authorizes Access to Confidential County and Superior Count Records by a Risk Management Inspector General.</p>
    <p>This donation is tax exempt under California law. The Council for Education’s annual gross receipts are not more than $5,000, which creates an exemption from filing a 1023 Tax Determination Letter. Also, membership donations are an exception under California law because they do not transfer tangible personal property to subscription members other than transfers incidental to the services provided. Under Regulations 1501 and 1584, neither sales nor use tax applies to the membership fee.</p>
    <p>Again, thank you for supporting the Council for Education with your donation.</p>
    <p>Sincerely,</p>
    <p>[Harold Huggins]</p>
    <p>[Organization's Name]</p>

    <script>
      // Retrieve the donor name, donation amount, and donation date from the URL parameters
      var urlParams = new URLSearchParams(window.location.search);
      var donorName = urlParams.get("name");
      var donationAmount = urlParams.get("amount");
      var donationDate = new Date().toLocaleDateString();

      // Set the values in the HTML
      document.getElementById("donor-name").textContent = donorName;
      document.getElementById("donation-amount").textContent = donationAmount;
      document.getElementById("donation-date").textContent = donationDate;
    </script>
  </body>
</html>
DevCEDTeam commented 1 year ago

//

DevCEDTeam commented 1 year ago

//