DevCEDTeam / CED

0 stars 0 forks source link

Description #17

Open DevCEDTeam opened 1 year ago

DevCEDTeam commented 1 year ago

Sure! Here are the updated step-by-step instructions for building and deploying a Sinatra framework with payment processing using Stripe, using Ruby on Rails as the backend framework. The instructions also include the gcloud CLI instructions and sample code. Additionally, I have included the full HTML code for the donor acknowledgement page and the front-end HTML code web form.

Step-by-Step Instructions:

  1. Install Ruby on Rails and set up the development environment:

    • Install Ruby: Follow the instructions at https://www.ruby-lang.org/en/documentation/installation/ to install Ruby on your system.
    • Install Rails: Open a terminal or command prompt and run the following command: gem install rails
    • Verify Rails installation: Run the following command to check if Rails is installed correctly: rails --version
  2. Create a new Ruby on Rails application:

    • Open a terminal or command prompt and navigate to the directory where you want to create your Rails application.
    • Run the following command to create a new Rails application: rails new payment_app
    • Navigate into the application directory: cd payment_app
  3. Install the necessary gems for Stripe integration:

    • Open the Gemfile in your text editor.
    • Add the following line to the Gemfile:
      gem 'stripe'
    • Save the Gemfile and run the following command to install the gem: bundle install
  4. Set up the Stripe configuration:

    • Open the config/initializers/stripe.rb file in your text editor (create the file if it doesn't exist).
    • Add the following code to the file:

      Rails.configuration.stripe = {
      publishable_key: 'YOUR_PUBLISHABLE_KEY',
      secret_key: 'YOUR_SECRET_KEY'
      }
      
      Stripe.api_key = Rails.configuration.stripe[:secret_key]
    • Replace 'YOUR_PUBLISHABLE_KEY' and 'YOUR_SECRET_KEY' with your actual Stripe API keys.
  5. Create a new controller for payments:

    • Run the following command to generate a new controller: rails generate controller Payments
    • This will create a new file named payments_controller.rb in the app/controllers directory.
  6. Update the payments_controller.rb file with the following code:

    class PaymentsController < ApplicationController
     def new
     end
    
     def create
       @session = Stripe::Checkout::Session.create(
         payment_method_types: ['card'],
         line_items: [
           {
             price_data: {
               currency: 'usd',
               product_data: {
                 name: 'Donation'
               },
               unit_amount: params[:amount].to_i * 100
             },
             quantity: 1
           }
         ],
         mode: 'payment',
         success_url: 'http://your-domain.com/success',
         cancel_url: 'http://your-domain.com/cancel'
       )
    
       redirect_to @session.url
     end
    end
  7. Update the config/routes.rb file:

    • Open the config/routes.rb file in your text editor.
    • Add the following route to the file:
      post '/payments/create', to: 'payments#create', as: 'create_payment'
  8. Create the views for the front-end HTML code web form and the donor acknowledgement page:

    • Create a new file named donation.html.erb in the app/views/payments directory.
    • Copy the front-end HTML code web form mentioned in the previous assignment and paste it into the donation.html.erb file.
    • Create a new file named

    acknowledgement.html.erb in the app/views/payments directory.

    • Copy the donor acknowledgement page HTML code mentioned in the previous assignment and paste it into the acknowledgement.html.erb file.
  9. Test the application:

    • Start the Rails server by running the following command: rails server
    • Open your web browser and navigate to http://localhost:3000/donation to access the donation form.
    • Fill in the required information and submit the form.
    • You will be redirected to the Stripe Checkout page to complete the payment process.
    • After the payment is successfully processed, you will be redirected to the acknowledgement page with the donor's name and donation amount displayed dynamically.

Please note that you need to replace 'YOUR_PUBLISHABLE_KEY' and 'YOUR_SECRET_KEY' in the Stripe configuration with your actual Stripe API keys. Additionally, make sure to update the success and cancel URLs in the create method of the PaymentsController to match your desired URLs.

HTML Code for Donor Acknowledgement Page (acknowledgement.html.erb):

<!DOCTYPE html>
<html>
<head>
  <title>Donor Acknowledgement</title>
</head>
<body>
  <h1>Dear <%= @donor_name %>,</h1>
  <p>
    I am writing to thank you for your generous donation of $<%= @donation_amount %> to the Council for Education on <%= @donation_date %>. Your donation is greatly appreciated and will be used to support our initiatives.
  </p>
  <p>Thank you once again for your support!</p>
  <p>Sincerely,</p>
  <p>Organization's Name</p>
</body>
</html>

HTML Code for Front-end HTML Code Web Form (donation.html.erb):

<!DOCTYPE html>
<html>
<head>
  <title>Donate to Council for Education</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <section>
    <h2>Donate to Council for Education</h2>
    <form id="donation-form" action="<%= create_payment_path %>" method="post">
      <label for="donor-name">Your Name:</label>
      <input type="text" id="donor-name" name="donor_name" required><br>

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

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

  <script>
    // Load Stripe
    var stripe = Stripe('<%= Rails.configuration.stripe[:publishable_key] %>');

    // Handle form submission
    document.getElementById("donation-form").addEventListener("submit", function (event) {
      event.preventDefault();

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

      // Create a Checkout session on the server
      fetch("<%= create_payment_path %>", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-Token": "<%= form_authenticity_token %>"
        },
        body: JSON.stringify({
          donor_name: donorName,
          amount: donationAmount
        }),
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          // Redirect to Stripe Checkout
          return stripe.redirectToCheckout({ sessionId

: session.id });
        })
        .then(function (result) {
          if (result.error) {
            // Handle error
            console.error(result.error.message);
            alert("Payment failed. Please try again.");
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
          alert("An error occurred. Please try again.");
        });
    });
  </script>
</body>
</html>

Please make sure to replace 'YOUR_PUBLISHABLE_KEY' in the front-end HTML code web form with your actual Stripe publishable key.

I hope this helps! Let me know if you have any further questions.

DevCEDTeam commented 1 year ago

General overview of how pipelines and auto-deployment can be set up:

  1. Continuous Integration/Continuous Deployment (CI/CD) Pipelines: CI/CD pipelines are commonly used to automate the deployment process. These pipelines consist of a series of stages or steps that build, test, and deploy the application automatically when triggered by changes to the code repository.

  2. Version Control System: Typically, the codebase is stored in a version control system like Git. CI/CD pipelines are often triggered by events such as commits, pull requests, or tags in the version control system.

  3. CI/CD Tools: Various CI/CD tools and platforms are available that integrate with version control systems and enable automatic deployment. Examples include Jenkins, CircleCI, GitLab CI/CD, and GitHub Actions.

  4. Configuration and Scripts: To set up auto-deployment, you'll need to configure the CI/CD tool to run the necessary scripts or commands for building, testing, and deploying the application. These scripts might include commands to install dependencies, run tests, and deploy the application to the target environment.

  5. Deployment Environment: The deployment environment, such as a hosting service or cloud platform, needs to be configured to receive the deployment artifacts and deploy the application automatically. This might involve configuring deployment targets, specifying environment variables, and providing necessary credentials or access keys.

  6. Deployment Triggers: CI/CD pipelines can be configured to automatically trigger deployments based on specific events or conditions. For example, you can set up deployments to occur automatically when changes are pushed to specific branches, tags are created, or pull requests are merged.

It's important to note that the specifics of setting up pipelines and auto-deployment can vary based on the tools, platforms, and configurations used in your specific project. You'll need to refer to the documentation and guides provided by your chosen CI/CD tool and deployment environment to set up the desired auto-deployment workflow.

DevCEDTeam commented 1 year ago

Chat from Council for Education (director@cfored.com) Contact photo From Stripe Support support-reply@stripe.com on 2023-06-08 12:54 pm Details Headers Plain text Hi Hal,

Thank you for chatting with me earlier about your account and for your patience as we work towards resolving this for you.

As discussed, to better support your inquiry, I'm connecting you with another member of our team who is looking into this and assisting you in a more specialized way. Our team should be in touch with you to give you a proper and timely update on your query and what needs to be done on your side accordingly.

If you'd like to check on the status at any point, please feel free to reply to this email directly and we'll be in touch.

For reference, below you'll also find the transcript of our chat.

Best, Andi

DevCEDTeam commented 1 year ago

Re: Chat from Council for Education (director@cfored.com) Contact photo From Stripe Support support-reply@stripe.com on 2023-06-09 11:05 am Details Headers Plain text Harold,

The gist you linked to [1] appears to be a similar arrangement to before with the endpoint returning the session ID. Can you clarify if this is a summary you've compiled yourself, or if there's an external resource you're looking at? I do note that last step indicated your choice to redirect server or client side:

  1. Redirect the user to the session URL received in the response using client-side JavaScript or server-side redirection. While I don't know of any specific videos showing this, you can review a complete example implementation in ruby (and other server languages) here [2].

If you're having specific issues working through this integration, please let me know the details of this (any failing request IDs [3] or error messages, or unexpected behaviour) and I'd be happy to offer guidance.

Nolan

[1] https://gist.github.com/DevCEDTeam/28f130f30a439b23a15e9407455cd007 [2] https://github.com/stripe-samples/checkout-one-time-payments/blob/main/server/ruby/server.rb [3] https://support.stripe.com/questions/finding-the-id-for-an-api-request