reggie3 / react-native-webview-braintree

React Native Braintree payments component that has no native code
MIT License
14 stars 7 forks source link

How to handle payment method when fails #4

Open PaddyLock opened 5 years ago

PaddyLock commented 5 years ago

Hi, In my implementation after card details have been entered and the nonce returned, if there is an error when creating the payment, the payment method remains in the braintree UI. How should the user proceed? Should they be asked to re-enter card details? how should the handling of removing the old payment method from the UI be done, and the submit button be shown? The existing payment method that still shows cannot be re-used as the payment method nonce can only be used once.

At the moment I have this in renderButton():

else if (this.state.currentPaymentStatus === "PURCHASE_REJECTED") {
            return (
                <div>
                    <div id='purchase-reject-message' style={{marginBottom: "5px"}}>
                        There was a problem with your purchase, please choose another way to pay, and re-enter your card details.
                    </div>
                        <div
                        id="submit-button"
                        onClick={this.handleSubmitPurchaseButtonClicked}
                        style={{borderRadius: "2px", padding: "5px 10px 5px 10px", backgroundColor: "#337ab7", fontSize: "1.25em", color: "white", fontFamily: "arial", textAlign: "center"}}
                    >
                        Submit Purchase
                    </div>
                </div>
            )
        }
        else {
            return (
                <div
                    id="submit-button"
                    onClick={this.handleSubmitPurchaseButtonClicked}
                    style={{borderRadius: "2px", padding: "5px 10px 5px 10px", backgroundColor: "#34498e", fontSize: "1.25em", color: "white", fontFamily: "arial", textAlign: "center"}}
                >
                    Submit Purchase
                </div>
            )
        }

Thanks