Braintree gehostet Feld für zusätzliche CC

Question

I braintree Zahlung mit gehosteten Felder wie folgt festgelegt haben:

In JS-Datei:

braintree.setup(client_token, "custom", { 
     id: "my-sample-form", 
     paypal: { 
      container: "paypal-container" 
     }, 
     hostedFields: { 
      number: { 
      selector: '#my-credit-card-field', 
      }, 
      cvv: { 
      selector: '#my-security-code-field', 
      }, 
      expirationDate: { 
      selector: '#my-expiration-field', 
      }, 
      postalCode: { 
      selector: '#my-postal-code-field', 
      } 
     }, 
     }); 

ich keine Probleme haben, wenn die Einrichtung neuer Kunde versuchen, wenn sie benötigen, ihre CC Details zu füllen, aber wenn ich Setup bestehende Kunden versuchen, scheiterte die JS-Datei aufgrund von nicht vorhandenen #my-credit-card-field, etc ..

In meinem new.html.erb, ich habe so etwas wie dies:

<% unless current_user.has_payment_info? %> 
    <div id="my-credit-card" readonly>**** **** **** <%= @last_4_number %></div> 
<% else %> 
    <div id="my-credit-card-field"></div> 
    <div id="my-security-code-field"></div> 
    <div id="my-expiration-field"></div> 
    <div id="my-postal-code-field"></div> 
<% end %> 

So werde ich cc Details für neue Kunden fragen, und bestehende Kunden können ihre Zahlungsmethode Informationen speichern. Ich habe so etwas in meinem Controller:

def create 
    @amount = params[:slider] 
    @token = Braintree::Customer.find(current_user.braintree_customer_id).credit_cards.first.token 
    unless current_user.has_payment_info?  
    @result = Braintree::Transaction.sale(
      amount: @amount, 
      payment_method_nonce: params[:payment_method_nonce], 
      options: { 
       store_in_vault: true 
        }) 
    else 
    @result = Braintree::Transaction.sale(
      customer_id: current_user.braintree_customer_id, 
      amount: @amount, 
      payment_method_token: @token) 
    end 

if @result.success? 
#Some codes here 
end 
end 

Mein Problem:

Wenn ich meine ID my-credit-card-field gesetzt, für bestehende Kundenformular dann müssen sie die Details aufgrund hostedfields Selektor js füllen. Wenn ich keine Selektoren einstelle, dann gibt es Fehler in der JS-Datei. Gibt es eine bessere Möglichkeit, das Formular für bestehende Kunden zu erstellen, die ihre Zahlungsmethode bereits festgelegt haben?

Dank und jede Hilfe wird geschätzt!

Answer 1

Nun, Sie können eines von zwei Dingen tun.

Option 1: ein einfacher Hack.

Für die Zeiten, in denen Sie Braintree nicht brauchen, fügen Sie die div-Tags an einen Ort auf Ihrer Seite außerhalb Ihrer Form wie:

<div style="display:none" id="my-credit-card-field"></div> 
<div style="display:none" id="my-security-code-field"></div> 
<div style="display:none" id="my-expiration-field"></div> 
<div style="display:none" id="my-postal-code-field"></div> 

nun auf Seite laden, Braintree sie finden, und füllen Sie sie , aber nichts wird gesendet werden.

Natürlich, wenn Sie es brauchen, fügen Sie einfach nicht diese versteckten divs der Seite hinzu (da sie bereits im Formular vorhanden sind).

Option 2 (empfohlen): Teiltöne verwenden.

Für den Fall, dass Braintree nicht benötigt wird, ist es nicht nötig, das Javascript zu verwenden, oder? So können Sie Ihr Javascript in ein Teil verschieben, das nur bei Bedarf zur Seite hinzugefügt wird. Auf diese Weise versucht Braintree niemals, in diesem Fall den Aufruf zum Auffüllen der Divs zu machen, also keine Fehler. Schließen Sie einfach den Render-Aufruf in Ihre Bedingungsliste ein.

Während Option 1 sicherlich schneller ist, würde ich Option 2 empfehlen, da es wahrscheinlich der "richtige" Ansatz ist, und Sie vermeiden die Frage "Warum haben wir sein verstecktes div?" Auf der ganzen Linie, wenn Sie den Hack vergessen .