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
totrue
- Optionally set
payMethod.customerId
if this is a returning customer. Otherwise ignore this field and Tyro will generate a newcustomerId
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.
// 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.
// 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.
// 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.
// 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.
// 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.
// 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 payMethodId
s 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
.