OneSpan Sign How To: Intégration avec Stripe

Pour ce blog, j'ai pensé que ce serait une bonne idée de vous montrer comment OneSpan Sign peut être utilisé en conjoncture avec une autre API. Dans cet exemple, je vais créer une application web simple qui demande à l'utilisateur de remplir ses informations (par exemple prénom, nom de famille, e-mail, etc) et ensuite présenter un exemple de contrat à signer. À la fin de la signature, l'utilisateur est ensuite redirigé vers un autre formulaire, où il est tenu d'entrer ses informations de carte de crédit afin de traiter le paiement avec Stripe, une plate-forme logicielle qui permet aux développeurs Web d'intégrer une solution de paiement dans leurs sites Web.

Exigences

Afin d'exécuter cet exemple, vous aurez besoin de ce qui suit: PHP 5.5 ou plus (lien) - OneSpan Sign sandbox compte (lien) - Stripe sandbox compte (lien) - Serveur web de développement (par exemple. XAMPP) - Stripe PHP bibliothèque (lien) La plupart du code a déjà été couvert dans un blog précédent, que je ne vais pas revenir. Je couvrirai tout après la signature du contrat en utilisant OneSpan Sign. Le projet complet est également disponible sur le Developer Community Code Share, ici.

Le code

Let's get started. Le code de l'échantillon ci-dessous est très similaire à la page contrat de mon blog précédent, à l'exception de quelques modifications.

	
		
	tête
        
	
	
			

Signez le bon de commande ci-dessous :
    

       

       
    !--Endvid---
    Procéder au paiement


	corps
html

    $('#check').click(fonction).
	    $.ajax
	      type: "POST",
		  url: "check_session.php",
		  données: 'id:" " ,
		  dataType: "json",
		  succès : fonction (données)
			    si (données['status'] 'COMPLETED')
			       	emplacement.href - "stripe.html"
			    }
			    autre {
			        alerte ('S'il vous plaît signer tous les documents!');
			    }
		  }
		});
	});

Autrement dit, j'ai ajouté un bouton ci-dessous l'iframe qui vérifie l'état du paquet en utilisant jQuery et un script PHP (par exemple "check_session.php"). Une fois que l'utilisateur clique sur le bouton pour passer au formulaire de paiement, un POST est fait pour "check_session.php", qui prend dans l'id paquet, puis exécute ensuite une demande GET à OneSpan Sign pour récupérer l'état du paquet. Si OneSpan Sign retourne "COMPLETED", l'utilisateur est redirigé vers le formulaire de paiement (c'est-à-dire "stripe.html"). Dans le cas contraire, une fenêtre contextrale apparaîtra demandant à l'utilisateur de terminer la signature des documents. Le script "check_session.php" est affiché ci-dessous:

L'étape suivante consiste à créer le formulaire de carte de crédit (c.-à-d. "stripe.html"). Je vais seulement passer en charge le script jQuery (voir ci-dessous), puisque la création de la forme elle-même devrait être simple. La seule chose que vous devrez vous assurer est que chaque entrée doit avoir l'attribut de bande de données afin que la bibliothèque Stripe.js recueille l'information.

		Stripe.setPublishableKey ('pk_test_'); clé de test rayé epubliable

		$(fonction).)
		 var $form ''#payment-form');
		 $form.soumettre (fonction(événement)
		  Désactiver le bouton soumettre pour éviter les clics répétés :
		  $form.find('.submit').prop ('disabled', true);

		  Demandez un jeton de Stripe:
		  Stripe.card.createToken ($form, stripeResponseHandler);

		  Empêcher la soumission du formulaire :
		  retour faux ;
		 });
		});

		fonction stripeResponseHandler (statut, réponse)
		 Prenez le formulaire:
		 var $form ''#payment-form');

		 si (response.error) - // Problème!

		  Afficher les erreurs sur le formulaire :
		  $form.find('.payment-errors').text (response.error.message);
		  $form.find('.submit').prop ('disabled', faux); Réactiver la soumission

		 Le jeton a été créé !

		  Obtenez l'ID symbolique :
		  var jeton et response.id;
		  console.log (jeton);
		  Insérez l'ID de jeton dans le formulaire afin qu'il soit soumis au serveur :
		  $form.append($/').val (jeton));

		  Soumettez le formulaire :
		  $form.get(0).soumettre();
		 }
		}; 

Une fois que l'utilisateur a entré ses informations de carte de crédit, les détails de paiement sont convertis en un jeton de représentant à usage unique en envoyant les détails de paiement à Stripe. De cette façon, les données sensibles ne sont jamais stockées sur votre serveur. En d'autres termes, une violation de vos serveurs n'entraînera pas de vol de cartes de crédit. Si vous n'avez pas déjà installé la bibliothèque PHP à ce stade, vous devrez le faire afin de créer une charge avec Stripe.

Une fois que vous avez reçu le jeton de Stripe, vous devrez le transmettre à votre serveur et utiliser la bibliothèque Stripe PHP afin de facturer votre utilisateur immédiatement, comme indiqué ci-dessus.

Exécution de votre code

Une fois que vous avez exécuté votre projet et rempli quelques informations d'échantillon, vous serez présenté avec le contrat d'achat prêt à être signé, comme indiqué ci-dessous. Allez-y et signez-le. Avec cela fait, vous pouvez maintenant cliquer sur le bouton "Proceed to Payment". Vous pouvez utiliser l'exemple suivant de l'information de crédit fournie par Stripe pour tester l'intégration : Numéro de carte de crédit : 4242 4242 4242 Date d'expiration : 12/17 CVC : 123 Une fois le paiement traité, vous serez redirigé vers la page d'achèvement. Vous pouvez également vous connecter à votre compte Stripe et examiner les journaux pour vérifier le succès de la transaction. Si vous avez des questions concernant ce blog ou toute autre chose concernant l'intégration oneSpan Sign dans votre application, visitez les forums de la communauté des développeurs: https://developer.OneSpan.com. C'est moi qui l'ai fait. Merci de lire! Si vous avez trouvé ce message utile, s'il vous plaît le partager sur Facebook, Twitter, ou LinkedIn.

Haris Haidary Junior Technical Evangelist LinkedIn (fr) Twitter (en)