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

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 Stripe payment gateways to 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 site code 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 portal for 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 infrastructure provides 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 INQUIRY button.

A flower shop web page with an image of a bouquet, an order inquiry button, and links to pages and the shopping cart
Sample site home page with an ORDER INQUIRY button.

Select an available product on the Flowers Catalog page — the Turkish Rose.

The catalog of flowers, with various bouquets, their sizes, and prices, each with a shopping cart icon to add it to the cart
Sample site catalog page with various flower options.

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

Options for ordering the Turkish Rose. There are size and color options, choice of delivery by courier or pick up, and the price
Sample site’s product page.

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 & Credentials section. Turn the Sandbox mode on, then click Create App.
  3. In the form, give your app a name (e.g. Kinsta Gateway Demo). Select Merchant as the type and click Create App.

    The Create App form on PayPal with a field for the app name, radio buttons to choose the type as merchant or platform, a field for the sandbox account
    PayPal’s Create App form.
  4. Copy the Client ID from the API credentials section for later to make a PayPal checkout button.

    Credentials on PayPal for the Kinsta Gateway Demo app. The API credentials section has the app name, client ID, and secret key. The sandbox account info has the URL, region, email, and password
    PayPal app credentials.
  5. Scroll down the application’s page to review other settings. The defaults are fine for this tutorial. Click Save Changes.

    PayPal's app features with checkboxes under Accept payments for Vault, Native Checkout SDK, Subscriptions, Invoicing, and PayPal Here. Checkbox options under Other features include Payouts, Customer disputes, Log in with PayPal, and Transaction search
    PayPal’s app features.
  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.html file just before the closing </body> tag. Replace YOUR_CLIENT_ID with your PayPal Client ID. You may also need to replace the USD currency with the currency your PayPal account accepts.
    <!-- PAYPAL BUTTON SCRIPT-->
    <script   
    src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
    data-sdk-integration-source="button-factory"></script>
    <script>
    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');
    </script>
    <!-- PAYPAL BUTTON SCRIPT-->

    The paypal.Buttons function 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 render function 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.

    Product catalog page with options to list all, available, or archived products and a button to add a product.
    Stripe Product catalog page.
  2. Click the + Add Product button to open the Add a product form.

    Add a product options with fields for name and description, image details with the option to remove, a link for more options, buttons to choose recurring or one-off, a field for amount and drop-down box for currency, and a link for advanced pricing options
    Stripe’s Add a product page.
  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.png file)
    • Payment model: One-off
    • Amount: $1.00
    • Currency: USD (or the currency of your choice)
  4. Click Add product.
  5. In the Product catalog page’s list, select the Turkish Rose product.

    Product catalog listings including the Turkish Rose, its thumbnail image, price, currency, creation date and updated date
    Stripe Product catalog details.
  6. In the products Pricing section, click Create payment link. Review the product options and ensure the quantity is 1.

    Details of the Turkish Rose product including price, currency, updated date, name, description, and image, and the pricing options including the app ID and a button to create a payment link
    Stripe product details for the Turkish Rose.
  7. Click Create link.

    Options to create a payment link. Includes the product, a field for quantity and checkbox to let customers adjust the quantity, a link to add another product, options to collect customer addresses, phone numbers, and custom fields, a menu for advanced options, and a preview of how the payment page will look for that product including Apple Pay details
    Stripe product payment details.
  8.  On the PAYMENT LINK page, click Buy button.

    Payment link details including the product name and price and the option to copy the payment link, QR code, buy button, and others
    Stripe PAYMENT LINK page details.
  9. When the Buy button panel appears, you can view the generated code for the checkout button. Choose the Button layout, turn the Change button text on, and type “Buy with Stripe” in the Change button text field. Then, click Save changes and copy code to copy the generated code to your operating system’s clipboard.

    Buy button options with code visible on the left, and a preview on the right. Options include configuring it as a card or button, the language, a toggle to change button text, and a field to type the text
    Stripe’s form to create a buy button.
  10.  Paste the copied code into the sample code’s product.html file before the closing </body> tag (between the STRIPE BUTTON BEGIN and 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.

The sample site's checkout page shows image, name, price, and size, color, and delivery options, the user can click PayPal, Debit or Credit Card Powered by PayPal, or Buy with Stripe
Sample site product page with checkout buttons for PayPal and Stripe.

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

Options to log into PayPal or create an account
PayPal flow with options to log in or register.

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 Card button. Click that option to view the dialog box. Enter some account details.

Options to pay with a debit or credit card, including a country or region menu, a field for email, a phone type menu and field for the number, radio buttons to choose debit or credit, and a field for the card number
PayPal flow with options to use a debit or credit card.

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

Payment details with cost, ship to address and a link to change, list of debit or credit cards to choose, a checkbox to make it the preferred method, a link to add a card, and a button to complete purchase
PayPal flow with the purchase confirmation.

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.

A popup notifies the user that the transaction completed
PayPal flow with a transaction completion alert.

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

Details of the transactions on PayPal including the date, type, name, payment, gross amount, fee, net amount, and a menu for actions like add tracking
PayPal business transaction details.

On the flower site’s product.html page, 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.

Stripe shows the product information and options for Google Pay and Pay with link
Stripe flow payment options.

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.

Google Pay payment details including a dropdown menu to choose the card, the price, and a pay button
Stripe flow when using Google Pay.

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

Purchase confirmation from stripe. On the left are the product information. On the right is a confirmation
Stripe purchase confirmation.

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

List of payments via stripe, including the amount, currency, success, description, customer, and date
Stripe payment details page.

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.

The post How to integrate a payment gateway and checkout with your static site appeared first on Kinsta®.

版权声明:
作者:感冒的梵高
链接:https://www.techfm.club/p/103076.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>