Success page in html

How to build a custom checkout page in minutes with Django and JavaScript.

When implementing payment options in an app, it’s always a good idea to have a payment process that’s as brief and straightforward as possible. In this article, we’re going to build a checkout modal to process one time payments on web apps using Rave, Django and JavaScript. To solve the issue of using pip and virtualenv together, we’ll use pipenv to create our development environment. If you need help setting up pipenv , please check out this guide.

Setting up a Project

The first thing we’ll do is install Django. Then we’ll start a new project which we’ll name djangorave . In this project, we’ll create our first app which we’ll call payments . Navigate to your terminal and input the following commands:

 # install Django $ pipenv install django # activate the pipenv shell to start a new shell subprocess $ pipenv shell (rave-checkout-python) $ django-admin startproject djangorave (rave-checkout-python) $ python manage.py startapp payments 

Note that the virtual environment rave-checkout-python is just a part of my code directory, yours can be anything you choose. Let’s add the newly installed app to the INSTALLED_APPS configuration in settings.py :

INSTALLED_APPS = [ 'django.contrib', 'django.contrib.admin', 'django.contrib .auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', #update the newly installed app 'payments.apps.PaymentsConfig', ] 

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('payments.urls')), ] 

Our next step is to create a homepage for our application. In the djangorave parent folder, create a folder named templates and in it, your homepage:

 (rave-checkout-python) $ mkdir templates (rave-checkout-python) $ touch templates/homepage.html 

 #djangorave/settings.py TEMPLATES = [  'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': ['templates'], # add this line 'APP_DIRS': True, >, ] 

 # templates/homepage.html My First Django app 

Then in the payments folder, we’ll create a views.py file where Django class-based and generic views will be used to render the homepage:

 # payments/views.py from django.views.generic.base import TemplateView class HomePageView(TemplateView): template_name = 'homepage.html' 

The view exists but it doesn’t have a URL path yet. Let’s change this by creating a urls.py in our payments app where we’ll assign a path to our view:

 #payments/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.HomePageView.as_view(), name='homepage'), ] 

At this point, our app is good enough to be viewed on the browser. Let’s synchronize the changes we’ve made so far to our database and start the app on our local server:

 # use the migrate command to sync to your database (rave-checkout-python) $ python manage.py migrate # start a local webserver with the runserver command (rave-checkout-python) $ python manage.py runserver 

This starts up your app on http://127.0.0.1:8000/ . Navigate to this path on your browser and you should see your home page:

Integrate Rave

The second phase of building this app will be to integrate Rave into the app. Head on to Rave’s website and sign up for an account. On your dashboard, first switch from live mode to test mode then navigate to Settings > API and get your API keys: Copy your public and secret keys and paste them at the bottom of your settings.py file. Be sure to include the inverted commas:

 #settings.py RAVE_PUBLIC_KEY = 'YOUR PUBLIC KEY HERE' RAVE_SECRET_KEY = 'YOUR SECRET KEY HERE' 

Building the checkout form

 form> script src="https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js">/script> h3>SUPPORT NATURE WITH AS LOW AS $1/h3> button type="button" onClick="payWithRave()">Donate Here/button> /form> script> const publicKey = ">"; function payWithRave()  var x = getpaidSetup( PBFPubKey: publicKey, customer_email: "user@example.com", amount: 1, customer_phone: "234099940409", currency: "USD", txref: "rave-123456", custom_title: "Wildlife Park", onclose: function() <>, callback: function(response)  var txref = response.tx.txRef; console.log("This is the response returned after a charge", response); x.close(); > >); > /script> 

In the above template, you’ll notice there’s a << key >> attribute assigned to the publickey constant. It should hold the value of our Rave public key. Let’s update its value in views.py :

 # payments/views.py from django.conf import settings from django.views.generic.base import TemplateView class HomePageView(TemplateView): template_name = 'homepage.html' def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['key'] = settings.RAVE_PUBLIC_KEY return context 

Hit the refresh button and a basic HTML page that we can work with comes up: Click on the Donate Here button and a modal customized by Rave opens up for you to make payment: Make a test payment by using one of Rave’s test cards here. Let’s use 5531 8866 5214 2950 , ensure that the expiry date and CVV number are correctly inputted as well. If prompted for an OTP or PIN, use the specified values in the list of cards: To confirm that payment was successful, head on to your Rave dashboard and click on Transactions to access your transaction history:

Payment verification from the user’s end

Sure our merchants can tell that payments are being made to their Rave account but how can a user tell that their payment was successful? Let’s create a page that displays a success message to a user whenever they make a successful payment. In the templates folder, create a new file success.html :

# templates/success.html h3>Your payment was successfulh3/> 

 #payments/views.py from django.shortcuts import render from django.conf import settings from django.views.generic.base import TemplateView class HomePageView(TemplateView): template_name = 'home.html' def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context['key'] = settings.RAVE_PUBLIC_KEY context['logo'] = settings.WILDLIFE_LOGO return context # create the view here class Success(TemplateView): template_name = 'success.html' 

 #payments/urls.py from django.urls import path from . import views urlpatterns = [ path('success.html', views.Success.as_view(), name='success') #add this line, path('', views.HomePageView.as_view(), name='home'), ] 

 callback: function(response)  var txref = response.tx.txRef; console.log("This is the response returned after a charge", response); if ( response.tx.chargeResponseCode == "00" || response.tx.chargeResponseCode == "0" )  document.location.href = "success.html" // redirect to a success page > else  // redirect to a failure page. > x.close(); > 

Seems we’re good to go. Let’s make a test payment and see what the flow looks like:

Summary

In a more practical scenario, we would use a more secure connection and also be more careful with handling our API keys by storing them securely in environment variables. Should you need the source code of this demo, you can find it here.

Источник

Success Page Format Uses and Considerations

A powerful tool for Formsite form owners is the Success Page. Choosing from the variety of formats, the form owner can show a basic message, add custom HTML and scripts, or redirect the visitor to a different place. The Success Page always appears after the form’s submission and there are three available formats.

The Success Page format

• Standard: Uses the form’s style settings for a matching success page
• Custom: Allows adding custom HTML and/or scripts
• Redirect URL: Accepts any properly-formatted URL

Success Page Considerations

Choosing the format depends on what needs to be done. For example, the majority of form owners can choose the Standard format Success Page. This format displays a basic success page with a customizable message. The colors, fonts, etc. are all supplied by the form styles, making for an identical-looking page.

The Custom Success Page format is used for a couple of reasons. If there is a need to display the success page with a custom style or custom HTML, use this format. Also, if any custom scripts or tracking codes need to appear, the Custom format allows for entering custom code.

For example, to add a custom script or tracking code to the Custom Success Page, follow these steps:

Create the visible part of the success page. Using the text editor lets form owners design the page, and the source code button shows the actual code.

The Redirect URL format lets form owners set a destination URL for the success page. This format is common with embedded forms to display a local success page rather than the Formsite-provided ones.

Other uses for the Redirect URL Success Page include:

• Connecting multiple forms and passing values using the Pre-populate link. Paste the Pre-populate link to another form and replace the default values with pipe codes.
• Restarting the form with some values retained to process another registration. Like the above example, this lets form visitors register multiple people with shared information. The Pre-populate link comes from this form, though.
• Sending the visitor to a destination for personalization or tracking purposes. The URL can be any properly-formatted URL and contain parameters to pass data. Using the pipe codes from the form lets form owners send any form data.

Recent Posts

Источник

Create Registration Successful Message In HTML and CSS

Hello Coders, A very warm welcome to Codewithrandom. Today we’ll see the building of the Registration Successful Message Using Html and CSS. When we are new to some social media sites or any type of website where we are surfing for the first time then we have to register ourselves and give some information such as First Name, Last Name, Email, Phone No, and Password of our choice.

Later on, it gives the message Signup Complete. Just like creating Google Account. Now we as Front-End Developers can build this thing using HTML & CSS. So after filling in the information and submitting the form if everything goes well then we get a successful signup message on the screen If anything goes wrong from the client side like a network issue or wrong information or from the server side then we get the error message displayed on the screen.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Let us see the building of the Registration Successful Message Using HTML.

Registration Successful Message HTML Code:-

The Hyper Text Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

All HTML documents must start with a document type declaration: .

The HTML document itself begins with and ends with .

The visible part of the HTML document is between and .Inside the body tag of the HTML main content of the website lies.

 
 
     
Success
 
 
 
Congratulations, your account has been successfully created.
 Continue 
 
 

In this HTML Code, We define an id as a card and animation in it as fade-in. And then in the tag we linked the path of the tick symbol and set the stroke, stroke width, and stroke limit. And defined the message. Let us have a look at the HTML Output. Before writing CSS for Sign Up Success Message.

HTML Output Registration Successful Message:

CSS Code Registration Successful Message:-

CSS stands for Cascading Styling Sheets. CSS is used for styling the layout of the website. Here we are using the basic concepts of the CSS like border-box and display property, and positioning property. The term ‘WebKit’ is used in the CSS syntax for rendering content in Safari and Chrome browsers.

Webkit code may need to be added in CSS to ensure it renders correctly on Chrome and Safari due to the lack of cross-compatibility. These are the vendor-prefixed properties offered by the relevant rendering engines ( -WebKit for Chrome, Safari; -Moz for Firefox, -o for Opera, -ms for Internet Explorer).

In this snippet we have given the background color in the body, And then we have included the message and tick symbol in the card and set the width, alignment, and Font Family.

#upper-side < padding: 2em; background-color: #8BC34A; display: block; color: #fff; border-top-right-radius: 8px; border-top-left-radius: 8px; >#checkmark < font-weight: lighter; fill: #fff; margin: -3.5em auto auto 20px; >#status < font-weight: lighter; text-transform: uppercase; letter-spacing: 2px; font-size: 1em; margin-top: -0.2em; margin-bottom: 0; >#lower-side

In this snippet, we have given the position of the card and the tick symbol and set it with the help of padding, background color, color, and some appropriate border.

#message < margin-top: -0.5em; color: #757575; letter-spacing: 1px; >#contBtn < position: relative; top: 1.5em; text-decoration: none; background: #8bc34a; color: #fff; margin: auto; padding: 0.8em 3em; -webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21); -moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21); box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21); border-radius: 25px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; >#contBtn:hover

In this final snippet, we design the button and the hover in it with position, color & border radius. And given the transition for the hover over the button. Let’s see the output.

Источник