search

kraffslol / react-native-braintree-xplat

Cross-platform Braintree module for React Native
MIT License
81 stars 121 forks source link

Store payment data into braintree #89

Open ajkhatibi opened 6 years ago

ajkhatibi commented 6 years ago

Hi, could you, or anyone who has used this, provide maybe some examples on how to implement this? To be able to store a users payment data so that they don't have to re-enter it every time. thanks!

serialbandicoot commented 6 years ago

I'm still getting my head around this library, however I presume your referring to the Braintree Vault.

If so when you request a client_token you also provide the customer_id and the drop_in_ui will automatically offer the previously used payment details.

get "/client_token.json" do
  { client_token: gateway.client_token.generate(
      :customer_id => 736390368
    ) }.to_json 
end

image

gajjartejas commented 6 years ago

Hello @serialbandicoot ,

I am a beginner! Can you paste the complete code? It will be helpful.

serialbandicoot commented 6 years ago

@gajjartejas - If you look over the docs. https://developers.braintreepayments.com/start/hello-server/ruby, this explains it way better than I can. 👍

You can change your preferred lang, I just chose Ruby...

When the client SDK gets the @client_token, you pass into this the customer_id, as long as Braintree is aware of the ID then the client SDK will display as above in the image.

To test this out, manually go into Braintree and create a New Customer in the Vault and from here you can copy the customer_id into the token request.

Make sure your not just hardcoding the token as with the examples given, this will more than likely give you a default Braintree one. It took me by surprise at first but the token contains information, which will means the app will show different fields etc. based on your Braintree settings.

In a production type setup, when you create the order for the first time, you can return the customer_id from the response object and store the customer_id. Passing it back in when you require it...

Hope that helps!