{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","framepay-toast"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Update payment instruments","description":"Learn how to update payment instruments.","siteUrl":"https://www.rebilly.com","image":"/assets/rebillysocial.94fb32fc280c9e84b963c440ec462771d25f4e6fdaaa6c59de41e8135113b46b.db81178d.png","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]},"keywords":"Developer docs, FramePay"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"updating-payment-instruments","__idx":0},"children":["Updating payment instruments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Keeping customers' payment card information up to date is very important."," ","With FramePay, updating payment card information is simple, safe, and secure."," ","Use a ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/examples/framepay-example-card-separated-partial.html"},"children":["separated fields"]}," form to update the expiration date, CVV, or billing address."]},{"$$mdtype":"Tag","name":"iframe","attributes":{"border":"0","frameBorder":"0","scrolling":"no","style":{"height":"320px","width":"100%"},"src":"/examples/framepay-example-card-separated-partial.html"},"children":[]},{"$$mdtype":"Tag","name":"small","attributes":{},"children":["Update your customer's payment cards Exp. date and CVV."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"border":"0","frameBorder":"0","scrolling":"no","style":{"height":"320px","width":"100%"},"src":"/examples/framepay-example-card-separated-partial-cvv.html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"small","attributes":{},"children":["It is possible to update only one field too (for example, CVV)."]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The process is similar to creating a payment instrument using the generated FramePay token. To update a payment instrument:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set up FramePay."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a form with the fields that you want to update."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Generate the token."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Finish the update flow."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"set-up-framepay","__idx":1},"children":["Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the code below to your page to enable Framepay."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<link href=\"https://framepay.rebilly.com/framepay.css\" rel=\"stylesheet\" />\n<script src=\"https://framepay.rebilly.com/framepay.js\"></script>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"create-a-form-with-the-fields-you-want-to-update","__idx":2},"children":["Create a form with the fields you want to update"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This step is similar to setting up a checkout form, but you will use a separated form style to capture the fields you want to update."," ","You can also update the billing address by adding fields with inputs that include the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," data attribute."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"<form>\n    <fieldset>\n        <div class=\"fields\">\n            <div class=\"field\">\n                <label for=\"exp\">Exp. Date</label>\n                <div id=\"exp\">\n                    <!-- FramePay will inject the payment card exp. field here -->\n                </div>\n                <div class=\"error\"></div>\n            </div>\n            <span></span>\n            <div class=\"field\">\n                <label for=\"cvv\">CVV</label>\n                <div id=\"cvv\">\n                    <!-- FramePay will inject the payment card CVV field here -->\n                </div>\n                <div class=\"error\"></div>\n            </div>\n        </div>\n    </fieldset>\n    <button type=\"submit\">Update payment card</button>\n</form>\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n    Framepay.initialize({\n        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs'\n    });\n\n    var form = document.querySelector('form');\n\n    Framepay.on('ready', function () {\n        var exp = Framepay.card.mount('#exp', 'cardExpiration');\n        var cvv = Framepay.card.mount('#cvv', 'cardCvv');\n\n        exp.on('change', function (e) {\n            // Handle field errors\n        });\n\n        cvv.on('change', function (e) {\n            // Handle field errors\n        });\n    });\n\n    form.addEventListener('submit', function (e) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        Framepay.createToken(form)\n            .then(result => {\n                console.log('FramePay success', result);\n                window.parent.postMessage('success', '*')\n            })\n            .catch(error => {\n                console.log('FramePay error', error);\n                window.parent.postMessage('error', '*')\n            });\n    });\n})();\n","lang":"JavaScript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"generate-the-token","__idx":3},"children":["Generate the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["On the JavaScript function where FramePay was initialized, trigger ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken"]}," to generate and inject the payment token into your form."," ","Use this token later to update the payment instrument."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"form.addEventListener('submit', function (e) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    Framepay.createToken(form)\n        .then(result => {\n            console.log('FramePay success', result);\n            window.parent.postMessage('success', '*')\n        })\n        .catch(error => {\n            console.log('FramePay error', error);\n            window.parent.postMessage('error', '*')\n        });\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"finish-the-update-flow","__idx":4},"children":["Finish the update flow"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that your FramePay token is generated, use any of the Rebilly backend SDKs to finish the update process."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-instruments/patchpaymentinstrument"},"children":["update process"]}," only requires the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," of the payment instrument you want to update and the token generated by FramePay."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rebilly-api-sdks","__idx":5},"children":["Rebilly API SDKs"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/Rebilly/rebilly-php"},"children":["Rebilly SDK for PHP"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.npmjs.com/package/rebilly-js-sdk"},"children":["Rebilly SDK for Node.js"]}]}]},{"$$mdtype":"Tag","name":"FramepayToast","attributes":{},"children":[]}]},"headings":[{"value":"Updating payment instruments","id":"updating-payment-instruments","depth":1},{"value":"Set up FramePay","id":"set-up-framepay","depth":2},{"value":"Create a form with the fields you want to update","id":"create-a-form-with-the-fields-you-want-to-update","depth":2},{"value":"Generate the token","id":"generate-the-token","depth":2},{"value":"Finish the update flow","id":"finish-the-update-flow","depth":2},{"value":"Rebilly API SDKs","id":"rebilly-api-sdks","depth":3}],"frontmatter":{"seo":{"title":"Update payment instruments","description":"Learn how to update payment instruments.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/updating-payment-instruments/":{},"/docs/developer-docs/framepay/update-payment-instruments/":{},"/docs/content/dev-docs/tutorial/update-payment-instruments/":{},"/docs/content/concepts-and-features/tutorial/update-payment-instruments/":{},"/docs/concepts-and-features/tutorial/update-payment-instruments/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/update-payment-instruments","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}