How do you integrate a payment gateway into a static site

-sidebar-toc>

The past was when static websites typically featured description and images of products which prompted users to purchase through email or by calling. Nowadays, customers anticipate a more dynamic shopping experience that includes robust ecommerce features. It streamlines the buying process, encouraging users to complete transactions via your website instead of looking at alternatives.

Getting started

Before diving into the steps of integrating a payment processor and checkout on your static site, let's establish the groundwork for a seamless and effective implementation.

1. Sign up for a PayPal account by selecting an account for business, since it's better for this type of tutorial. This kind of account is required to test the buttons you integrate. After signing up, add the details of your company and connect to a bank account. Once you have verified your account, you can gain API credentials via the PayPal Developer portal for use in the future.
2. Set up a Account with Stripe and enter your business as well as banking information. Stripe offers quick account activation, which is advantageous to this type of task. After your account has been activated, you can immediately access the Dashboard of Stripe. Here you will find your API key, a crucial part that you will need in the following steps.

Check out the static website sample

This tutorial makes use of a previously-existing static website that demonstrates the integration of PayPal and Stripe checkout capabilities. Despite its static content it is a replica of an online flower shop.

After deploying your site on  your home page. Hit the ORDER INQUIRY button.

Choose a product that is available on the Flowers Catalog page -- for example, the Turkish Rose.

This action takes you to the information about the product page. There, payment buttons to PayPal and Stripe are implemented.

How can you incorporate PayPal checkout into your static site

Incorporating an PayPal checkout to your site gives customers an encrypting and secure payment method and streamlines transactions, increasing the user experience. This feature can greatly improve your site's functionality and customer satisfaction.

Here's how you can integrate PayPal checkout in your site's design:

1. Log into the PayPal Developer Dashboard.
2. In the dashboard, go into the Apps & Credentials area. Switch on the Sandbox feature on after which select Create App.
3. In the form, give your app a name (e.g. Gateway Demo). Click to select     Merchant    Click and type     Create App    .

1. Copy the     Client ID    from the     API credentials    A section to come back later and make a PayPal check-out button.

1. Then scroll down to look over other configurations. These default settings are sufficient for this tutorial. Simply click     Keep the changes    .

1. Next, integrate PayPal checkout in your website's static. Make a button for checkout using PayPal's     alternative payment alternative payment method (APM) the JavaScript SDK    . It lets you integrate various payment methods on a static website without the need to set up an application backend. Include the below JavaScript code to your     product.html    File just prior to closing

tag. Replace     YOUR_CLIENT_ID    with your using your PayPal using your PayPal. It is also possible to update your PayPal Client ID.     USD    currency with the currency that your PayPal account accepts.

 
 
 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 configures the transaction details, such as the price of purchase (1.00 USD, in this instance).
• "onApprove" -- Handles the transaction's approval, taking the money and showing successful message to the purchaser. In the example code we're using alert() function. alert() function.

Finally, the render function specifies that the PayPal button should render inside the existing

with the ID paypal-button-container.

You now have PayPal in your website's static pages.

How to integrate Stripe Checkout into your static website?

Stripe is an extensively used technology platform that offers payment processing solutions for businesses that are of any size. Here is how to add Stripe payment to your static website:

1. Before implementing using the Stripe payment button you can manage products and prices via an API or     Stripe dashboard    . For the dashboard to be used, open it, select     Test mode     And click     Product Catalogue    .

1. Click to     + Add Product    Press the button to start the     Include a product     form.

1. Fill in the information about your product's name and address into the following fields:

• 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: USD (or the currency you prefer)

1. Click to add product.
2. In the     Catalogue of products    page's list, select 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 verify the quantities     1    .

1. Click     Create link    .

1. on the     Payment Link    Page, click     Buy button    .

1. Then the     Buy button    The panel will appear, and you'll be able to see the code that was generated for the check out button. Select the     Button    layout, turn on the     Text of the button to change    on, and click, then "Buy with Stripe" in the search box.     Text for the Change button     field. Then, click     Copy code and save changes    to copy the generated code to your computer's clipboard.

1. Paste the code copied in the sample code's     product.html    files prior to the closing    tag (between tags) (between     STRIPE BUTTON BEGIN    and     STRIP BUTTON END    comments), similar to 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, deploy the static site code to your static site hosting environment.

Test the checkout process

Go to the static demo's product details page. Ensure the Stripe and PayPal buttons are visible. Stripe buttons display correctly.

Click on the PayPal checkout button. The button should display a login dialog box where the customer authenticates through PayPal to make their purchase.

If you have login problems during this time this could be because you are testing using an account that is personal rather than a business one.

Alternatively, customers can choose the PayPal Credit Card as well as Credit Card button. Select that option to open the box. Enter some account details.

PayPal should present your order and account details. Select Complete Purchase.

When PayPal accepts the transaction PayPal's JavaScript code will display an alert advising you that the transaction is completed. This alert is for reasons of development and for debuggingnot to be used for production codes.

To verify that transactions, log into your PayPal business dashboard. Select the Activity tab and then All Transactionsto show a detailed list of all the transactions that have occurred in recent time.

The flower website's product.html page, it is possible to check out the Stripe checkout flow by clicking the Buy using Stripe button. The action will open the Stripe dialog box that displays information about the item and payment options. These include Google Pay, Link, and credit card payments.

For demonstration purposes, choose Google Pay. An interface prompts for confirmation of your purchase with Google Pay with a card on your list, for example one you have saved Mastercard.

Click Pay. If it is successful, Stripe presents the customer with a purchase confirmation.

In your Stripe Dashboard, select in the Dashboard, click on the Payments tab. It shows the details of your transaction including the amount, currency, description of the transaction, date, and customer.

What can you do to fix the process of checkout

Below are a few troubleshooting tips to diagnose and solve the problems you encounter during test of checkout:

• Fix the payment gateway configuration.
• Make sure that the browser of the customer is compatible.
• Apply proper error handling.
• Check out the checkout procedure in multiple environments.
• Use logging and monitoring techniques.

Summary

Now you've integrated checkout buttons to PayPal and Stripe payment gateways into a flower sample shop that's hosted using . The same techniques can be used to add payment options to your other static websites, encouraging clients to buy your goods and increasing sales.

   Transform your static site into a dynamic experience with payment gateways like PayPal and Stripe. What other payment gateway do you prefer or have used before? Let us know in the comments section below.

Jeremy Holcombe

Content & Marketing Editor , WordPress Web Developer, and Content Writer. Outside of all things WordPress I like the beach, golf, and watching movies. Additionally, I'm tall and have issues ;).

•                 Website                                          
•                 LinkedIn