CODEWITHSUNDEEP
javascriptcsslaravelstripe-payments
Diego Cespedes
Diego Cespedes

Reputation: 1353

Laravel 5.1 - Custom button STRIPE payment

i have button of Stripe payment in my ecommerce, 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 would like cuustom this button with css style, is this possible ? how can i custom script with css?

Thank you for your help!

Upvotes: 0

Views: 354

Answers (1)

koopajah
koopajah

Reputation: 25552

You can't customize the default button with CSS but you can instead use your own button. The idea is to use Custom Checkout instead. You'll have some Javascript code to add to your page so that you can attach a click handler to your own button that will trigger Checkout automatically.

You can see a basic example here: http://jsfiddle.net/ra010dby/1/ but the idea is that you'd do something like this:

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;
  // Open Checkout with further options
  handler.open({
    name: 'Demo Site',
    description: '2 widgets ($20.00)',
    amount: amount
  });
  e.preventDefault();
});

Upvotes: 2

Related Questions