Expo integration for Braintree DropIn UI. Its implementation utilises 3D Secure transactions.
Currently supported payment methods are:
- Credit cards
- ApplePay
- GooglePay
You must have an existing Expo project (>= 50.0)
npm install @joinbubble/expo-braintree-drop-in
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 },
],
];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: "test@example.com",
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: "test@example.com",
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.