Skip to content

Commit

Permalink
docs: update dec876a
Browse files Browse the repository at this point in the history
  • Loading branch information
charliecruzan-stripe committed Nov 2, 2023
0 parents commit b146f62
Show file tree
Hide file tree
Showing 147 changed files with 5,178 additions and 0 deletions.
Empty file added .nojekyll
Empty file.
3 changes: 3 additions & 0 deletions GooglePay.md
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).
33 changes: 33 additions & 0 deletions Platform-Pay-Migration.md
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 />`.
171 changes: 171 additions & 0 deletions accept-a-payment-multiline-card.md
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
1 change: 1 addition & 0 deletions api-reference/.nojekyll
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.
92 changes: 92 additions & 0 deletions api-reference/assets/highlight.css
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); }
Loading

0 comments on commit b146f62

Please sign in to comment.