expo-braintree-drop-in

Expo integration for Braintree DropIn UI. Its implementation utilises 3D Secure transactions.

Currently supported payment methods are:

• Credit cards
• ApplePay
• GooglePay

Installation

Requirements

You must have an existing Expo project (>= 50.0)

Terminal

npm install @joinbubble/expo-braintree-drop-in

Configuration

Environment variables

Create an environment variable called BRAINTREE_MERCHANT_ID. (You do not need the prefix EXPO_PUBLIC) Use this variable to set your merchantId based on your environment.

IMPORTANT: Use a merchant id containing sandbox for your test environments for GooglePay to initialise with TEST.

ex eas.json:

{
  "build": {
    "development": {
      "env": {
        "BRAINTREE_MERCHANT_ID": "merchant.com.my_org.payment.sandbox"
      }
    },
    "production": {
      "env": {
        "BRAINTREE_MERCHANT_ID": "merchant.com.my_org.payment"
      }
    }
  }
}

Then declare expo-braintree-drop-in in app.config.js

// app.config.js

// add to the exported config
plugins: [
  // ...,
  [
    "@joinbubble/expo-braintree-drop-in",
    { braintreeMerchantId: process.env.BRAINTREE_MERCHANT_ID },
  ],
];

Usage

In this integration, we assume that you can already generate and fetch a client token

// CheckoutButton.tsx
import * as ExpoBraintreeDropIn from "@bubble/braintree-drop-in";

function CheckoutButton() {
  const [clientToken, setClientToken] = useState();

  useEffect(() => {
    (async () => {
      const res = await fecthClientToken();
      setClientToken(res.token);
    })();
  }, []);

  if (!clientToken) {
    return null;
  }

  return (
    <Button
      title="Show Braintree Drop-In"
      onPress={async () => {
        const payload = {
          givenName: "Jill",
          surname: "Doe",
          streetAddress: "555 Smith St",
          locality: "London",
          postalCode: "A1 1AB",
          email: "[email protected]",
          amount: 1.0,
        };

        const result = await ExpoBraintreeDropIn.showDropIn(
          payload,
          clientToken
        );

        console.log({ result });
      }}
    />
  );
}

result is a string that represents the payment nonce that you can send back to your server

If you need to perfom a verification on a vaulted card, use the verify method.

// CheckoutButton.tsx
import * as ExpoBraintreeDropIn from "@bubble/braintree-drop-in";

function CheckoutButton() {
  const [clientToken, setClientToken] = useState();
  const [cardToVerify, setCardToVerify] = useState();

  useEffect(() => {
    (async () => {
      const res = await fecthClientToken();
      const res2 = await fecthClientToken();

      setClientToken(res.token);
      setCardToVerify(res2.nonce);
    })();
  }, []);

  if (!clientToken) {
    return null;
  }

  return (
    <Button
      title="Verify a card via 3D Secure"
      onPress={async () => {
        const payload = {
          givenName: "Jill",
          surname: "Doe",
          streetAddress: "555 Smith St",
          locality: "London",
          postalCode: "A1 1AB",
          email: "[email protected]",
          amount: 1.0,
          // Add the nonce of the card that needs verification
          nonce: cardToVerify,
        };

        // Contact verify instead of showDropIn
        const result = await ExpoBraintreeDropIn.verify(payload, clientToken);

        console.log({ result });
      }}
    />
  );
}

result is also a string that represents the nonce that can be returned to your server.

References

• Braintree DropIn (IOS)
• Braintree DropIn (Android)
• Expo Native Module