React Native Webview Braintree

A Braintree payment component with no native code for React Native apps.

Usage

<WebViewBraintree
    clientToken={this.state.clientToken}
    nonceObtainedCallback={this.handlePaymentMethod}
    navigationBackCallback={this.navigationBackCallback}
    paymentAPIResponse={this.state.paymentAPIResponse}
/>	

This component accepts the following props

• clientToken
• nonceObtainedCallback
• navigationBackCallback
• paymentAPIResponse

| Name | Required | Description | | ---------------------- | ------------- | ----------- | | clientToken | yes | Braintree client token used to create the dropin UI| | nonceObtainedCallback | yes | Function called once a Braintree payment nonce is obtained, the nonce value is passed to ehe function as the only parameter| | paymentAPIResponse | yes | A string indicated the success of the an API to Braintree transaction API. The string should be either "PAYMENT_SUCCESS" "PAYMENT_REJECTED"| | navigationBackCallback | no | Function that can be called in order to initiate navigation. This function will be called when the user clicks on a button labeled "Return to Shop" that appears after a rejected or successful purchase |

Example use of the paymentAPIResponse string

brainTreeUtils
    .postPurchase(nonce, this.props.cart.totalPrice, {})
    .then(response => {
        if (response.type === "success") {
            this.setState({ paymentAPIResponse: "PAYMENT_SUCCESS" });
            this.props.dispatch(actions.cartActions.emptyCart());
        } else {
            this.setState({ paymentAPIResponse: "PAYMENT_REJECTED" });
        }
});

Example Application

React Native Webview Braintree test application

TODOs

Integrate Paypal payments

LICENSE

MIT