{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Save and Reuse a Pay Method","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"save-and-reuse-a-pay-method","__idx":0},"children":["Save and Reuse a Pay Method"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please note that pay methods can't be saved for device or wallet payments."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"integration-steps","__idx":1},"children":["Integration Steps"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"prerequisites","__idx":2},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please familiarise yourself with the guide to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js"},"children":["Accept an Online Payment"]},", as the steps outlined in this document builds upon the existing integration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"saving-the-pay-method","__idx":3},"children":["Saving the Pay Method"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Follow the steps to first save the customer's payment method."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"1-your-server---configure-pay-request-to-save-pay-method","__idx":4},"children":["1. Your Server - Configure Pay Request to save Pay Method"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When you ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/create-pay-request"},"children":["create a Pay Request"]},","]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethod.save"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optionally set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethod.customerId"]}," if this is a returning customer. Otherwise ignore this field and Tyro will generate a new ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," and link it to the new payMethod."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tyro will save the payment method and generate new customer used upon successful execution of the Pay Request."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nconst express = require(\"express\");\nconst app = express();\nconst axios = require('axios');\n\napp.post(\"/create-order\", async (req, res) => {\n  const { items } = req.body;\n  const totalAmountInCents = calculateTotal(items);\n\n  const payRequest = await axios.post('https://api.tyro.com/connect/pay/requests',\n  {\n    \"locationId\": \"tc-examplelocation-3000\",\n    \"provider\": {\n        \"name\": \"TYRO\",\n        \"method\": \"CARD\"\n    },\n    \"origin\": {\n      \"orderId\": \"0f448ac1-862a-4c7b-bdb4-a3b7cdbf444\"\n    },\n    \"total\": {\n        \"amount\": totalAmountInCents,\n        \"currency\": \"AUD\"\n    },\n    // Tell Tyro to save the payment method used by this Pay Request\n    \"payMethod\": {\n      // Optionally provide a Tyro generated customerId if this is a returning customer\n      // A new customerId will be generated if no customerId is provided\n      //  \"customerId\": \"0f448ac1-862a-4c7b-bdb4-a3b7cdbf446\",\n        \"save\": true\n    }\n  },\n  {\n    headers: {\n    'Content-Type': 'application/json',\n    'Authorization': 'Bearer exampleJwt'\n    }\n  });\n\n  res.send({\n    paySecret: payRequest.paySecret,\n  });\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"2-your-server---save-the-pay-method-and-customer-in-your-database","__idx":5},"children":["2. Your Server - Save the Pay Method and Customer in your database"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Listen to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9/notification-events"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NEW_PAY_METHOD"]}," Webhook event"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/get-pay-method"},"children":["Fetch the Pay Method"]}," when you receive the event."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Retrieve the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Save the Pay Method ID and Customer ID to your database. You will need these fields for future requests."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nasync function onNewPayMethodEvent(event) {\n   const payMethodId = event.data.id;\n   const payMethod = await axios.get(`https://api.tyro.com/connect/pay/methods/${payMethodId}`',\n        {\n        headers: {\n        'Content-Type': 'application/json',\n        'Authorization': 'Bearer exampleJwt'\n        }\n    });\n\n   const customerId = payMethod.customerId;\n\n   // Your logic to save the Pay Method ID & Customer ID here\n   saveCustomerPayMethod(customerId, payMethodId)\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-the-saved-pay-method","__idx":6},"children":["Using the saved Pay Method"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"3-optional---display-customers-pay-methods","__idx":7},"children":["3. Optional - Display customer's Pay Methods"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You can optionally display a customer's payment methods by fetching the Pay Method IDs using the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," query param."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The customer can select a Pay Method if they have multiple, or you could set a default from your frontend."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nconst express = require(\"express\");\nconst app = express();\nconst axios = require('axios');\n\n// helper function\nasync function getPayMethodsForCustomer(customerId) {\n  const payMethods = await axios.get(`https://api.tyro.com/connect/pay/methods?customerId={customerId}`',\n        {\n        headers: {\n        'Content-Type': 'application/json',\n        'Authorization': 'Bearer exampleJwt'\n        }\n    });\n  return payMethods;\n}\n\napp.get(\"/pay-methods\", async (req, res) => {\n  const customerId = getTyroCustomerId(req); // your function to get the Tyro customerId\n  const customerPayMethods = getPayMethodsForCustomer(payMethodId);\n\n  res.send({\n    payMethods: customerPayMethods,\n  });\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"4-your-server---create-a-pay-endpoint","__idx":8},"children":["4. Your Server - Create a pay endpoint"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethod.id"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethod.customerId"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["action"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SUBMIT"]},"."," ","Once the Pay Request is submitted, send back the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["status"]}," to your frontend."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nconst express = require(\"express\");\nconst app = express();\nconst axios = require('axios');\n\napp.post(\"/quick-pay\", async (req, res) => {\n  const { items, payMethodId, customerId } = req.body;\n  const totalAmountInCents = calculateTotal(items);\n\n  // Set the payMethod.id and action\n  const payRequest = await axios.post('https://api.tyro.com/connect/pay/requests',\n  {\n    \"locationId\": \"tc-examplelocation-3000\",\n    \"provider\": {\n        \"name\": \"TYRO\",\n        \"method\": \"CARD\"\n    },\n    \"total\": {\n        \"amount\": totalAmountInCents,\n        \"currency\": \"AUD\"\n    },\n    \"payMethod\": {\n      \"id\": payMethodId, // the Pay Method ID you wish to use for this customer\n      \"customerId\": customerId // the Customer linked to this Pay Method\n    },\n    \"action\": \"SUBMIT\" // will submit the payment immediately\n  },\n  {\n    headers: {\n    'Content-Type': 'application/json',\n    'Authorization': 'Bearer exampleJwt'\n    }\n  });\n\n  res.send({\n    status: payRequest.status\n  });\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"5-your-frontend---handle-the-response","__idx":9},"children":["5. Your Frontend - Handle the response"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the request is sent to your endpoint handle the response on the frontend."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nasync function quickPay() {\n  const response = await fetch(\"/quick-pay\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify({ items, customerId, payMethodId }),\n  });\n\n  const { status } = await response.json();\n    switch (status) {\n    case \"PROCESSING\":\n      return showProcessing();\n    case \"SUCCESS\":\n      return showSuccess();\n    case \"FAILED\":\n      return showFail();\n    ......\n  }\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"delete-a-pay-method","__idx":10},"children":["Delete a Pay Method"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a customer no longer wishes to have their payment details stored, the associated Pay Method can be deleted by providing the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethodId"]}," to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/delete-pay-method"},"children":["Delete Pay Method"]}," request."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Node sample code\nasync function deletePayMethod(payMethodId) {\n  return axios.delete(`https://api.tyro.com/connect/pay/methods/${payMethodId}`,\n        {\n        headers: {\n          'Authorization': 'Bearer exampleJwt'\n        }\n    });\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you wish to delete multiple Pay Methods for the customer, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethodId"]},"s can be obtained for the customer by providing the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/list-pay-methods"},"children":["List Pay Methods"]}," request."," ","The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-explorer/pay-online/0.9#operations/delete-pay-method"},"children":["Delete Pay Method"]}," request would need to be invoked for each ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payMethodId"]},"."]}]},"headings":[{"value":"Save and Reuse a Pay Method","id":"save-and-reuse-a-pay-method","depth":1},{"value":"Integration Steps","id":"integration-steps","depth":2},{"value":"Prerequisites","id":"prerequisites","depth":3},{"value":"Saving the Pay Method","id":"saving-the-pay-method","depth":3},{"value":"1. Your Server - Configure Pay Request to save Pay Method","id":"1-your-server---configure-pay-request-to-save-pay-method","depth":4},{"value":"2. Your Server - Save the Pay Method and Customer in your database","id":"2-your-server---save-the-pay-method-and-customer-in-your-database","depth":4},{"value":"Using the saved Pay Method","id":"using-the-saved-pay-method","depth":3},{"value":"3. Optional - Display customer's Pay Methods","id":"3-optional---display-customers-pay-methods","depth":4},{"value":"4. Your Server - Create a pay endpoint","id":"4-your-server---create-a-pay-endpoint","depth":4},{"value":"5. Your Frontend - Handle the response","id":"5-your-frontend---handle-the-response","depth":4},{"value":"Delete a Pay Method","id":"delete-a-pay-method","depth":3}],"frontmatter":{"title":"Save and Reuse a Pay Method","seo":{"title":"Save and Reuse a Pay Method"}},"lastModified":"2026-09-02T06:39:28.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/payment-scenarios/save-payment-details","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}