Payment (CNP) Stripe

Overview

We currently do not have our own JavaScript library that will abstract functionality for each processor, so you will need to implement client side JS functionality using the processors web components. This section is for card-not-present (CNP) / eCommerce payment processing. These elements do not require you to be PCI compliant and do not require any handling of credit card data on your part.

Stripe Elements

An overview of Stripes web elements is here:
https://stripe.com/docs/payments/payment-element

Detailed documentation for their JavaScript library is here:
https://stripe.com/docs/js

Stripe Example

Here is a very simple example of the flow for a customer checking out from a web page or hand keying the information from your POS system.

Get Payment Intent

You will need to create a payment intent either server side or client-side by calling the Payment CREATE API endpoint. https://quilt-payment-api.readme.io/reference/createpaymentintent-1
This will return a result that has a "token" and you'll need this token to create the payment element.

Collect Payment

Next create a web page, include the Stripe JS library and a DIV with an ID for attaching the web element. This is how you will collect the payment method (i.e. the credit card details). We currently do no support getting the payment method via the backend.

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
</body>

Using JavaScript, initialize Stripe and attach a web element to the DIV in your html.

// Initialize Stripe and Elements
const stripe = Stripe("pk_test_your_public_key_here");
const elements = stripe.element({ clientSecret: '{{token from API request above}}' });

// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

Confirm Payment

The customer can enter their payment details in the element that will be rendered in the HTML. You'll need some sort of button for the customer click to make payment, that button will then need to confirm the payment details in the payment element. Either and error will be returned or it will succeed.

stripe.confirmPayment({ elements }).then((result) => {
  if (result.error) {
    // Handle error
  } else {
    // Success
  }
);

Please not - this is a very basic example. Many more advanced scenarios are supported. Please refer to the Stripe documentation for more details.