-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit bb02d26
Showing
147 changed files
with
5,178 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# These docs have moved | ||
|
||
[You can find the Google Pay integration guide here](https://stripe.com/docs/google-pay?platform=react-native). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# `isApplePaySupported` and `isGooglePaySupported` | ||
|
||
`isApplePaySupported` and `isGooglePaySupported` have both been replaced by `isPlatformPaySupported`. | ||
|
||
`isPlatformPaySupported` requires no parameters, but you _can_ optionally pass in the same parameter you passed in to `isGooglePaySupported`. However, this now belongs under the `googlePay` field. So the change would look like: | ||
|
||
```diff | ||
- isGooglePaySupported(myParams); | ||
+ isPlatformPaySupported({googlePay: myParams}); | ||
``` | ||
|
||
# `presentApplePay`, `confirmApplePayPayment`, `initGooglePay`, `presentGooglePay`, and `createGooglePayPaymentMethod` | ||
|
||
`presentApplePay`, `confirmApplePayPayment`, `isGooglePaySupported`, `presentGooglePay`, and `createGooglePayPaymentMethod` have been replaced with: | ||
|
||
- `confirmPlatformPaySetupIntent` if you were using them to confirm a setup intent | ||
- `confirmPlatformPayPayment` if you were using them to confirm a payment intent | ||
- `createPlatformPayPaymentMethod` if you were using them to create a payment method (this was impossible previously with Apple Pay, so it was only possible on Android). | ||
- `createPlatformPayToken` if you are migrating from Tipsi Stripe and your payments code still uses the legacy Tokens API. | ||
|
||
# `updateApplePaySummaryItems` | ||
|
||
`updateApplePaySummaryItems` has been replaced with `updatePlatformPaySheet`. | ||
|
||
`updatePlatformPaySheet` accepts an object with the `applePay` key. Under that key, you can pass an object containing your `summaryItems`, `shippingMethods`, and `errors` to be displayed in the Apple Pay sheet so your customer can take action during checkout. | ||
|
||
# `useGooglePay` and `useApplePay` | ||
|
||
`useGooglePay` and `useApplePay` have both been replaced by the `usePlatformPay` hook. The callbacks passed to the `useApplePay` hook are now set via props on the `<PlatformPayButton />` component. | ||
|
||
# `<GooglePayButton />` and `<ApplePayButton />` | ||
|
||
The `<GooglePayButton />` and `<ApplePayButton />` components have been replaced with `<PlatformPayButton />`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,171 @@ | ||
# Accept a payment - classic | ||
|
||
Collecting payments in your React Native app consists of three steps. Creating an object to track payment on your server, collecting card information in your app, and submitting the payment to Stripe for processing. | ||
|
||
Stripe uses this payment object, called a `PaymentIntent`, to track and handle all the states of the payment until it’s completed—even when the bank requires customer intervention, like two-factor authentication. | ||
|
||
## Setup Stripe | ||
|
||
### Client side | ||
|
||
The [React Native SDK](https://github.com/stripe/stripe-react-native) is open source and fully documented. Internally, it makes use of [native iOS](https://github.com/stripe/stripe-ios) and [Android](https://github.com/stripe/stripe-android) SDKs. Install the SDK by running: | ||
|
||
```sh | ||
yarn add react-native-stripe-sdk | ||
``` | ||
|
||
For iOS, run `pod install` in the `ios` directory to ensure that you also install the required native dependencies. Android doesn’t require any additional steps. | ||
|
||
When your app starts, configure the SDK with your Stripe [publishable key](https://stripe.com/dashboard.stripe.com/account/apikeys) so it can make requests to the Stripe API: | ||
|
||
```tsx | ||
import { StripeProvider } from '@stripe/stripe-react-native'; | ||
|
||
function App() { | ||
return ( | ||
<StripeProvider | ||
publishableKey="pk_test_51AROWSJX9HHJ5bycpEUP9dK39tXufyuWogSUdeweyZEXy3LC7M8yc5d9NlQ96fRCVL0BlAu7Nqt4V7N5xZjJnrkp005fDiTMIr" | ||
urlScheme="your-url-scheme" // required for 3D Secure and bank redirects | ||
merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay | ||
> | ||
// Your app code here | ||
</StripeProvider> | ||
); | ||
} | ||
``` | ||
|
||
## Create your checkout page | ||
|
||
Securely collect card information on the client with `CardForm` component. | ||
|
||
Add `CardForm` component to your payment screen. To collect card details you can use `onFormComplete` prop and save received data in component state.. | ||
|
||
```tsx | ||
function PaymentScreen() { | ||
const [card, setCard] = useState<CardFormView.Details>(); | ||
|
||
// ... | ||
|
||
return ( | ||
<View> | ||
<CardForm | ||
cardStyle={{ | ||
backgroundColor: '#FFFFFF', | ||
}} | ||
style={{ | ||
width: '100%', | ||
height: 300, | ||
}} | ||
onFormComplete={(cardDetails) => { | ||
setCard(cardDetails); | ||
}} | ||
/> | ||
</View> | ||
); | ||
} | ||
``` | ||
|
||
## Create a PaymentIntent | ||
|
||
Stripe uses a [PaymentIntent](https://stripe.com/docs/api/payment_intents) object to represent your intent to collect payment from a customer, tracking your charge attempts and payment state changes throughout the process. | ||
|
||
### Client side | ||
|
||
On the client, request a PaymentIntent from your server and store its [client secret](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret): | ||
|
||
```tsx | ||
function PaymentScreen() { | ||
// ... | ||
|
||
const fetchPaymentIntentClientSecret = useCallback(async () => { | ||
const response = await fetch(`${API_URL}/create-payment-intent`, { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
}, | ||
body: JSON.stringify({ | ||
currency: 'usd', | ||
items: ['id-1'], | ||
}), | ||
}); | ||
const { clientSecret } = await response.json(); | ||
|
||
return clientSecret; | ||
}, []); | ||
|
||
const handlePayPress = useCallback(async () => { | ||
if (!card) { | ||
return; | ||
} | ||
|
||
try { | ||
// Fetch Intent Client Secret from backend | ||
const clientSecret = await fetchPaymentIntentClientSecret(); | ||
|
||
// ... | ||
} catch (e) { | ||
// ... | ||
} | ||
}, [card, fetchPaymentIntentClientSecret]); | ||
|
||
return ( | ||
<View> | ||
<CardForm | ||
onFormComplete={(cardDetails) => { | ||
setCardDetails(cardDetails); | ||
}} | ||
/> | ||
|
||
<Button onPress={handlePayPress} title="Pay" disabled={loading} /> | ||
</View> | ||
); | ||
} | ||
``` | ||
|
||
## Submit the payment to Stripe | ||
|
||
When the customer taps **Pay**, confirm the `PaymentIntent` to complete the payment. | ||
|
||
Rather than sending the entire PaymentIntent object to the client, use its [client secret](https://stripe.com/docs/api/payment_intents/object#payment_intent_object-client_secret). This is different from your API keys that authenticate Stripe API requests. The client secret should be handled carefully because it can complete the charge. Don’t log it, embed it in URLs, or expose it to anyone but the customer. | ||
|
||
Pass the customer card details and client secret to `confirmPayment`, which you can access with the `useConfirmPayment` hook. The hook also returns a loading value to indicate the state of the asynchronous action: | ||
|
||
```tsx | ||
function PaymentScreen() { | ||
const { confirmPayment, loading } = useConfirmPayment(); | ||
|
||
// ... | ||
|
||
const handlePayPress = async () => { | ||
// Gather the customer's billing information (e.g., email) | ||
const billingDetails: BillingDetails = { | ||
email: '[email protected]', | ||
}; | ||
|
||
// Fetch the intent client secret from the backend | ||
const clientSecret = await fetchPaymentIntentClientSecret(); | ||
|
||
// Confirm the payment with the card details | ||
const { paymentIntent, error } = await confirmPayment(clientSecret, { | ||
paymentMethodType: 'Card', | ||
paymentMethodData: { | ||
billingDetails, | ||
}, | ||
}); | ||
|
||
if (error) { | ||
console.log('Payment confirmation error', error); | ||
} else if (paymentIntent) { | ||
console.log('Success from promise', paymentIntent); | ||
} | ||
}; | ||
|
||
return <View />; | ||
} | ||
``` | ||
|
||
If authentication is required by regulation (e.g., Strong Customer Authentication), additional actions are presented to the customer to complete the payment process. See [Card authentication and 3D Secure](https://stripe.com/docs/payments/3d-secure) for more details. | ||
|
||
When the payment completes successfully, the value of the returned PaymentIntent’s `status` property is `succeeded`. Check the status of a PaymentIntent in the [Dashboard](https://dashboard.stripe.com/test/payments) or by inspecting the `status` property on the object. If the payment isn’t successful, inspect the returned `error` to determine the cause. | ||
|
||
## Test the integration |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
:root { | ||
--light-hl-0: #000000; | ||
--dark-hl-0: #D4D4D4; | ||
--light-hl-1: #001080; | ||
--dark-hl-1: #9CDCFE; | ||
--light-hl-2: #A31515; | ||
--dark-hl-2: #CE9178; | ||
--light-hl-3: #008000; | ||
--dark-hl-3: #6A9955; | ||
--light-hl-4: #0000FF; | ||
--dark-hl-4: #569CD6; | ||
--light-hl-5: #795E26; | ||
--dark-hl-5: #DCDCAA; | ||
--light-hl-6: #098658; | ||
--dark-hl-6: #B5CEA8; | ||
--light-hl-7: #0070C1; | ||
--dark-hl-7: #4FC1FF; | ||
--light-hl-8: #AF00DB; | ||
--dark-hl-8: #C586C0; | ||
--light-hl-9: #267F99; | ||
--dark-hl-9: #4EC9B0; | ||
--light-code-background: #F5F5F5; | ||
--dark-code-background: #1E1E1E; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { :root { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--hl-8: var(--light-hl-8); | ||
--hl-9: var(--light-hl-9); | ||
--code-background: var(--light-code-background); | ||
} } | ||
|
||
@media (prefers-color-scheme: dark) { :root { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--hl-8: var(--dark-hl-8); | ||
--hl-9: var(--dark-hl-9); | ||
--code-background: var(--dark-code-background); | ||
} } | ||
|
||
body.light { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--hl-8: var(--light-hl-8); | ||
--hl-9: var(--light-hl-9); | ||
--code-background: var(--light-code-background); | ||
} | ||
|
||
body.dark { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--hl-8: var(--dark-hl-8); | ||
--hl-9: var(--dark-hl-9); | ||
--code-background: var(--dark-code-background); | ||
} | ||
|
||
.hl-0 { color: var(--hl-0); } | ||
.hl-1 { color: var(--hl-1); } | ||
.hl-2 { color: var(--hl-2); } | ||
.hl-3 { color: var(--hl-3); } | ||
.hl-4 { color: var(--hl-4); } | ||
.hl-5 { color: var(--hl-5); } | ||
.hl-6 { color: var(--hl-6); } | ||
.hl-7 { color: var(--hl-7); } | ||
.hl-8 { color: var(--hl-8); } | ||
.hl-9 { color: var(--hl-9); } | ||
pre, code { background: var(--code-background); } |
Oops, something went wrong.