Creating a unique button for STRIPE payments in Laravel 5.1

Question

Creating a unique button for STRIPE payments in Laravel 5.1

I have a Stripe payment button in my ecommerce website that looks like this:

<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_yNuawoy0jUqj1GC14jwcQR5d"
data-amount="{{ $total * 100}}"
data-name="dixard"
data-description="Widget"
data-image="https://s3.amazonaws.com/stripe-uploads/acct_14s03fK9wMx3sd9Bmerchant-icon-1416180891533-icona.jpg"
data-locale="auto"
data-currency="eur"
data-id="stripe">
</script>

I am interested in customizing this button using CSS. Is it possible to do so? How can I customize the script with CSS?

Thank you for your assistance!

javascript css laravel stripe-payments

Answer 1

Answer №1

If you want to style the default button using CSS, unfortunately, that is not possible. However, you can create your own custom button and integrate it with Stripe's Custom Checkout feature. This involves adding some JavaScript code to your webpage to handle the click event on your custom button, which will then trigger the Checkout process.

For a simple example, you can check out this demo: Custom Checkout Demo. The basic idea is to follow a similar approach as shown below:

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  token: function(token) {
      $("#stripeToken").val(token.id);
      $("#stripeEmail").val(token.email);
      $("#myForm").submit();
  }
});

$('#customButton').on('click', function(e) {
  var amount = $("#amount").val() *100;
  // Initiate Checkout process with additional options
  handler.open({
    name: 'Demo Site',
    description: '2 widgets ($20.00)',
    amount: amount
  });
  e.preventDefault();
});

Answer 2

If you want to style the default button using CSS, unfortunately, that is not possible. However, you can create your own custom button and integrate it with Stripe's Custom Checkout feature. This involves adding some JavaScript code to your webpage to handle the click event on your custom button, which will then trigger the Checkout process.

For a simple example, you can check out this demo: Custom Checkout Demo. The basic idea is to follow a similar approach as shown below:

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  token: function(token) {
      $("#stripeToken").val(token.id);
      $("#stripeEmail").val(token.email);
      $("#myForm").submit();
  }
});

$('#customButton').on('click', function(e) {
  var amount = $("#amount").val() *100;
  // Initiate Checkout process with additional options
  handler.open({
    name: 'Demo Site',
    description: '2 widgets ($20.00)',
    amount: amount
  });
  e.preventDefault();
});

Creating a unique button for STRIPE payments in Laravel 5.1

Answer №1

Similar questions

span tag used within a Twitter Bootstrap 2 modal

I am eager to develop a Loopback model tailored specifically for handling this JSON data

Why does i18next only function on http://localhost:3000/de (landing page) in NextJS and not on http://localhost:3000/de/about?

verifying changes in data with ReactJS

Deactivating an asp.net label using client-side scripting

Encountering issues with browser tabs and Socket.IO

The CSS Grid does not align properly in the horizontal direction when displayed on mobile devices

Tips for integrating CSS keyframes in MUI v5 (using emotion)

the attempt to substitute an image with a canvas is unsuccessful

Ionic - Landscape Mode Causing Alignment Distortion

Issue with ReactJS and Material UI: FlexGrow functionality malfunctioning

Scrollable panel feature in Flexbox

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

Is my class more specific than my ID when using the parent ID and descendant combinator in CSS specificity?

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Issues with z-index in a multi-column menu using React-Router are causing unexpected behavior

Searching for repeated values across disparate object fields?

Utilize jQuery to animate the hiding of my right sidebar

Trouble with implementing useEffect to assign value to TextField

Sometimes, IE8 fails to load CSS files properly