Cretezy / braintree-web-drop-in-react

React component for Braintree Web Drop-In (v3)
MIT License
71 stars 22 forks source link

instance.clearSelectedPaymentMethod() is not clearing the selected option #302

Open akhilathinkster opened 3 years ago

akhilathinkster commented 3 years ago

Having problem using clearSelectedPaymentMethod :

"braintree-web": "^3.54.2",
 "braintree-web-drop-in": "1.26.0",
 "braintree-web-drop-in-react": "^1.1.0",

And I am trying to clear the selected option over a button like this. In render:

                <DropIn
                    options={{
                      authorization: clientToken,
                      paypal: { flow: "vault" },
                      paypalCredit: { flow: "vault" },
                      googlePay: {
                        transactionInfo: {
                          totalPriceStatus: "FINAL",
                          totalPrice: "0",
                          currencyCode: "USD",
                        },
                      },
                      applePay: {
                        flow: "vault",
                        displayName: "My Store",
                        paymentRequest: {
                          total: {
                            label: "My Store",
                            amount: "0",
                          },
                          // We recommend collecting billing address information, at minimum
                          // billing postal code, and passing that billing postal code with all
                          // Apple Pay transactions as a best practice.
                          requiredBillingContactFields: ["postalAddress"],
                        },
                      },
                      preselectVaultedPaymentMethod: false,
                      paymentOptionPriority: [
                        "applePay",
                        "paypal",
                        "paypalCredit",
                        "googlePay",
                      ],
                    }}
                    onInstance={(instance) => (this.instance = instance)}
                    onNoPaymentMethodRequestable={
                      this.onNoPaymentMethodRequestable
                    }
                    onPaymentMethodRequestable={() =>
                      this.onPaymentMethodRequestable(event)
                    }
                    onPaymentOptionSelected={this.onPaymentOptionSelected}
                    onClearSelectedPaymentMethod={() => this.clearSelectedPaymentMethod()}
                  />

                  <button onClick={this.clearSelectedPaymentMethod}>Clear</button>

clearSelectedPaymentMethod : I defined like this.

clearSelectedPaymentMethod(e) {
      this.instance.clearSelectedPaymentMethod();
   }

so the Options appear like this.

Screen Shot 2021-06-17 at 11 18 04 AM

After I click on any one option:

Screen Shot 2021-06-17 at 11 19 11 AM

Then after I click on the clear button doesn't reset the options back to the first image.

Can you help me, please? Thank you.