Integrating Stripe

This guide will help you configure a Stripe payment gateway.

Requirements

To follow this tutorial, you should be familiar with the Payments Module, the Stripe Module, the Stripe API and the Stripe Dashboard. You also need to have access to the Partner Portal, and know how to install a module.

• Payments Module
• Stripe Module
• Stripe API Keys
• Updating Instance Configuration
• Installing a Module

Steps

Integrating and configuring a Stripe payment gateway is a 3-step process:

Step 1: Install the Payments and Stripe Modules in Partner Portal

Install the following free modules:

• Payments
• Stripe

During the installation process, set up Stripe public and secret keys.

Make sure that enable_sms_and_api_workflow_alerts_on_staging in your Instance configuration is set to true.

Step 2: Create minimal working payment example

On the page of your choice, use the predefined gateway_request_form and configure it with your data:

{% liquid
  assign gateway_name = 'stripe'
  export gateway_name, namespace: "payments"
%}

{%- parse_json 'data' -%}
  {
    "email": "{{ context.current_user.email }}",
    "currency": "USD",
    "description": "Charge Example",
    "statement_descriptor": "Example 1.",
    "capture": "true",
    "amount": "500"
  }
{%- endparse_json -%}

{%- parse_json 'config' -%}
  {
    "button": "Pay Now",
    "request_type": "create_payment",
    "require_zip": "true"
  }
{%- endparse_json -%}

{%-
  include_form 'modules/payments/gateway_request_form',
  config: config,
  data: data
%}

The predefined create_payment template will be rendered on your page.

For more information read the create_payment request documentation.

Step 3: List payments

To check the state of the payment, use the predefined modules/payments/get_payments query.

<div class="mt-4">
  <h4>List of last payments:</h4>
  {% graphql g = "modules/payments/get_payments" %}

  <table class="table">
    <tr>
      <th>ID</th>
      <th>State</th>
      <th>Payer</th>
      <th>Amount</th>
      <th>Actions</th>
    </tr>
    {% for payment in g.payments.results  %}
      <tr>
        <td>{{ payment.id }}</td>
        <td>{{ payment.properties.state | capitalize }}</td>
        <td>{{ payment.user.name }}</td>
        <td>{{ payment.properties.amount_cents | pricify_cents }}</td>
        <td>{% include 'modules/payments/create_refund', payment: payment %}</td>
      </tr>
    {% endfor %}
  </table>
</div>

Live example and source code

You will find more payment examples in the following project:

• Payment Examples Repository
• Payment Examples Page

List of examples:

• Integrating Stripe payments - the example presented in this article
• Stripe Elements - explains how to integrate Stripe Element Components with the Payments Module
• Saving Account - goes through all the details of Stripe Connect integration
• Saving Customer - example of reusing saved customer credit cards for future payments