Save and Reuse a Pay Method

Payment methods such as card details can be saved during a payment and used in future payments without re-prompting the customer to enter their details. Customer consent is required before saving their Pay Method, this could be shown as a simple checkbox labelled from your checkout.

Integration Steps

Prerequisites

Please familiarise yourself with the guide to Accept an Online Payment, as the steps outlined in this document builds upon the existing integration.

Saving the Pay Method

Follow the steps to first save the customer's payment method.

1. Your Server - Configure Pay Request to save Pay Method

When you create a Pay Request,

  • Set payMethod.save to true
  • Optionally set payMethod.customerId if this is a returning customer. Otherwise ignore this field and Tyro will generate a new customerId and link it to the new payMethod.

Tyro will save the payment method and generate new customer used upon successful execution of the Pay Request.

Copy
Copied
// Node sample code
const express = require("express");
const app = express();
const axios = require('axios');

app.post("/create-order", async (req, res) => {
  const { items } = req.body;
  const totalAmountInCents = calculateTotal(items);

  const payRequest = await axios.post('https://api.tyro.com/connect/pay/requests', 
  {
    "locationId": "tc-examplelocation-3000", 
    "provider": {
        "name": "TYRO",
        "method": "CARD"
    },
    "total": {
        "amount": totalAmountInCents,
        "currency": "AUD"
    },
    // Tell Tyro to save the payment method used by this Pay Request
    "payMethod": {
      // Optionally provide a Tyro generated customerId if this is a returning customer
      // A new customerId will be generated if no customerId is provided
      //  "customerId": "0f448ac1-862a-4c7b-bdb4-a3b7cdbf446", 
        "save": true,
    },
  }, 
  {
    headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer exampleJwt'
    }
  });

  res.send({
    paySecret: payRequest.paySecret,
  });
});

2. Your Server - Save the Pay Method and Customer in your database

  • Listen to the NEW_PAY_METHOD Webhook event
  • Fetch the Pay Method when you receive the event.
  • Retrieve the payMethod.customerId from the Pay Method response. Optionally, you can fetch the customerId & payMethodId from the Pay Request response after the Pay Method & Customer ID are saved.
  • Save the Pay Method ID and Customer ID to your database. You will need these fields for future requests.
Copy
Copied
// Node sample code
async function onNewPayMethodEvent(event) {
   const payMethodId = event.data.id;
   const payMethod = await axios.get(`https://api.tyro.com/connect/pay/methods/${payMethodId}`',
        {
        headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer exampleJwt'
        }
    });
   
   const customerId = payMethod.customerId;

   // Your logic to save the Pay Method ID & Customer ID here 
   saveCustomerPayMethod(customerId, payMethodId)
}

Using the saved Pay Method

The next time an authenticated customer wishes to make a purchase, you can use the saved Pay Method to make payments and skip the checkout flow completely.

3. Optional - Display customer's Pay Methods

  • You can optionally display a customer's payment methods by fetching the Pay Method IDs using the customerId query param.
  • The customer can select a Pay Method if they have multiple, or you could set a default from your frontend.
Copy
Copied
// Node sample code
const express = require("express");
const app = express();
const axios = require('axios');

// helper function
async function getPayMethodsForCustomer(customerId) {
  const payMethods = await axios.get(`https://api.tyro.com/connect/pay/methods?customerId={customerId}`',
        {
        headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer exampleJwt'
        }
    });
  return payMethods;
}

app.get("/pay-methods", async (req, res) => {
  const customerId = getTyroCustomerId(req); // your function to get the Tyro customerId
  const customerPayMethods = getPayMethodsForCustomer(payMethodId);

  res.send({
    payMethods: customerPayMethods,
  });
});

4. Your Server - Create a pay endpoint

Create an endpoint on your server that allows an authenticated customer to submit the payment straight away. This can be done by creating the Pay Request and setting the payMethod.id, payMethod.customerId and action to SUBMIT. Once the Pay Request is submitted, send back the status to your frontend.

Copy
Copied
// Node sample code
const express = require("express");
const app = express();
const axios = require('axios');

app.post("/quick-pay", async (req, res) => {
  const { items, payMethodId, customerId } = req.body;
  const totalAmountInCents = calculateTotal(items);

  // Set the payMethod.id and action
  const payRequest = await axios.post('https://api.tyro.com/connect/pay/requests', 
  {
    "locationId": "tc-examplelocation-3000", 
    "provider": {
        "name": "TYRO",
        "method": "CARD"
    },
    "total": {
        "amount": totalAmountInCents,
        "currency": "AUD"
    },
    "payMethod": {
      "id": payMethodId, // the Pay Method ID you wish to use for this customer
      "customerId": customerId // the Customer linked to this Pay Method
    },
    "action": "SUBMIT" // will submit the payment immediately
  }, 
  {
    headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer exampleJwt'
    }
  });

  res.send({
    status: payRequest.status
  });
});

5. Your Frontend - Handle the response

After the request is sent to your endpoint handle the response on the frontend.

Copy
Copied
// Javascript sample code
async function quickPay() {
  const response = await fetch("/quick-pay", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ items, customerId, payMethodId }),
  });

  const { status } = await response.json();
    switch (status) {
    case "PROCESSING":
      return showProcessing();
    case "SUCCESS":
      return showSuccess();
    case "FAILED":
      return showFail();
    ......
  }
}

Delete a Pay Method

If a customer no longer wishes to have their payment details stored, the associated Pay Method can be deleted by providing the payMethodId to the Delete Pay Method request.

Copy
Copied
// Node sample code
async function deletePayMethod(payMethodId) {
  return axios.delete(`https://api.tyro.com/connect/pay/methods/${payMethodId}`,
        {
        headers: {
          'Authorization': 'Bearer exampleJwt'
        }
    });
}

If you wish to delete multiple Pay Methods for the customer, the payMethodIds can be obtained for the customer by providing the customerId to the List Pay Methods request. The Delete Pay Method request would need to be invoked for each payMethodId.

Copyright © Tyro Payments 2019-2024. All right reserved.