diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 000000000..e69de29bb diff --git a/GooglePay.md b/GooglePay.md new file mode 100644 index 000000000..7158fa06c --- /dev/null +++ b/GooglePay.md @@ -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). diff --git a/Platform-Pay-Migration.md b/Platform-Pay-Migration.md new file mode 100644 index 000000000..bd295b077 --- /dev/null +++ b/Platform-Pay-Migration.md @@ -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 `` component. + +# `` and `` + +The `` and `` components have been replaced with ``. diff --git a/accept-a-payment-multiline-card.md b/accept-a-payment-multiline-card.md new file mode 100644 index 000000000..1612aab62 --- /dev/null +++ b/accept-a-payment-multiline-card.md @@ -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 ( + + // Your app code here + + ); +} +``` + +## 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(); + + // ... + + return ( + + { + setCard(cardDetails); + }} + /> + + ); +} +``` + +## 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 ( + + { + setCardDetails(cardDetails); + }} + /> + +