How to integrate a payment gateway and checkout with your static site (2024)

In the past, static websites commonly featured product images and descriptions, prompting customers to order via email or phone. Today, however, customers anticipate a more dynamic experience with robust ecommerce functionalities. This streamlines the purchasing process, encouraging users to complete transactions on your site instead of exploring competitor options.

Adding a payment gateway and checkout to your static site is quite straightforward. Application programming interfaces (APIs) and serverless architectures let you embed ecommerce features into static websites, enabling your business to accept transactions directly.

This tutorial explores adding PayPal and Stripepayment gatewaysto a flower delivery shop’s static site. Follow the steps to learn how to add these functions to your website and open new opportunities to drive online sales.

Getting started

Before diving into the steps for integrating a payment gateway and checkout to your static site, let’s set the foundation for a smooth and successful implementation.

1. Download and deploy this sample static sitecode to Kinsta’s static site hosting.
2. Sign up for a PayPal account, opting for a business account, as it’s more suited for this tutorial. This type of account is necessary for testing the buttons you integrate. After signing up, add your business information and link a bank account. Upon verification of your account, you can obtain API credentials from the PayPal Developer portalfor later use.
3. Create a Stripe account, entering your business and banking details. Stripe offers quick account activation, which is advantageous for this project. Once your account is active, you can immediately access the Stripe dashboard. This is where you retrieve your API key, a crucial component needed in subsequent steps.

Review the sample static site

This tutorial uses a pre-existing static site to showcase integrating PayPal and Stripe checkout capabilities. Despite its static content, the sample website mimics an online flower shop.

Kinsta’s static site hosting infrastructureprovides an efficient environment for deploying and testing PayPal and Stripe checkout features to create a more sophisticated and engaging static website.

After deploying your site on Kinsta, go to the home page. Click the ORDER INQUIRYbutton.

Select an available product on the Flowers Catalogpage — the Turkish Rose.

This action takes you to the product details page, where the payment buttons for PayPal and Stripe are implemented.

How to integrate PayPal checkout into your static site

Adding a PayPal checkout offers your customers a secure and trusted payment method and streamlines the transaction process, enhancing user experience. This integration can significantly boost your site’s functionality and customer satisfaction.

Here’s how to integrate PayPal checkout into your static site:

1. Log in to the PayPal Developer Dashboard.
2. On the dashboard, navigate to the Apps & Credentialssection. Turn the Sandboxmode on, then click Create App.
3. In the form, give your app a name (e.g. Kinsta Gateway Demo). Select Merchantas the type and click Create App.

   

   See Also

   What Is a Payment Gateway? Plus 5 of the Best Payment Gateways ComparedBest WooCommerce Payment Gateways for WordPress

4. Copy the Client IDfrom the API credentialssection for later to make a PayPal checkout button.

   

5. Scroll down the application’s page to review other settings. The defaults are fine for this tutorial. Click Save Changes.

   

6. Next, integrate PayPal checkout into your static site. Create a checkout button using PayPal’s alternative payment method (APM) JavaScript SDK. It lets you integrate various payment methods into a static site without setting up a back-end application. Add the following JavaScript code to the product.htmlfile just before the closing </body>tag. Replace YOUR_CLIENT_IDwith your PayPalClient ID. You may also need to replace the USDcurrency with the currency your PayPal account accepts.

   <!-- PAYPAL BUTTON SCRIPT--><script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD" data-sdk-integration-source="button-factory"></script><script>paypal.Buttons({createOrder: function(data, actions) {// Set up the transactionreturn actions.order.create({purchase_units: [{amount: {value: '1.00'}}]});},onApprove: function(data, actions) {// Capture the funds from the transactionreturn actions.order.capture().then(function(details) {// Show a success message to the buyeralert('Transaction completed by ' + details.payer.name.given_name);});}}).render('#paypal-button-container');</script><!-- PAYPAL BUTTON SCRIPT-->

   The paypal.Buttonsfunction defines two functions:

   • createOrder—Configures the transaction details, such as the purchase amount (1.00 USD in this case).
   • onApprove—Handles the transaction’s approval, capturing the funds and displaying a success message to the buyer. In the code above, we are using the alert() function.

   Finally, the renderfunction specifies that the PayPal button should render inside the existing <div>with the ID paypal-button-container.

   You now have PayPal integrated into your static site.

How to integrate Stripe Checkout into your static site

Stripe is a widely-used technology platform that offers payment processing solutions for businesses of all sizes. Here is how to add Stripe payment to your static site:

1. Before implementing the Stripe checkout button, you can manage products and prices via an API or the Stripe dashboard. To use the dashboard, open it, select Test mode, and click Product Catalog.

   

2. Click the + Add Productbutton to open the Add a productform.

   

3. Enter your product’s details in the fields as follows:
   • Name: Turkish Rose
   • Description: This is a beautiful Turkish Rose
   • Image: (Upload the sample imagesturkishrose.pngfile)
   • Payment model: One-off
   • Amount: $1.00
   • Currency: USD (or the currency of your choice)
4. Click Add product.
5. In the Product catalogpage’s list, select the Turkish Roseproduct.

   

6. In the products Pricingsection, click Create payment link. Review the product options and ensure the quantity is 1.

   

7. Click Create link.

   

8. On the PAYMENT LINKpage, click Buy button.

   

9. When the Buy buttonpanel appears, you can view the generated code for the checkout button. Choose the Buttonlayout, turn the Change button texton, and type “Buy with Stripe” in the Change button textfield. Then, click Save changes and copy codeto copy the generated code to your operating system’s clipboard.

   

10. Paste the copied code into the sample code’s product.htmlfile before the closing </body>tag (between the STRIPE BUTTON BEGINand STRIPE BUTTON END comments), similar to PayPal.

    <!-- STRIPE BUTTON BEGIN --><script> async src="https://js.stripe.com/v3/buy-button.js"></script><stripe-buy-button> buy-button-id="BUY_BUTTON_ID" publishable-key="PUBLISHABLE_KEY"></stripe-buy-button><!-- STRIPE BUTTON END -->

Once you are done implementing the PayPal and Stripe checkout buttons, deploy the static site code to your Kinsta static site hosting environment.

Test the checkout process

Open the static demo site’s product details page. Ensure the PayPal and Stripe buttons display correctly.

Click the PayPal checkout button. It should open a login dialog box where your customer will authenticate with PayPal to make their purchase.

If you encounter login issues at this stage, it might be due to testing with a personal account rather than a business one.

Alternatively, customers can choose the PayPal Debit or Credit Cardbutton. Click that option to view the dialog box. Enter some account details.

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

When PayPal approves the transaction, the client JavaScript code displays an alert informing you that the transaction is complete. This alert is for development and debugging purposes — you shouldn’t use it in production code.

To verify that transaction, open the PayPal for Business dashboard. Click Activity > All Transactions to show a detailed list of all recent transactions.

On the flower site’s product.htmlpage, you can also test the Stripe checkout flow by clicking the Buy with Stripe button. This action triggers the Stripe dialog box containing the product details and payment options, including Google Pay, Link, and credit card payments.

For demonstration purposes, choose Google Pay. A dialog box asks you to confirm the purchase using Google Pay with a card from your list, like a saved Mastercard.

Click PAY. If successful, Stripe presents the customer with the purchase confirmation.

In the Stripe Dashboard, open the Paymentstab. It shows the details of the completed transaction, including the amount, currency, description, customer, and date.

How to troubleshoot the checkout process

Here are some troubleshooting steps to diagnose and solve errors encountered during your checkout testing:

• Fix the payment gateway configuration.
• Validate your SSL certificate.
• Check the customer’s browser compatibility.
• Apply proper error handling.
• Test the checkout process in multiple environments.
• Use logging and monitoring techniques.

Summary

You’ve now integrated checkout buttons for PayPal and Stripe payment gateways into a sample online flower shop hosted with Kinsta. The same techniques can be used to add payment options to your other static websites, encouraging customers to purchase your products and boosting sales.

Kinsta’s static site hosting service offers a seamless playground for developers diving into the dynamic realm of ecommerce and payment integration. Its robust infrastructure ensures swift page loading, supporting a smooth online shopping experience.

Alongside the static site hosting service, Kinsta also offers an Application hosting service designed for more dynamic applications — like web applications that need server-side processing, database interactions, and other complex functionalities.

Transform your static site into a dynamic experience with payment gateways like PayPal and Stripe. Which other service do you prefer or have experience with? Share in the comments below.