Develop Embedded Payment Forms With Stripe And Ordway – Ordway Support Portal

Steps involved in implementing and capturing the payment form

Create a form to capture the payment method information from customers.
Use the Stripe JS library to create the form which will generate the input form and details will be captured in an IFrame hosted by Stripe so that you are PCI compliant.
Call the stripe payment method api which will store the payment method and return the payment method id.
Call the Stripe Customer API to create the customer and attach the payment method id to it.
Call the Ordway customer’s API to update the stripe customer id with the Ordway customer for future payments via Ordway.
Sample example source code for the below is found here: https://github.com/ordwaylabs/stripe-embedable-forms

Create Embeddable Form

Include stripe js v3 in your html and follow the instruction mentioned in this document to initialize stripe.

<script src="https://js.stripe.com/v3/"></script>

// Initialize the stripe. Pass your publishable key

var stripe = Stripe('pk_test_NQU2GbIrWeWQ2v1oNJnxnvZq');

2. Use the Stripe Elements to create the input form parameters using the Stripe element documentation found here: https://stripe.com/docs/js/elements_object/create

Create a html form page with <div> tag with unique id inside which the stripe will be embedding the iframe like ‘example1-card’ in the below table.

<html>

<script src="js/index.js" data-rel-js></script>

<body>

          <form>

 <fieldset>

   <div class="row">

   

 <fieldset>

   <div class="row">

     <div id="example1-card"></div>

   </div>

 </fieldset>

 <button type="submit" data-tid="elements_examples.form.pay_button">Pay $25</button>

 <div class="error" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">

     

   <span class="message"></span></div>

</form>

 

</body>

</html>

Then create a javascript file ccform.js or any other javascript in which create the ‘Elements’ functions provides by the javascript Stripe library like this.
- Create a card element highlighted in orange. Provide styling as needed.
- Insert the card variable in the div element we specified above and register the element. This action embeds the element.
- Style the elements using the style object:

(function() {

 'use strict';

 var elements = stripe.elements({

   fonts: [

     {

       cssSrc: 'https://fonts.googleapis.com/css?family=Roboto',

     },

   ],

   // Stripe's examples are localized to specific languages, but if

   // you wish to have Elements automatically detect your user's locale,

   // use `locale: 'auto'` instead.

   locale: window.__exampleLocale

 });

 var card = elements.create('card', {

   iconStyle: 'solid',

   style: {

     base: {

       iconColor: '#c4f0ff',

       color: '#fff',

       fontWeight: 500,

       fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',

       fontSize: '16px',

       fontSmoothing: 'antialiased',

       ':-webkit-autofill': {

         color: '#fce883',

       },

       '::placeholder': {

         color: '#87BBFD',

       },

     },

     invalid: {

       iconColor: '#FFC7EE',

       color: '#FFC7EE',

     },

   },

 });

 card.mount('#example1-card');

 registerElements([card], 'example1');

})();

3. Invoke the payment methods API provided by the stripe JS library:

https://stripe.com/docs/js/payment_methods/create_payment_method
In the main index.js file, create a function for form onSubmitHandler and then call the stripe.createPaymentMethod api, passing the card element to it.

stripe.createPaymentMethod({

type: 'card',

card: elements[0],

billing_details: additionalData

}).then(function(result) {

 // Stop loading!

 example.classList.remove('submitting');

 if (result.payment_methods) {

   // If we received a token, show the token ID.

   example.querySelector('.token').innerText = result.payment_methods.id;

   example.classList.add('submitted');

 } else {

   // Otherwise, un-disable inputs.

   enableInputs();

 }

});

4. Create the Stripe Customer(https://stripe.com/docs/api/customers/create). Create the stripe customer and attach the payment method id generated in step 3.

- Creation of stripe customer is not supported by the stripe client JS library, instead it must be implemented at the server side as it requires the Stripe API key to create it.
- Sample using Ruby:

require 'stripe'

Stripe.api_key = 'sk_test_FJgeztefrEY0hsoId2D9uscA008021MdjZ'

Stripe::Customer.create({

  description: 'My First Test Customer (created for API docs)',

})

5. Grab the customer ID from the response and pass the both stripe customer id and the payment method id gathered in Step 3 and call another API to attach the payment method to customer.

- https://stripe.com/docs/api/payment_methods/attach?lang=ruby

require 'stripe'

Stripe.api_key = 'sk_test_FJgeztefrEY0hsoId2D9uscA008021MdjZ'

Stripe::PaymentMethod.attach(

  'pm_1ItDptJUaagdUQ6fQHBOyMKs',

  {customer: 'cus_Gu0CxkvK3U8bbH'},

)

6. Send the stripe customer Id returned from Step 4 to the Ordway Customer.

- https://ordwaylabs.stoplight.io/docs/ordway/b3A6MTY0OTE4NzY-get-all-customer-information

Steps involved in implementing and capturing the payment form

Create Embeddable Form

Related articles