Comme mon précédent blog , celui-ci est également le résultat de la recherche d'une meilleure approche pour la méthode obsolète, cette fois par Stripe.

Vous pouvez accéder directement à la partie dont vous avez besoin, à savoir React Native, Kotlin ou Java.

Histoire derrière -

Je travaillais sur un projet Java pour un client et j'ai vu "Ajouter une carte" ne fonctionnait pas. Sauté au code et a vu que la méthode de la carte était obsolète et que créer un jeton ne fonctionnait pas. Ensuite, l'autre jour, il a fallu gérer la base de code React Native et faire fonctionner le même genre de chose. La plus récente est l'application Kotlin que j'ai créée avec la méthode d' ajout de carte intégrée. Donc, en gros, j'ai dû faire face aux trois ( j'ai raté Flutter mais je veux vraiment essayer à nouveau) et je l'ai appris avec succès et maintenant je suis ici pour montrer comment le faire.

Exemple de React Native

Dans l'image ci-contre, MM / YY et CVV apparaissent après avoir rempli le numéro de carte, donc juste pour vous le faire savoir, il est là.

Tout d'abord, ajoutez "tipsi-stripe": "^9.0.0"les dépendances de package.jsonlike:

"dependencies": {
   ...
   "tipsi-stripe":"^9.0.0"
}

Maintenant, importez et initialisez stripe dans un HOC ou dans le composant que vous souhaitez utiliser.

import stripe from 'tipsi-stripe'

stripe.setOptions({
   publishableKey: 'pk_test_publishableUniqueKey'
})

const stripeCardDialog = () => {
return stripe.paymentRequestWithCardForm()
   .then((stripeTokenInfo) => {
      console.log("[SUCCESS] Stripe Token ID: ", stripeTokenInfo.id)
   }).catch((error) => {
      console.log("[ERROR] User Cancelled the action")
   })
}

Exemple de Kotlin

Le CVV est masqué à côté de MM / AA qui devient visible une fois que le numéro de carte est rempli et que le formulaire se rétrécit.

Maintenant, pour commencer avec celui de Kotlin, comme toujours, ajoutez d'abord la dépendance dans le gradle de l'application.

dependencies {
    ...
    
    def stripeVersion = "16.1.1"
    implementation "com.stripe:stripe-android:$stripeVersion"
}

android {
  ...
  buildTypes.each {
   ...
   it.resValue 'string', 'stripe_pk', 'pk_test_publishableUniqueKey'
  }
}

Maintenant, créez une boîte de dialogue (avec une disposition de contrainte) dans la disposition nommée, tout ce que vous voulez, mais ici dialog_add_card.xmlet ajoutez l'extrait ci-dessous pour le widget d'entrée de carte de stripe, cela nous aidera à obtenir les données remplies par l'utilisateur que nous verrons plus tard.

<com.stripe.android.view.CardInputWidget
    android:id="@+id/widget_add_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dimen_4"
    android:padding="@dimen/dimen_4"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

private var stripe: Stripe? = null
private fun initStripe() {
    val stripeKey: String = getString(R.string.stripe_pk)
    stripe = Stripe(requireContext(), stripeKey)
}

Exemple Java

Comme vous le savez, Java n'est pas très différent de Kotlin en ce qui concerne le code. Donc, nous ne verrons que les extraits de fichier de classe et jusqu'à ce que la création de dialog_add_card.xmltout reste la même que la partie Kotlin ci-dessus.

Maintenant, venez à la classe où vous devez lancer Stripe et appelez la boîte de dialogue pour obtenir les détails de la carte.

Déclarez la variableprivate Stripe stripe;

Une fois la vue créée, appelez de la même manière initStripe()où initStripe () ressemble à:

private void initStripe() {
    String stripeKey = getString(R.string.stripepk);
    stripe = new Stripe(context, stripeKey);
}

Phew!! cela est devenu un peu long, mais merci de tenir le coup. Avant de terminer, quelques points à garder à l'esprit.

Gardez cela à l'esprit -

1. Si nécessaire, vous pouvez également ajouter la session client.
2. D'autres modes de paiement, tels que le compte bancaire peuvent également être ajoutés, il suffit de regarder les changements dans Stripe Docs
3. Vous pouvez fournir votre propre boîte de dialogue personnalisée pour obtenir l'entrée de la carte.
4. La clé publiable de Stripe peut également être stockée dans un autre fichier et peut être utilisée à partir de là, comme vous le souhaitez.