What is the best way to integrate an online payment system into the static website

-sidebar-toc>

The past was when static websites usually featured descriptions and pictures of items that prompted users to purchase through the mail or via phone. Today, consumers expect an enhanced shopping experience that includes robust ecommerce features. It streamlines the buying process by encouraging customers to finish transactions on your site rather than looking for alternatives.

Getting started

Before we get into the process of integrating a processor for payments and checkout feature on your static site, let's create the necessary foundations to ensure a smooth and efficient installation.

1. Sign up for a PayPal account through selecting a PayPal account specifically for business use, because it's best to choose this kind of instructional. This kind of account will be required for testing your integration of buttons. Once you have signed up, fill in the details of your company and then connect it to a bank account. After verifying your account, you can gain API credentials via your PayPal Developer Portal to use in the future.
2. Make an Account on Stripe and then enter your company and banking details. Stripe offers quick account activation, which can be beneficial to this kind of task. When your account is activated, you are able to navigate to your the Dashboard of Stripe. Here you will locate the API key, a crucial element that you'll need in the following steps.

Visit the static site for a sample

This video tutorial utilizes a static website which previously existed which demonstrates the use of PayPal as well as Stripe checkout capabilities. Although it is a static site, it is a replica of an online flower shop.

When you've gotten your site up and running, it's time to add it to your homepage. Press the "ORDER INQUIRY" button.

Pick a bouquet that's accessible via the Flowers Catalog page such as, the Turkish Rose.

This action takes you to the item's page. The payment buttons on PayPal and Stripe are implemented.

How can you incorporate PayPal checkout in your site's static pages?

Integrating a PayPal checkout on your website provides customers with an encrypted and secure payment method and simplifies transactions, improving the customer experience. This feature can greatly improve your site's functionality and customer satisfaction.

Here's how to integrate PayPal checkout on your site's design:

1. Log in to PayPal Developer Dashboard. Paypal Developer Dashboard.
2. On the dashboard, you can go into the Apps & Credentials section. Switch on the Sandbox feature after which you can choose Create App.
3. On the form, you must give the app name (e.g. Gateway Demo). Select Merchant Click and type the word "Create App" .

1. Take your Client Identification of the API credentials. A section for you to return later to create an PayPal payment button.

1. After that, scroll down to examine other options. These default settings are sufficient for this tutorial. Just click Keep the changes .

1. Then, incorporate PayPal checkout in your website's static. Create a checkout button with PayPal's alternative payment option (APM) The JavaScript SDK . It lets you integrate various payment options on your static site, without the need to setup an backend for your application. Incorporate the below JavaScript code to your product.html File just before closing

tag. Replace your client ID by using the ID of your PayPal using your PayPal. Also, you can modify the information on your PayPal client ID. USD currency with the currency that your PayPal account can accept.

 paypal.Buttons( createOrder: function(data, actions) // Set up the transaction return actions.order.create( purchase_units: [ amount: value: '1.00' ] ); , onApprove: function(data, actions) // Capture the funds from the transaction return actions.order.capture().then(function(details) // Show a success message to the buyer alert('Transaction completed by ' + details.payer.name.given_name); ); ).render('#paypal-button-container'); 

This paypal.Buttons function defines two functions:

• createOrder modifies the transaction details, such as the price of purchase (1.00 USD, in this case).
• "onApprove" handles the approval of the transaction, transferring the cash and displaying a an approved message to the buyer. In the code example we're using the alert() function. alert() function.

The rendering function states that PayPal's PayPal button will render within the current

with the ID paypal-button-container.

It is now possible to add PayPal on your site's static pages.

How to integrate Stripe Checkout into your static website?

Stripe is a widely used technology platform which offers the ability to process payments for companies that are of any size. Here is how to add Stripe payment to your static site:

1. Prior to implementing the Stripe payment button it is possible to manage your products and prices via an API or the dashboard of Stripe . For the dashboard to be used, open it, select Test mode. And Click the Product Catalogue .

1. Click to Add to Add Hit the button to begin the Include a product application.

1. Input the details about your product's name and address in the fields below:

• Name: Turkish Rose
• Description It is an exquisite Turkish rose.
• Image: (Upload the sample imagesturkishrose.png file)
• Model of payment: One-off
• Amount: $1.00
• Currency Currency: USD (or the currency you prefer)

1. Click to add product.
2. On the Catalogue of items section, click the Turkish Rose product.

1. In the product Pricing in the section "Sections Click to open the section. Create payment link . Examine the options for products and confirm the quantity 1. .

1. Click Create link .

1. On the Pay Link Page, click on the Buy button .

1. And then it will appear as the Purchase button appears. The screen will then appear, and you'll be able to see the generated code for the check out button. Click on the button layout, toggle the Text of the button to turn by clicking to select "Buy through Stripe" within the box for searching. Text for the"Change" button field. Click Copy code and save changes to copy the generated code onto your computer's clipboard.

1. Copy the copied code into the sample's product.html files prior to the closing   tag (between tags) (between STRIPE BUTTON BEGIN and STRIP BUTTON the END comments) like PayPal.

 async src="https://js.stripe.com/v3/buy-button.js"> buy-button-id="BUY_BUTTON_ID" publishable-key="PUBLISHABLE_KEY" > 

When you're done with implementing the PayPal and Stripe checkout buttons then you can deploy the static website code on your static site hosting environment.

Try the checkout procedure

Go to the static demo's details page. Ensure the Stripe as well as PayPal buttons are displayed. The Stripe buttons are displayed correctly.

Click on the PayPal checkout button. It should open an authentication dialog box in which customers authenticate themselves through PayPal to complete their purchase.

If you have login problems in this period, it may be due to you testing using an account that is personal rather than a business one.

Alternately, users can select the PayPal Credit Card as well as Credit Card button. Choose that option to access the box. Enter some account details.

PayPal must present your purchase along with your account details. Click Complete Purchase.

When PayPal accepts the transaction PayPal's JavaScript code will display an alert advising your that the payment has been successfully completed. This alert is for reasons of debugging and is not intended for use in production code.

To confirm that the transactions have occurred are legitimate, sign in to your PayPal company dashboard. Click on the Activity tab, and select All Transactionsto show a detailed overview of the various transactions which have taken place in the recent time.

When you visit the website's product.html page, allows you to check out the process of paying with Stripe by clicking the Buy with Stripe button. The action will open the Stripe dialog box, which shows details about the product and payment options. This includes Google Pay, Link, and credit card payment.

For demonstration purposes, choose Google Pay. An interface prompts for confirmation of your purchase with Google Pay with a card that you have on hand like the one you've saved Mastercard.

Select for Pay. If it is success, Stripe presents the customer with a confirmation of purchase.

On your Stripe Dashboard, select in the Dashboard Click on the Payments tab. It will display the specifics of your transaction such as the amount, currency, description of the transaction, date as well as the customer.

What are you able to do to improve the checkout process?

Here are a few troubleshooting tips to diagnose and fix the issues that you face during the test of checkout:

• Change the configuration of the payment gateway.
• Verify that the browser used by the customer is compatible.
• Apply proper error handling.
• Make sure you go through the checkout procedure for different locations.
• Utilize monitoring and logging techniques.

Summary

You've now integrated checkout buttons for PayPal and Stripe payment gateways in a floral sample shop that's hosted using . The same techniques can be used to add payment options to your static sites to encourage customers to purchase your products and boosting the sales.

     Make your website more dynamic and transform it into an interactive experience by using payment gateways such as PayPal and Stripe. What other payment gateway do you like or have used before? Please let us know in the comment section below.

Jeremy Holcombe

Content and Marketing Editor WordPress Web Developer, and Content writer. In addition to WordPress I love golf, beaches and movies. In addition, I'm tall and have issues ;).

•       Website
•       LinkedIn

Article was first seen on here