How Do You Accept Payments on Webflow?

Accepting payments on your Webflow website is a crucial step in turning your online presence into a fully functional e-commerce platform. With Webflow’s built-in integration with popular payment gateways, you can easily set up a seamless and secure payment process for your customers. In this tutorial, we will explore how to accept payments on Webflow using two popular payment gateways: Stripe and PayPal.

Setting Up Stripe Payments

If you’re looking for a versatile payment gateway with robust features and excellent developer tools, Stripe is an ideal choice. Follow these steps to integrate Stripe into your Webflow website:

Create a Stripe Account

To get started, head over to the Stripe website and create an account if you haven’t already. Once you’ve completed the signup process, log in to your Stripe dashboard.

Enable Webflow Integration

In your Stripe dashboard, navigate to the “Developers” section and select “Webhooks”. Click on “Add endpoint” and enter your Webflow website’s URL. This will allow Webflow to receive updates from Stripe regarding successful transactions.

Add Payment Button

In the Webflow Designer, drag and drop a button element onto your desired page. Customize it according to your design preferences.

Note: Ensure that you have set up proper styling for the button element using CSS classes or inline styles.

Add Custom Code for Payment Integration

In the Webflow Designer, click on the “Settings” tab in the right sidebar. Scroll down to “Custom Code” and click on “+ Add custom code“. In the “Head” section, paste the following code:

<script src="https://js.stripe.com/v3/"></script>
<script>
  var stripe = Stripe('YOUR_STRIPE_PUBLIC_KEY');
  var elements = stripe.elements();
  
  var style = {
    base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };
  
  var card = elements.create('card', { style: style });
  
  card.mount('#card-element');
  
  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });
  
  var form = document.getElementById('payment-form');
  
  form.addEventListener('submit', function(event) {
    event.preventDefault();
  
    stripe.createToken(card).then(function(result) {
      if (result.error) {
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.message;
      } else {
        stripeTokenHandler(result.token);
      }
    });
  });
  
  function stripeTokenHandler(token) {
    // Send the token to your server to charge the user
    fetch('/charge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token: token.id })
    })
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      if (data.success) {
        alert('Payment successful!');
      } else {
        alert('Payment failed.');
      }
    });
  }
</script>

Note: Replace ‘YOUR_STRIPE_PUBLIC_KEY’ with your actual Stripe public key, which can be found in your Stripe dashboard settings.

Create a Webflow Form

Below the custom code section, click on “+ Add field” and select “Form“. Customize the form fields as per your requirements, including the credit card fields. Assign the ID “payment-form” to the form element.

Add Error Messages Element

Drag and drop a div element below the form and assign it the ID “card-errors”. This element will display any errors that occur during payment processing.

Setting Up PayPal Payments

If you prefer to offer PayPal as an alternative payment method, Webflow allows easy integration with PayPal’s payment gateway. Follow these steps to set up PayPal payments on your Webflow website:

Create a PayPal Business Account

If you don’t have a PayPal business account yet, head over to PayPal.com and sign up for one. Once you’ve completed the signup process, log in to your PayPal business account.

Create a Payment Button in PayPal

In your PayPal dashboard, navigate to “Selling Tools” and select “PayPal buttons“. Click on “Create new button” and configure it according to your requirements. You can customize various options such as button style, payment amount, and currency.

Add PayPal Button Code to Webflow

In the Webflow Designer, drag and drop an “Embed” element onto your desired page. Paste the code generated by PayPal for your payment button into the Embed element.

Note: Ensure that you have set up proper styling for the Embed element using CSS classes or inline styles.

Publish Your Website

Once you have completed the above steps, publish your Webflow website to make your new payment options live. Test the payment process thoroughly to ensure everything is working as expected.

Now that you have successfully integrated both Stripe and PayPal into your Webflow website, you can start accepting payments from your customers with ease. Remember to regularly monitor your transactions and keep your payment gateway settings up to date for a seamless e-commerce experience on Webflow!