Processing Payments with GraphQL Mutations

This guide will teach you how to process payments with GraphQL mutations.

Requirements

It is recommended that you:

• have Stripe configured correctly as explained in Integrating Stripe
• understand how GraphQL mutations work

Steps

Processing payments with GraphQL mutations is a four-step process:

Step 1: Basics

It's up to you where and how you want to use the gateway_request mutation call. In this tutorial, we will present a simple scenario of mutation execution that can be placed anywhere. Each Request Type can be called with mutation instead of including a form as it was presented in the Integrating Stripe tutorial.

First create a test page where you can follow the example.

---
slug: payments-mutation-test
---

Make sure that the Payments Module and Stripe Module are installed on your site.

Step 2: Configuration and Data

Any gateway request mutation call needs to know what gateway to use and what kind of request to process. To do that, create a config object as you did with the include_form version.

{%- parse_json 'config' -%}
  {
    "request_type": "create_refund",
    "gateway": "stripe"
  }
{%- endparse_json -%}

Next one is data, please visit the documentation for the request_type you are calling. Refund payment requires charge, payment_id and the amount that is being refunded.

To keep it simple, use payments created in the Integrating Stripe tutorial.

{% liquid
  graphql g = "modules/payments/get_payments", per_page: 1
  assign payment = g.payments.results.first
%}

{%- parse_json 'data' -%}
  {
    "charge" : "{{ payment.properties.gateway_id }}",
    "payment_id": "{{ payment.id }}",
    "amount": "{{ payment.properties.amount_cents }}"
  }
{%- endparse_json -%}

Step 3: Execute migration

The configuration and data are prepared. You now need to wrap it in the format that's readable to the create_record mutation:

{% parse_json "refund_data" %}
  {
    "properties": [
       { "name": "config", "value": "{{ config | escape_javascript }}" },
       { "name": "data", "value":  "{{ data | escape_javascript }}" }
     ]
  }
{% endparse_json %}

And pass refund_data object to the GraphQL tag:

{% graphql g = "modules/payments/create_record", form: "modules/payments/gateway_request_mutation_form", data: refund_data %}
{% parse_json "payment_properties" %}
  {{ g.record_create.properties.data }}
{% endparse_json %}

Step 4: Test results

To confirm that your first mutation is executed correctly, sync or deploy the page to your instance and visit the page that you've just created. It should be available under the /payments-mutation-test path.

The properties of the modules/payments/refund object that was created with page render are displayed. Visit your Stripe Dashboard to confirm that the last payment was refunded.

Congratulations! You now know how to use any request_type with GraphQL mutations.

Live example and source code

For code examples please go to platformOS payment examples project hosted on Github.