2016-06-03 9 views
0

ich habe Button Streifen Zahlung in meinem E-Commerce, wie folgt aus:Laravel 5.1 - Benutzerdefinierte Taste STREIFEN Zahlung

<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> 

Ich möchte cuustom diese Schaltfläche mit CSS-Stil, ist das möglich? Wie kann ich benutzerdefinierte Skript mit CSS?

Vielen Dank für Ihre Hilfe!

Antwort

2

Sie können die Standardschaltfläche nicht mit CSS anpassen, aber Sie können stattdessen Ihre eigene Schaltfläche verwenden. Die Idee ist stattdessen zu verwenden. Sie haben etwas JavaScript-Code, der zu Ihrer Seite hinzugefügt werden muss, damit Sie einen Klick-Handler an Ihre eigene Schaltfläche anhängen können, die automatisch Checkout auslöst.

Sie können ein einfaches Beispiel sehen hier: http://jsfiddle.net/ra010dby/1/ aber die Idee ist, dass man so etwas tun würde:

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(); 
});