Wie kombinieren Stripe Zahlung Bibliothek mit mehreren Button per Optionsfeld in HTML/JS

Question

Ich benutze Stripe-Bibliothek als meine Zahlungsoption, möchte ich eine einfache Auswahl mit Radio-Taste zwischen mehreren Tasten, wie ich sah Stripe-API gibt es keine Option, um andere Argumente innerhalb ihrer vorgeschlagenen Form zu übergeben.

zum Beispiel:

<form action="/tt-server/rest/billing/subscribe" method="POST"> 
     <script 
       src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
       data-key="pk_test_nz81cav6bbcEP4gxWxp1yFw7" 
       data-image="https://storage.googleapis.com/tt-images/company/img_2015111514124193.png" 
       data-name="myCompany" 
       data-description="Pro Subscription ($400 per month)" 
       data-panel-label="Subscribe" 
       data-label="Subscribe" 
       data-amount="400"> 
     </script> 
    </form> 

was ist der beste Weg, um mehrere Tasten und wählt zwischen ihnen mit einfachen Radiobutton wie zu machen:

<input type="radio" name="imgsel" value="subscribe" checked="checked" /> 

PS

es keine " Senden-Schaltfläche "in Form, diese Option ist in Stripe-Bibliothek implementiert.

Irgendwelche Vorschläge?

so etwas wie dieses oder mehr im Grunde:

https://www.formget.com/wp-content/uploads/2014/08/online-single-product-payment-form.gif

BR,

Answer 1

Sie einfach zusätzliche Eingabefelder in das Formular zur Kasse passieren kann. Diese werden automatisch mit dem Karten-Token übermittelt.

Ihr Code würde wie folgt aussehen:

<form action="/tt-server/rest/billing/subscribe" method="POST"> 
    <script 
      src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
      data-key="pk_test_nz81cav6bbcEP4gxWxp1yFw7" 
      data-image="https://storage.googleapis.com/tt-images/company/img_2015111514124193.png" 
      data-name="myCompany" 
      data-description="Pro Subscription ($400 per month)" 
      data-panel-label="Subscribe" 
      data-label="Subscribe" 
      data-amount="400"> 
    </script> 
    <input type="radio" name="imgsel" value="subscribe" checked="checked" /> 
</form> 

Answer 2

Hier ist, wie ich es tat

<script src="https://checkout.stripe.com/checkout.js"></script> 
<script> 

$().ready(function(){ 
    var ActiveStripeHandler= StripeCheckout.configure({ 
     key: "pk_test_XXXXXXXXXXXXXXX", 
     image: "https://stripe.com/img/documentation/checkout/marketplace.png", 
     locale: "auto", 
     token: function(token,args=null) { 
     // submit to your server 
     console.log(token,args); 
     } 
    }); 

    $('#submitButton').on("click", function(e) { 
     var opts= { 
        name: "Stripe.com", 
        description: "Annual", 
        zipCode: true, 
        billingAddres: true, 
        ing: "https://static.company.com/logo.png", 
        locale: "auto", 
        amount: 0 
       }; 

// HERE IS WHERE YOU CHECK THE RADIO BUTTON GROUP 'subscriptionType' 

     switch ($(\'input[name=subscriptionType]:checked\').val()){ 
     case "1": opts.description="Annual Subscription"; 
        opts.amount=42000; 
        ActiveStripeHandler.open(opts); 
        break; 

     case "2": opts.description="Monthly Subscription"; 
        opts.amount=4500; 
        ActiveStripeHandler.open(opts); 
        break; 

     default: alert("Sorry there was an error, please contact us for assistance. DISCOUNT CODE: CHKOUTERR_F9A0389A"); 
        break; 
     } 
    }); 

    window.addEventListener("popstate", function() { handler.close(); });  // Close Checkout on page navigation: 
}); 


</script> 

Grundsätzlich beträgt sie warten bedingt handler.open und das Ausfüllen der optionalen Werte zu nennen. Ich habe handler ActiveStripeHandler umbenannt, aber es ist die gleiche wie die handler Variable in Stripe Checkout Beispielen. ein

switch ($(\'input[name=subscriptionType]:checked\').val()){ ... }

Wo subscriptionType ist der Name der Radiobutton Gruppe

handler.open Wie auch immer, rufen, wenn die Schaltfläche geklickt vorlegen wird und tun. Ändern Sie einfach die Argumente, die Sie in handler.open setzen, und Sie werden es haben.