# Utiliser des portefeuilles électroniques avec Issuing Comment utiliser Issuing pour ajouter des cartes à des portefeuilles électroniques. > Les tokens de wallets sont uniquement disponibles en mode production. Pour tester pleinement ces fonctionnalités, vous devez recevoir une approbation pour les cas d’usage en mode production et utiliser de vraies cartes. Issuing permet aux utilisateurs d’ajouter des cartes à des portefeuilles électroniques comme Apple Pay et Google Pay. Stripe prend en charge l’ajout de cartes via deux méthodes : 1. **Mise en service manuelle** : les titulaires de carte saisissent les informations de leur carte dans l’application de portefeuille de leur téléphone pour l’ajouter à leur portefeuille électronique. 1. **Mise en service de type push** : les applications mobiles permettent aux utilisateurs d’ajouter des cartes à leur portefeuille électronique directement depuis l’application. Lorsqu’une carte est ajoutée à un portefeuille électronique, une représentation tokenisée de cette carte est créée. Les tokens de réseau sont gérés séparément des cartes. Pour en savoir plus sur les tokens de réseau et leur fonctionnement, veuillez consulter la page [Gestion des tokens](https://docs.stripe.com/issuing/controls/token-management.md). ## Mise en service manuelle Les titulaires de cartes peuvent ajouter des [cartes virtuelles](https://docs.stripe.com/issuing/cards/virtual.md) et des [cartes physiques](https://docs.stripe.com/issuing/cards/physical.md) Stripe Issuing à leurs portefeuilles Apple Pay, Google Pay et Samsung Pay par le biais d’une mise en service manuelle. Pour ce faire, les titulaires de carte ouvrent l’application du portefeuille concerné sur leur téléphone et saisissent les informations de leur carte. Stripe envoie ensuite un code de vérification à 6 chiffres au `phone_number` ou `email` du titulaire de la carte. Un message d’erreur `card not supported` s’affiche si aucun de ces champs n’est renseigné pour le titulaire de la carte au moment où celle-ci est mise en service. Aucun code n’est nécessaire pour mettre en œuvre la mise en service manuelle, mais le processus de configuration peut varier en fonction du fournisseur de portefeuille électronique et du pays dans lequel vous êtes établi : ### États-Unis Les portefeuilles Apple Pay nécessitent l’approbation d’Apple. Consultez vos [paramètres de wallets](https://dashboard.stripe.com/settings/issuing/digital-wallets) pour connaître l’état d’Apple Pay sur votre compte. Il est possible que vous deviez soumettre une demande avant d’utiliser Apple Pay. L’approbation peut prendre 1 à 2 semaines à partir de l’envoi de votre demande. Google Pay et Samsung Pay ne nécessitent aucune étape supplémentaire. ### UE et Royaume-Uni Les intégrations de portefeuilles électroniques nécessitent une approbation supplémentaire de la part de l’équipe de partenariat Stripe. Pour en savoir plus, contactez le représentant de votre compte ou [contactez Stripe](https://stripe.com/contact/sales). Les portefeuilles Apple Pay nécessitent une autorisation supplémentaire. Vérifiez vos [paramètres de portefeuilles électroniques](https://dashboard.stripe.com/settings/issuing/digital-wallets) pour connaître l’état d’Apple Pay sur votre compte. Il est possible que vous deviez soumettre une demande avant de pouvoir utiliser Apple Pay. ## Mise en service de type push La mise en service de type push permet aux titulaires de carte d’ajouter leurs cartes Stripe Issuing à leurs wallets directement depuis votre application, en appuyant sur un bouton « Ajouter au wallet » comme illustré ci-dessous. Pour activer la mise en service de type push aux États-Unis, les utilisateurs doivent d’abord effectuer les étapes de mise en service manuelle. En plus de l’approbation manuelle de la mise en service, la mise en service push nécessite une intégration avec le SDK Stripe. Cela nécessite à la fois des processus d’approbation via Stripe et une intégration de code avec le SDK Stripe pour chaque plateforme sur laquelle vous souhaitez prendre en charge la mise en service de type push. Les approbations de la plateforme se répercutent sur tous les comptes connectés. La mise en service de type push de Samsung Pay n’est pas prise en charge par nos SDK. # iOS > This is a iOS for when platform is ios. View the full page at https://docs.stripe.com/issuing/cards/digital-wallets?platform=ios. ![Un bouton d'interface utilisateur noir indiquant la mention « Ajouter à Apple Wallet ». Le logo Apple Wallet figure à gauche du texte. Il s'agit d'un portefeuille gris avec des cartes bleues, jaunes, vertes et rouges légèrement décalées.](https://b.stripecdn.com/docs-statics-srv/assets/add_to_apple_wallet.fe8cd234760a7478e34f5e91d22677bb.png) ## Demander un accès > Vous devez avoir accès à la [mise en service manuelle](https://docs.stripe.com/issuing/cards/digital-wallets.md?platform=android#manual-provisioning) avant de pouvoir demander la mise en service de type. Une mise en service de type push nécessite un droit Apple spécial appelé `com.apple.developer.payment-pass-provisioning`. Vous pouvez demander ce droit par e-mail à l’adresse [support-issuing@stripe.com](mailto:support-issuing@stripe.com). Dans votre e-mail, veillez à inclure les informations suivantes : - **Réseau de cartes bancaires** : Visa ou MasterCard. - **Nom de la carte** : le nom de la carte tel qu’il apparaît dans le wallet. - **Nom de l’application** : le nom de votre application. - **ID de l’équipe de développeurs** : accessible depuis les paramètres de votre compte Apple consacré aux développeurs sous la section [abonnement](https://developer.apple.com/account/#/membership) (par exemple, `2A23JCNA5E`). - **ID ADAM** : l’identifiant numérique unique de votre application. Il se trouve dans [App Store Connect](https://appstoreconnect.apple.com) ou dans le lien App Store de votre application (par exemple, `https://apps.apple.com/app/id123456789`). - **ID de groupe** : l’identifiant de groupe de votre application, également disponible sur l’App Store Connect (par exemple, `com.example.yourapp`). Si vous avez plusieurs applications (par exemple pour effectuer des tests), qui ont des champs différents pour les attributs ci-dessus, vous devrez demander l’accès pour chacune d’entre elles. Une fois que nous avons approuvé et appliqué votre demande, votre application apparaît sur la page d’informations de la carte ajoutée dans l’app Cartes, et l’objet `PKSecureElementPass` est disponible dans votre application en appelant `PKPassLibrary().passes()`. Vous devrez peut-être supprimer et ajouter à nouveau la carte pour que les modifications soient effectives. ## Vérifier votre admissibilité [Côté client] Assurez-vous d’avoir intégré à votre application la dernière version du [SDK Stripe iOS](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios). Déterminez si l’appareil est éligible à la mise en service de type push. 1. Vérifiez que la valeur `wallets[apple_pay][eligible]` de la carte émise est définie sur `true`. 1. Appelez `PKPassLibrary().canAddSecureElementPass(primaryAccountIdentifier:)` avec le `wallets[primary_account_identifier]` de votre carte et vérifiez que le résultat est `true`. Si le `primary_account_identifier` est vide, transmettez une chaîne vide à `canAddSecureElementPass()`. Récupérez ces valeurs sur votre back-end, puis transmettez-les à votre application pour la vérification de l’admissibilité. > Avant d’afficher le bouton `PKAddPassButton`, vous devez vérifier le flag `wallets[apple_pay][eligible]` côté serveur et le résultat de `canAddSecureElementPass()`. Si vous affichez le bouton **Ajouter à Apple Wallet** sans vérifier ces valeurs, App Review peut rejeter votre application. #### Swift ```swift import Stripe class MyViewController: UIViewController { @IBOutlet weak var addPassButton: PKAddPassButton! // ... func handleEligibilityResponse(eligible: Bool, primaryAccountIdentifier: String?) { if eligible && PKPassLibrary().canAddSecureElementPass(primaryAccountIdentifier: primaryAccountIdentifier ?? "") { addPassButton.isHidden = false } else { addPassButton.isHidden = true } } } ``` Pour plus de contexte, consultez à chaque étape les extraits de code proposés et les renvois vers l’application test. Pour cette étape, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/ios/Code/ViewController.swift#L201-L218) vérifie l’admissibilité. ## Ajouter une carte [Côté client] Lorsque l’utilisateur touche le bouton `PKAddPassButton`, créez et présentez un `PKAddPaymentPassViewController` contenant l’interface utilisateur d’Apple pour le flux de mise en service de type push. `PKAddPaymentPassViewController` peut utiliser l’attribut `primaryAccountIdentifier` de l’étape précédente pour déterminer si une carte a déjà été ajoutée à un appareil spécifique. Par exemple, si la carte a été ajoutée à un iPhone, l’interface utilisateur d’Apple proposera de l’ajouter à une Apple Watch associée. #### Swift ```swift import Stripe class MyViewController: UIViewController { // ... func beginPushProvisioning() { let config = STPPushProvisioningContext.requestConfiguration( withName: "Jenny Rosen", // the cardholder's name description: "RocketRides Card", // optional; a description of your card last4: "4242", // optional; the last 4 digits of the card brand: .visa, // optional; the brand of the card primaryAccountIdentifier: self.primaryAccountIdentifier // the primary_account_identifier value from the previous step ) let controller = PKAddPaymentPassViewController(requestConfiguration: config, delegate: self) self.present(controller!, animated: true, completion: nil) } } ``` Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/ios/Code/ViewController.swift#L280-L288) utilise un `PKAddPaymentPassViewController`. L’initialiseur du `PKAddPaymentPassViewController` nécessite un délégué que vous devez implémenter. Généralement, il s’agit simplement du contrôleur d’affichage à partir duquel vous le présentez. Nous fournissons une classe nommée `STPPushProvisioningContext` pour vous aider à implémenter ces méthodes. #### Swift ```swift class MyViewController: UIViewController { var pushProvisioningContext: STPPushProvisioningContext? = nil // ... } extension MyViewController: PKAddPaymentPassViewControllerDelegate { func addPaymentPassViewController(_ controller: PKAddPaymentPassViewController, generateRequestWithCertificateChain certificates: [Data], nonce: Data, nonceSignature: Data, completionHandler handler: @escaping (PKAddPaymentPassRequest) -> Void) { self.pushProvisioningContext = STPPushProvisioningContext(keyProvider: self) // STPPushProvisioningContext implements this delegate method for you, by retrieving encrypted card details from the Stripe API. self.pushProvisioningContext?.addPaymentPassViewController(controller, generateRequestWithCertificateChain: certificates, nonce: nonce, nonceSignature: nonceSignature, completionHandler: handler); } func addPaymentPassViewController(_ controller: PKAddPaymentPassViewController, didFinishAdding pass: PKPaymentPass?, error: Error?) { // Depending on if `error` is present, show a success or failure screen. self.dismiss(animated: true, completion: nil) } } ``` Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/ios/Code/ViewController.swift#L293-L349) met en œuvre`PKAddPaymentPassViewControllerDelegate`. Vous pouvez constater que l’initialiseur du `STPPushProvisioningContext` requiert un `keyProvider`. Il s’agit d’une instance d’une classe qui implémente le protocole `STPIssuingCardEphemeralKeyProvider`. Ce protocole définit une seule méthode obligatoire, `createIssuingCardKeyWithAPIVersion:completion`. Pour implémenter cette méthode, effectuez un appel à l’API vers votre back-end. Votre back-end crée un objet Ephemeral Key à l’aide de l’API Stripe et le renvoie à votre application. Votre application appelle ensuite le gestionnaire d’exécution fourni avec la réponse API de votre back-end. #### Swift ```swift extension MyViewController: STPIssuingCardEphemeralKeyProvider { func createIssuingCardKey(withAPIVersion apiVersion: String, completion: @escaping STPJSONResponseCompletionBlock) { // This example uses Alamofire for brevity, but you can make the request however you want AF.request("https://myapi.com/ephemeral_keys", method: .post, parameters: ["api_version": apiVersion]) .responseJSON { response in switch response.result { case .success: if let data = response.data { do { let obj = try JSONSerialization.jsonObject(with: data, options: []) as! [AnyHashable: Any] completion(obj, nil) } catch { completion(nil, error) } } case .failure(let error): completion(nil, error) } } } } ``` Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/ios/Code/ViewController.swift#L379-L394) met en œuvre`STPIssuingCardEphemeralKeyProvider`. ## Mettre votre back-end à jour [Côté serveur] L’implémentation de la mise en service de type push expose des méthodes qui requièrent que vous communiquiez avec votre back-end pour créer une clé éphémère Stripe et renvoyer un JSON de celle-ci à votre application. Cette clé est un identifiant éphémère de l’API que vous pouvez utiliser pour récupérer les informations de carte chiffrées d’une instance unique d’un objet Card. Pour garantir que l’objet renvoyé par l’API Stripe est compatible avec la version du SDK iOS ou Android que vous utilisez, le SDK Stripe vous indique quelle version d’API il privilégie. Vous devez explicitement transmettre cette version d’API à notre API lorsque vous créez la clé. #### curl ```bash curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -d "issuing_card"="{{ISSUING_CARD_ID}}" \ -H "Stripe-Version: {{API_VERSION}}" ``` ```json { "id": "ephkey_1G4V6eEEs6YsaMZ2P1diLWdj", "object": "ephemeral_key", "associated_objects": [ { "id": "{{CARD_ID}}", "type": "issuing.card" } ], "created": 1586556828, "expires": 1586560428, "livemode": false, "secret": "ek_test_YWNjdF8xRmdlTjZFRHelWWxwWVo5LEtLWFk0amJ2N0JOa0htU1JzEZkd2RpYkpJdnM_00z2ftxCGG" } ``` Pour plus de contexte, observez comment l’[exemple de backend](https://github.com/stripe-samples/push-provisioning-samples/blob/main/server/ruby/README.md) créée une [clé Stripe éphémère](https://github.com/stripe-samples/push-provisioning-samples/blob/main/server/ruby/server.rb#L68-L88). ## Tests Le droit `com.apple.developer.payment-pass-provisioning` fonctionne uniquement avec des profils de mise en service en mode distribution, ce qui signifie que, même après l’avoir obtenu, la seule façon de tester le flux de mise en service de bout en bout est de distribuer votre application avec TestFlight ou avec l’App Store. Pour faciliter les tests, nous fournissons une version fictive de `PKAddPaymentPassViewController` appelée `STPFakeAddPaymentPassViewController` que vous pouvez utiliser de manière interchangeable pendant les tests. Cela ne fonctionne qu’en [mode test](https://docs.stripe.com/testing-use-cases.md#test-versus-live-mode) en utilisant des cartes bancaires en mode test. #### Swift ```swift import Stripe class MyViewController: UIViewController { // ... func beginPushProvisioning() { let config = STPPushProvisioningContext.requestConfiguration( withName: "Jenny Rosen", // the cardholder's name description: "RocketRides Card", // optional; a description of your card last4: "4242", // optional; the last 4 digits of the card brand: .visa // optional; the brand of the card )let controller = STPFakeAddPaymentPassViewController(requestConfiguration: config, delegate: self) self.present(controller!, animated: true, completion: nil) } } ``` Pour créer l’application test, suivez les étapes décrites dans le fichier [readme](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/ios/README.md). Il n’est pas nécessaire de créer l’application pour suivre les instructions ci-dessus. # Android > This is a Android for when platform is android. View the full page at https://docs.stripe.com/issuing/cards/digital-wallets?platform=android. ![Un bouton noir pour l’interface utilisateur indiquant Ajouter au wallet Google. Le logo Google Wallet figure à gauche du texte.](https://b.stripecdn.com/docs-statics-srv/assets/add_to_google_pay_black.2df6c169bbc605123ec73d37dc73a86e.png) ## Demander un accès > Vous devez avoir accès à la [mise en service manuelle](https://docs.stripe.com/issuing/cards/digital-wallets.md?platform=android#manual-provisioning) avant de pouvoir demander la mise en service de type. Stripe fournit un wrapper SDK autour d’une bibliothèque Google privée pour la mise en service de type push. Pour distribuer votre application sur le Google Pay Store avec la mise en service de type push, vous devez effectuer les actions suivantes : 1. [Demander un accès à Google Pay](https://developers.google.com/pay/issuers/requesting-access?api=true). Une fois le formulaire rempli, votre demande devrait être approuvée sous quelques heures ou une journée au plus tard. 1. Après avoir reçu l’approbation, téléchargez le [SDK privé TapAndPay](https://developers.google.com/pay/issuers/apis/push-provisioning/android/releases) de Google. La version 18 est la dernière version testée en date du SDK TapAndPay. 1. [Demandez un accès à l’API de mise en service de type push](https://support.google.com/faqs/contact/pp_api_allowlist) pour votre application. Vous devrez fournir votre [ID d’application](https://developer.android.com/studio/build/application-id) pour l’ajouter à la liste des adresses autorisées de Google. Pour en savoir plus sur ce processus, consultez la [documentation](https://developers.google.com/pay/issuers/apis/push-provisioning/android/allowlist) de Google. Quand le processus est terminé, Google accorde des droits de mise en service de type push. 1. Une fois que Google a accordé les droits de mise en service de type push, [contactez Stripe](mailto:support-issuing@stripe.com) en indiquant le nom et l’ID de votre application, le réseau de cartes et le nom de la carte pour effectuer cette étape. ## Mettre votre application à jour [Côté client] Pour mettre votre application à jour : 1. Importez le [SDK privé](https://developers.google.com/pay/issuers/apis/push-provisioning/android/setup) de Google. 1. Importez le SDK de Stripe. ```java dependencies { [... your dependencies] implementation 'com.stripe:stripe-android-issuing-push-provisioning:1.2.2' } ``` Pour plus de contexte, consultez à chaque étape les extraits de code proposés et les renvois vers l’application test. Pour cette étape, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/app/build.gradle.kts#L111-L118) importe ces SDK. - Préparez votre back-end pour qu’il crée des clés éphémères pour vos cartes. [Voir la section ci-dessous](https://docs.stripe.com/issuing/cards/digital-wallets.md#backend-changes). - Créez un `EphemeralKeyProvider` qui étend `PushProvisioningEphemeralKeyProvider`. Puisque le fournisseur de clés éphémères sera transmis à une autre activité, il doit également implémenter un attribut `Parcelable` (voir [Parcelable](https://developer.android.com/reference/android/os/Parcelable)). Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/app/src/main/java/com/stripe/android/pushprovisioning/network/BackendPushProvisioningEphemeralKeyProvider.kt#L20-L43) définit son `EphemeralKeyProvider`. - Implémentez le bouton **Ajouter à Google Pay** [selon les spécifications de Google](https://developers.google.com/pay/issuers/apis/push-provisioning/android/branding-guidelines). L’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/app/src/main/res/layout/card_picker_item.xml#L19-L25) fournit un exemple de bouton respectant les directives relatives à l’image de marque. > Comme le [recommande](https://developers.google.com/pay/issuers/apis/push-provisioning/android/faq#implementation_questions) Google, n’obligez pas vos utilisateurs à installer l’application Google Pay, et ne vérifiez pas si c’est le cas de manière programmatique. L’application n’est qu’un front-end. Vous n’en avez pas besoin pour que Google Pay fonctionne. Les utilisateurs peuvent gérer leur carte bancaire à partir de leurs paramètres Google dans l’application « Paramètres ». Google exige que le bouton **Ajouter à Google Pay** s’affiche uniquement lorsqu’une carte n’est pas encore présente sur l’appareil de l’utilisateur et que les utilisateurs ayant des cartes en attente de vérification effectuent le processus guidé d’activation finale. Utilisez la [liste des points de contrôle](https://developers.google.com/pay/issuers/apis/push-provisioning/android/test-cases) de Google pour vérifier que votre implémentation est correcte. Pour vérifier l’état des cartes de vos utilisateurs, utilisez [listTokens()](https://developers.google.com/pay/issuers/apis/push-provisioning/android/reading-wallet#listtokens) afin de récupérer la liste de toutes les cartes déjà présentes sur l’appareil. Comparez la valeur de `getFpanLastFour()` de chaque objet renvoyé avec la propriété Stripe [last4](https://docs.stripe.com/api/issuing/cards/object.md#issuing_card_object-last4) de l’[objet Issued Card](https://docs.stripe.com/api/issuing/cards/object.md) pour la carte que vous voulez ajouter. Éliminez de la liste tous les objets qui ne correspondent pas. - Si la liste résultante est vide, cela signifie que la carte que vous souhaitez ajouter n’est pas encore présente sur l’appareil. Vous pouvez poursuivre la procédure décrite ci-dessous pour afficher le bouton. - Si la liste résultante contient un objet `TokenInfo`, vérifiez son [TokenState](https://developers.google.com/pay/issuers/apis/push-provisioning/android/enumerated-values#token_status) en appelant `getTokenState()`. - Si cet état est `TOKEN_STATE_NEEDS_IDENTITY_VERIFICATION`, cela signifie que l’utilisateur a déjà essayé d’ajouter manuellement la carte en question sur son appareil. Affichez le bouton **Ajouter à Google Pay**, mais liez l’écouteur `onActivityResult` à la méthode `tokenize()` en suivant [les instructions fournies dans la documentation de Google](https://developers.google.com/pay/issuers/apis/push-provisioning/android/wallet-operations#resolving_yellow_path), afin que l’utilisateur puisse facilement régler le problème. - Tout autre état indique que la carte bancaire figure déjà sur l’appareil. **N’affichez pas le bouton Google Pay.** Veillez à fournir votre ID d’application à Stripe avant de commencer les tests internes. La configuration peut prendre plus d’une semaine et une configuration incomplète aura notamment pour conséquence la réception de réponses incohérentes pour ces deux méthodes. La configuration par Stripe est terminée lorsque `listTokens()` donne pour résultat **only contains cards added after**. Lorsqu’un utilisateur touche le bouton, lancez la `PushProvisioningActivity` de Stripe à l’aide du `PushProvisioningActivityStarter`. ```java new PushProvisioningActivityStarter( this, // The Activity or Fragment you are initiating the push provisioning from new PushProvisioningActivityStarter.Args( "Stripe Card", // The name that will appear on the push provisioning UI ephemeralKeyProvider, // Your instance of EphemeralKeyProvider false // If you want to enable logs or not )).startForResult(); ``` Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/app/src/main/java/com/stripe/android/pushprovisioning/MainActivity.kt#L119-L124) lance `PushProvisioningActivity`. Cela prépare la mise en service de type push et lance l’interface utilisateur permettant l’ajout de la carte au portefeuille. Implémentez le rappel dans votre `onActivityResult`. ```java protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { if (requestCode == PushProvisioningActivityStarter.REQUEST_CODE) { if (resultCode == PushProvisioningActivity.RESULT_OK) { PushProvisioningActivityStarter.Result success = PushProvisioningActivityStarter.Result.fromIntent(data); } else if (resultCode == PushProvisioningActivity.RESULT_ERROR) { PushProvisioningActivityStarter.Error error = PushProvisioningActivityStarter.Error.fromIntent(data); } } } ``` Pour plus de contexte, observez comment l’[application test](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/app/src/main/java/com/stripe/android/pushprovisioning/MainActivity.kt#L132-L167) implémente`onActivityResult`. Si la mise en service a abouti, vous recevrez un `PushProvisioningActivityStarter.Result` contenant un `cardTokenId`, qui est l’ID Google pour la carte dans le portefeuille actif. Vous pouvez utiliser les autres fonctions du portefeuille avec cet ID. Si une erreur est survenue lors de la mise en service, une `PushProvisioningActivityStarter.Error` sera renvoyée avec un `code` et un `message`. Le `message` est un texte destiné au développeur expliquant l’erreur. Le `code` peut prendre les valeurs suivantes : | Énumération | Signification | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | **USER\_CANCELED** | L’utilisateur a annulé la mise en service. | | **CARD\_CANCELED** | La carte a été annulée ou est perdue ou a été volée et ne peut pas être mise en service. | | **EPHEMERAL\_KEY\_ERROR** | Une erreur est survenue lors de la récupération de la clé éphémère. | | **TAP\_AND\_PAY\_UNAVAILABLE** | Le bibliothèque TapAndPay ne peut pas être utilisée, probablement parce que l’application ne figure pas sur la liste blanche. | | **NO\_STABLE\_HARDWARE\_ID** | Ce problème peut survenir dans l’émulateur de développement. L’application ne peut pas récupérer l’ID du matériel stable. | | **NO\_ACTIVE\_WALLET\_FOUND** | Aucun portefeuille actif disponible. Veuillez noter que les émulateurs n’ont généralement pas Google Pay. | | **PUSH\_PROVISIONING\_ENCRYPTED\_PAYLOAD\_ERROR** | Une erreur est survenue lors de la communication avec les serveurs de Stripe pour obtenir la charge utile chiffrée de la mise en service de type push. | | **UNKNOWN\_ERROR** | Une erreur inattendue est survenue. Le `message` contiendra des informations supplémentaires. | ## Mettre votre back-end à jour [Côté serveur] L’implémentation de la mise en service de type push expose des méthodes qui requièrent que vous communiquiez avec votre back-end pour créer une clé éphémère Stripe et renvoyer un JSON de celle-ci à votre application. Cette clé est un identifiant éphémère de l’API que vous pouvez utiliser pour récupérer les informations de carte chiffrées d’une instance unique d’un objet Card. Pour garantir que l’objet renvoyé par l’API Stripe est compatible avec la version du SDK iOS ou Android que vous utilisez, le SDK Stripe vous indique quelle version d’API il privilégie. Vous devez explicitement transmettre cette version d’API à notre API lorsque vous créez la clé. #### curl ```bash curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -d "issuing_card"="{{ISSUING_CARD_ID}}" \ -H "Stripe-Version: {{API_VERSION}}" ``` ```json { "id": "ephkey_1G4V6eEEs6YsaMZ2P1diLWdj", "object": "ephemeral_key", "associated_objects": [ { "id": "{{CARD_ID}}", "type": "issuing.card" } ], "created": 1586556828, "expires": 1586560428, "livemode": false, "secret": "ek_test_YWNjdF8xRmdlTjZFRHelWWxwWVo5LEtLWFk0amJ2N0JOa0htU1JzEZkd2RpYkpJdnM_00z2ftxCGG" } ``` Pour plus de contexte, observez comment l’[exemple de backend](https://github.com/stripe-samples/push-provisioning-samples/blob/main/server/ruby/README.md) créée une [clé Stripe éphémère](https://github.com/stripe-samples/push-provisioning-samples/blob/main/server/ruby/server.rb#L68-L88). ## Tests Tous les tests doivent être réalisés en mode production, avec des cartes réelles et sur des appareils physiques. Pour créer l’application test, suivez les étapes décrites dans le fichier [readme](https://github.com/stripe-samples/push-provisioning-samples/blob/main/client/android/README.md). Il n’est pas nécessaire de créer l’application pour suivre les instructions ci-dessus. # React Native > This is a React Native for when platform is react-native. View the full page at https://docs.stripe.com/issuing/cards/digital-wallets?platform=react-native. ![Un bouton d'interface utilisateur noir indiquant la mention « Ajouter à Apple Wallet ». Le logo Apple Wallet figure à gauche du texte. Il s'agit d'un portefeuille gris avec des cartes bleues, jaunes, vertes et rouges légèrement décalées.](https://b.stripecdn.com/docs-statics-srv/assets/add_to_apple_wallet.fe8cd234760a7478e34f5e91d22677bb.png) ![Un bouton noir pour l’interface utilisateur indiquant Ajouter au wallet Google. Le logo Google Wallet figure à gauche du texte.](https://b.stripecdn.com/docs-statics-srv/assets/add_to_google_pay_black.2df6c169bbc605123ec73d37dc73a86e.png) ## Demander un accès > Vous devez avoir accès à la [mise en service manuelle](https://docs.stripe.com/issuing/cards/digital-wallets.md?platform=android#manual-provisioning) avant de pouvoir demander la mise en service de type. ### Demande d’accès pour iOS Une mise en service de type push nécessite un droit Apple spécial appelé `com.apple.developer.payment-pass-provisioning`. Vous pouvez demander ce droit par e-mail à l’adresse [support-issuing@stripe.com](mailto:support-issuing@stripe.com). Dans votre e-mail, veillez à inclure les informations suivantes : - **Réseau de cartes bancaires** : Visa ou MasterCard. - **Nom de la carte** : le nom de la carte tel qu’il apparaît dans le wallet. - **Nom de l’application** : le nom de votre application. - **ID de l’équipe de développeurs** : accessible depuis les paramètres de votre compte Apple consacré aux développeurs sous la section [abonnement](https://developer.apple.com/account/#/membership). - **ID ADAM** : l’identifiant numérique unique de votre application. Il se trouve dans [App Store Connect](https://appstoreconnect.apple.com) ou dans le lien App Store de votre application (par exemple, `https://apps.apple.com/app/id123456789`). - **ID de groupe** : l’identifiant de groupe de votre application, également disponible sur l’App Store Connect (par exemple, `com.example.yourapp`). ### Demande d’accès pour Android Stripe fournit un wrapper SDK basé sur une bibliothèque Google privée pour la mise en service de type push. Pour publier votre application sur le Google Play Store via une mise en service de type push, vous devez demander un accès à cette bibliothèque : - [Demander un accès à Google Pay](https://developers.google.com/pay/issuers/requesting-access?api=true) - Téléchargez le [SDK privé TapAndPay](https://developers.google.com/pay/issuers/apis/push-provisioning/android/releases) de Google (la version compatible actuelle est la [17.1.2](https://developers.google.com/static/pay/issuers/apis/push-provisioning/android/downloads/tapandpay_sdk.m2repo_2021-07-19_v17.1.2.zip)) - [Demandez l’accès à l’API d’approvisionnement Push](https://support.google.com/faqs/contact/pp_api_allowlist) pour votre application. Vous devrez fournir votre [ID d’application](https://developer.android.com/studio/build/application-id) afin qu’il soit ajouté à la liste d’autorisation de Google. Des informations sur ce processus sont disponibles dans la [documentation](https://developers.google.com/pay/issuers/apis/push-provisioning/android/allowlist) de Google. - Envoyez le même ID d’application, le nom de votre application, le réseau de cartes et le nom de la carte à l’adresse [support-issuing@stripe.com](mailto:support-issuing@stripe.com). ## Configurer votre application [Côté client] Le [SDK React Native](https://github.com/stripe/stripe-react-native) est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK [Android](https://github.com/stripe/stripe-android) et [iOS natifs](https://github.com/stripe/stripe-ios). Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) : #### yarn ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` Ensuite, installez les autres dépendances nécessaires : - Pour iOS, accédez au directeur **ios** et exécutez `pod install` pour vous assurer que vous installez également les dépendances natives requises. - Pour Android, il n’y a plus de dépendances à installer. > Nous vous recommandons de suivre le [guide officiel de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) pour ajouter la prise en charge de TypeScript. ### Initialisation de Stripe Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant `StripeProvider` ou utilisez la méthode d’initialisation `initStripe`. Seule la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) de l’API dans `publishableKey` est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Utilisez vos [clés de test](https://docs.stripe.com/keys.md#obtain-api-keys) d’API lors de vos activités de test et de développement, et vos clés du [mode production](https://docs.stripe.com/keys.md#test-live-modes) pour la publication de votre application. ### Configuration pour Android Pour activer le provisionnement de type push sur Android après avoir obtenu l’accès au SDK TapAndPay (voir ci-dessus), vous devez l’[intégrer à votre projet Android natif](https://developers.google.com/pay/issuers/apis/push-provisioning/android/setup). Ensuite, vous devez importer la bibliothèque de provisionnement de type push pour Android de Stripe en ajoutant ce qui suit à votre fichier `android/app/build.gradle` : #### Groovy ```groovy dependencies { // ...implementation 'com.stripe:stripe-android-issuing-push-provisioning:1.1.0' } ``` ### Configuration pour iOS Pour activer le provisionnement de type push sur iOS une fois que Stripe a octroyé le droit d’accès, vous devez [ajouter les fonctionnalité à votre profil de provisionnement dans l’App Store Connect](https://developer.apple.com/account/resources/profiles/list). Ensuite, vous devez ajouter le nouveau droit d’accès à votre fichier `ios/app.config.js` : ``` "entitlements": { "com.apple.developer.payment-pass-provisioning": true } ``` ## Mettre votre back-end à jour [Côté serveur] L’implémentation de la mise en service de type push expose des méthodes qui requièrent que vous communiquiez avec votre back-end pour créer une clé éphémère Stripe et renvoyer un JSON de celle-ci à votre application. Cette clé est un identifiant éphémère de l’API que vous pouvez utiliser pour récupérer les informations de carte chiffrées d’une instance unique d’un objet Card. Pour garantir que l’objet renvoyé par l’API Stripe est compatible avec la version du SDK que vous utilisez, vous devez explicitement transmettre la version d’API exportée par le SDK React Native à notre API lorsque vous créez la clé. #### curl ```bash curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -d "issuing_card"="{{ISSUING_CARD_ID}}" \ -H "Stripe-Version: {{API_VERSION}}" ``` ```json { "id": "ephkey_1G4V6eEEs6YsaMZ2P1diLWdj", "object": "ephemeral_key", "associated_objects": [ { "id": "{{CARD_ID}}", "type": "issuing.card" } ], "created": 1586556828, "expires": 1586560428, "livemode": false, "secret": "ek_test_YWNjdF8xRmdlTjZFRHelWWxwWVo5LEtLWFk0amJ2N0JOa0htU1JzEZkd2RpYkpJdnM_00z2ftxCGG" } ``` Vous devez également créer un endpoint pour récupérer les informations de la carte émise, qu’il vous faudra transmettre au composant `` : ```curl curl https://api.stripe.com/v1/issuing/cards/ISSUING_CARD_ID \ -u "<>:" ``` ## Mettre votre application à jour [Côté client] Tout d’abord, déterminez si l’appareil est admissible à l’approvisionnement Push en vérifiant que la valeur de `wallets.apple_pay.eligible` dans la carte émise (récupérée à partir du deuxième endpoint que vous avez créé ci-dessus, à l’étape 3) est `true`. Si tel est le cas, enregistrez les informations de la carte pour les utiliser ultérieurement dans notre composant, puis continuez. Si `wallets.apple_pay.eligible` est défini sur `false`, n’affichez pas le `` sur iOS, sinon votre application pourrait être rejetée lors de la vérification de l’App Store. Il en va de même pour `wallets.google_pay.eligible` sur Android. ```javascript import React, {useEffect, useState} from 'react'; import {Constants} from '@stripe/stripe-react-native'; import {View} from 'react-native'; export default function MyScreen() { const [key, setKey] = useState(null);const [card, setCard] = useState(null); useEffect(() => { fetchEphemeralKey();fetchIssuingCard(); }, []); const fetchIssuingCard = async () => { const response = await fetch(`${API_URL}/issuing-card`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ISSUING_CARD_ID: '{{ISSUING_CARD_ID}}', }), }); const card = await response.json(); if (!card.wallets.apple_pay.eligible) { // Do not show component on iOS. See card.wallets.apple_pay.ineligible_reason for details } else if (!card.wallets.google_pay.eligible) { // Do not show component on Android. See card.wallets.google_pay.ineligible_reason for details } else { setCard(card); } }; const fetchEphemeralKey = async () => { // See above }; return ; } ``` Ensuite, récupérez votre clé éphémère auprès du premier endpoint que vous avez créé à l’étape 3 ci-dessus et enregistrez-la. ```javascript import React, {useEffect, useState} from 'react'; import {Constants} from '@stripe/stripe-react-native'; import {View} from 'react-native'; export default function MyScreen() { const [key, setKey] = useState(null); useEffect(() => { fetchEphemeralKey(); }, []); const fetchEphemeralKey = async () => { const response = await fetch(`${API_URL}/ephemeral-key`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ ISSUING_CARD_ID: '{{ISSUING_CARD_ID}}', API_VERSION: Constants.API_VERSIONS.ISSUING, }), }); const myKey = await response.json(); setKey(myKey); }; return ; } ``` Vous n’avez plus besoin de communiquer avec le serveur. Vous devez ensuite déterminer si la carte *peut* être ajoutée au portefeuille. Vous pouvez vérifier cela à l’aide de la méthode `canAddCardToWallet`, qui renvoie un objet contenant un champ booléen `canAddCard`. Si `canAddCard` est défini sur `false`, n’affichez pas le paramètre `AddToWalletButton`, car votre application pourrait être rejetée par Apple. Sur Android, il se peut que la carte soit déjà présente dans le portefeuille, mais que son état soit bloqué. Pour résoudre ce problème, vous pouvez ajouter une logique permettant de vérifier la réponse `token` renvoyée par `canAddCardToWallet` dans l’objet `details`. Si cette réponse est non nulle et que `token.status` est `"TOKEN_STATE_NEEDS_IDENTITY_VERIFICATION"`, transmettez ce `token` aux propriétés de ``. ```javascript import React, {useEffect, useState} from 'react'; import {Constants, canAddCardToWallet, GooglePayCardToken} from '@stripe/stripe-react-native'; import {View} from 'react-native'; export default function MyScreen() { const [key, setKey] = useState(null); const [card, setCard] = useState(null);const [showAddToWalletButton, setShowAddToWalletButton] = useState(false); const [androidCardToken, setAndroidCardToken] = useState(null); useEffect(() => { fetchEphemeralKey(); fetchIssuingCard(); }, []); const checkIfCanAddCard = async () => { const { canAddCard, details, error } = await canAddCardToWallet({ primaryAccountIdentifier: card?.wallets?.primary_account_identifier, cardLastFour: card.last4, hasPairedAppleWatch: // Pass a boolean indicating whether or not the device has a paired Apple Watch. iOS only. }); if (error) { Alert.alert(error.code, error.message); } else { setShowAddToWalletButton(canAddCard); if (details?.token?.status === 'TOKEN_STATE_NEEDS_IDENTITY_VERIFICATION') { setAndroidCardToken(details.token); } } }; const fetchIssuingCard = async () => { // See aboveawait checkIfCanAddCard(); }; const fetchEphemeralKey = async () => { // See above }; return ; } ``` Nous disposons désormais de toutes les informations nécessaires pour pouvoir afficher ce bouton : ```javascript import React, {useEffect, useState} from 'react'; import { Constants, canAddCardToWallet, AddToWalletButton, GooglePayCardToken, } from '@stripe/stripe-react-native'; import {View, Image, Alert, StyleSheet} from 'react-native'; import AddToGooglePayPNG from '../assets/Add-to-Google-Pay-Button-dark-no-shadow.png'; export default function MyScreen() { const [key, setKey] = useState(null); const [card, setCard] = useState(null); const [showAddToWalletButton, setShowAddToWalletButton] = useState(false); const [androidCardToken, setAndroidCardToken] = useState(null); useEffect(() => { fetchEphemeralKey(); fetchIssuingCard(); }, []); const canAddCard = async () => { // See above }; const fetchIssuingCard = async () => { // See above }; const fetchEphemeralKey = async () => { // See above }; return ( {showAddToWalletButton && ( { Alert.alert( error ? error.code : 'Success', error ? error.message : 'Card was successfully added to the wallet.', ); }} /> )} ); } const styles = StyleSheet.create({ payButton: { // You may add custom styles to your button, but make sure it complies // with the relevant platform guidelines: // iOS : https://developer.apple.com/wallet/add-to-apple-wallet-guidelines/ // Android : https://developers.google.com/pay/issuers/apis/push-provisioning/android/branding-guidelines }, }); ``` Lorsqu’un utilisateur touche le bouton, il lance l’interface utilisateur permettant d’ajouter la carte au portefeuille. Implémentez ce rappel dans votre propriété `onComplete`. Si le champ `error` est non nul, une erreur se produit et la carte n’est pas ajoutée au portefeuille. Au contraire, si `error` est nul, la carte peut être ajoutée. ### Apparence du bouton Sur iOS, l’apparence du bouton est déterminée par la propriété `iOSButtonStyle`. Définissez-la sur : - `onLightBackground` lorsque vous affichez le bouton sur un arrière-plan clair ou blanc. - `onDarkBackground` lorsque vous affichez le bouton sur un arrière-plan sombre ou noir. Sur Android, vous devez transmettre la ressource de l’image réelle à la propriété `androidAssetSource`. Vous pouvez télécharger toutes les options de ressources possibles [directement depuis Google](https://developers.google.com/static/pay/issuers/apis/push-provisioning/android/downloads/add-to-wallet-png.zip). Suivez les [instructions de Google relatives à la marque](https://developers.google.com/pay/issuers/apis/push-provisioning/android/branding-guidelines#style) lorsque vous implémentez votre bouton. Pour transmettre le fichier PNG de votre choix au composant `AddToWalletButton`, ajoutez-le à votre projet, importez-le de la même manière que n’importe quelle ressource et résolvez la source avec `Image.resolveAssetSource` : ```javascript import {Image} from 'react-native'; import AddToGooglePayPNG from '../assets/Add-to-Google-Pay-Button-dark-no-shadow.png'; ... ``` ## Tests ### iOS Sur iOS, vous pouvez tester le provisionnement push en développement sur des simulateurs ou à l’aide de cartes de test, du moment que vous transmettez le paramétrage `testEnv={true}` au composant `AddToWalletButton`. Cependant, notez que si la propriété `testEnv` est définie sur `true`, les cartes ne seront pas ajoutées au wallet de l’appareil. Dans les environnements de test, le droit d’accès `com.apple.developer.payment-pass-provisioning` n’est pas nécessaire. ### Android Sur Android, la propriété `testEnv` n’a aucun effet. Tous les tests doivent être réalisés en mode production, avec des cartes réelles et sur des appareils physiques. Veillez à fournir votre ID d’application à Stripe avant de commencer les tests internes.