{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","framepay-toast"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Use encrypted CVVs for payment instruments","description":"Learn how to use encrypted CVVs for 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":"use-encrypted-cvvs-for-payment-instruments","__idx":0},"children":["Use encrypted CVVs for payment instruments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes how to securely collect and use encrypted CVVs for payment instruments in the FramePay JavaScript library."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When this feature is active, your customers can speed up the payment process for future transactions by choosing to securely store their payment card CVVs."," ","The FramePay library will encrypt the customer-provided CVV with the Rebilly API and store it in the customer's web browser."," ","The CVV is not stored on Rebilly servers and will only be usable on the browser where it was collected."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"collect-cvv-securely-for-future-use","__idx":1},"children":["Collect CVV securely for future use"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This process describes how to securely collect and store payment card CVVs for future transactions."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this code to your page to enable the FramePay library."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["2. Create a form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a form with fields to collect payment card information."," ","Include fields for the cardholder's name, card number, expiration date, and CVV."," ","Include a checkbox input to allow customers to choose to store their payment card CVVs securely."]},{"$$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":"
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n
\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', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n\n var form = document.querySelector('form');\n\n Framepay.on('ready', function () {\n const card = Framepay.card.mount('#framepay-payment-card');\n\n card.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 })\n .catch(error => {\n console.log('FramePay error', error);\n });\n });\n})();\n","lang":"JavaScript"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["3. Generate the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the JavaScript function where FramePay is initialized, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken"]}," to generate and inject the payment token into your form."," ","Use this token to create a 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 })\n .catch(error => {\n console.log('FramePay error', error);\n });\n});\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["4. Use the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the generated token with any of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/sdks"},"children":["Rebilly SDKs"]}," to create a payment instrument with the token to be used in the future."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"collect-encrypted-cvv-for-an-existing-payment-instrument","__idx":2},"children":["Collect encrypted CVV for an existing payment instrument"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This process describes how to securely collect and store payment card CVVs for an existing instrument."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this code to your page to enable the FramePay library."," ","Then, initialize the FramePay library with your publishable key and website ID."," ","Replace the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["websiteId"]}," with your own values."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys#obtain-a-publishable-key"},"children":["Obtain a publishable key"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id"},"children":["Obtain your organization ID and website ID"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["2. Fetch the customer's payment instruments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-instruments/getpaymentinstrumentcollection"},"children":["Retrieve payment instruments"]}," API operation to fetch all customer payment instruments."," ","This operation returns a list of payment instruments that are associated with each customer."]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["3. Create a form"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"
\n
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n \n
\n
\n
\n \n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["4. Generate the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken"]}," function to generate a token that includes the encrypted CVV."," ","This token can then be used to update the payment instrument with the encrypted CVV."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass the following required values to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createToken"]}," to use the encrypted CVV:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableEncryptedCVV"]},": Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to enable encrypted CVV."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]},": Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment-card"]}," to indicate that the token is for a payment card."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingAddress"]},": An object containing the billing address information."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentInstrument"]},": An object containing the payment instrument information. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bin"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["last4"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expMonth"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expYear"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.createToken(form, {\n enableEncryptedCVV: true,\n method: 'payment-card',\n billingAddress: {\n address: '123 Main St', // Replace with the billing address\n city: 'Any town', // Replace with the billing city\n region: 'CA', // Replace with the billing region\n postalCode: '12345', // Replace with the billing postal code\n country: 'US' // Replace with the billing country\n },\n paymentInstrument: {\n bin: '123456', // Replace with the BIN of the payment instrument\n last4: '1234', // Replace with the last 4 digits of the payment instrument\n expMonth: '12', // Replace with the expiration month of the payment instrument\n expYear: '2025' // Replace with the expiration year of the payment instrument\n }\n})\n .then(result => {\n console.log('FramePay success', result);\n })\n .catch(error => {\n console.log('FramePay error', error);\n });\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["5. Update the payment instrument with the token and use for a transaction"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the token to update the payment instrument before using the payment instrument for a transaction."," ","Use any of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/sdks"},"children":["Rebilly SDKs"]}," and the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-instruments/patchpaymentinstrument"},"children":["Update the payment instrument"]}," API operation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"use-a-stored-encrypted-cvv","__idx":3},"children":["Use a stored encrypted CVV"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This process describes how to use an encrypted CVV for a payment card instrument that was previously created by the FramePay library."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this code to your page to enable the FramePay library."," ","Then, initialize the FramePay library with your publishable key and website ID."," ","Replace the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["websiteId"]}," with your own values."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys#obtain-a-publishable-key"},"children":["Obtain a publishable key"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id"},"children":["Obtain your organization ID and website ID"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["2. Fetch the customer's payment instruments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-instruments/getpaymentinstrumentcollection"},"children":["Retrieve payment instruments"]}," API operation to fetch all customer payment instruments."," ","This operation returns a list of payment instruments that are associated with each customer."]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["3. Verify if the payment instrument has an encrypted CVV stored in the browser"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["framepay.hasEncryptedCVV({ bin, last4, expMonth, expYear })"]}," function to check if the payment instrument has an encrypted stored CVV in the customer's current web browser."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the payment instrument has an encrypted CVV, the function returns ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."," ","If the result is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/use-framepay-encrypted-cvv#4.-generate-the-token-12"},"children":["generate the token"]}," and update the payment instrument."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the result is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},", ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/update-payment-instruments#updating-payment-instruments"},"children":["update the payment instrument and collect the CVV"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":" if (Framepay.hasEncryptedCVV({ bin, last4, expMonth, expYear })) {\n // Proceed to generate the token and update the payment instrument\n } else {\n // Handle the case where the payment instrument does not have an encrypted CVV\n }\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["4. Generate the token"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken"]}," function to generate a token that includes the encrypted CVV."," ","This token can then be used to update the payment instrument with the encrypted CVV."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass the following required values to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createToken"]}," to use the encrypted CVV:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableEncryptedCVV"]},": Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to enable encrypted CVV."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]},": Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment-card"]}," to indicate that the token is for a payment card."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingAddress"]},": An object containing the billing address information."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paymentInstrument"]},": An object containing the payment instrument information. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bin"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["last4"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expMonth"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expYear"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.createToken(form, {\n enableEncryptedCVV: true,\n method: 'payment-card',\n billingAddress: {\n address: '123 Main St', // Replace with the billing address\n city: 'Any town', // Replace with the billing city\n region: 'CA', // Replace with the billing region\n postalCode: '12345', // Replace with the billing postal code\n country: 'US' // Replace with the billing country\n },\n paymentInstrument: {\n bin: '123456', // Replace with the BIN of the payment instrument\n last4: '1234', // Replace with the last 4 digits of the payment instrument\n expMonth: '12', // Replace with the expiration month of the payment instrument\n expYear: '2025' // Replace with the expiration year of the payment instrument\n }\n})\n .then(result => {\n console.log('FramePay success', result);\n })\n .catch(error => {\n console.log('FramePay error', error);\n });\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["5. Update the payment instrument with the token and use for a transaction"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the token to update the payment instrument before using the payment instrument for a transaction."," ","Use any of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/sdks"},"children":["Rebilly SDKs"]}," and the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-instruments/patchpaymentinstrument"},"children":["Update the payment instrument"]}," API operation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"remove-encrypted-cvvs","__idx":4},"children":["Remove encrypted CVVs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This process describes how to remove an encrypted CVV for a payment card instrument that was previously created by the FramePay library."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this code to your page to enable the FramePay library."," ","Then, initialize the FramePay library with your publishable key and website ID."," ","Replace the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["websiteId"]}," with your own values."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys#obtain-a-publishable-key"},"children":["Obtain a publishable key"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id"},"children":["Obtain your organization ID and website ID"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["2. Remove encrypted CVVs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select one of the following options:"]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Remove all encrypted CVVs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the JavaScript function where FramePay is initialized, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.removeAllEncryptedCVVs"]}," to remove all stored encrypted CVVs for this website."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.removeAllEncryptedCVVs();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["Remove one encrypted CVV"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In the JavaScript function where FramePay is initialized, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.removeEncryptedCVV"]}," to remove a specific encrypted CVV."," ","Pass the payment instrument details to identify which CVV to remove."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.removeEncryptedCVV({\n bin: '123456', // Replace with the BIN of the payment instrument\n last4: '1234', // Replace with the last 4 digits of the payment instrument\n expMonth: '12', // Replace with the expiration month of the payment instrument\n expYear: '2025' // Replace with the expiration year of the payment instrument\n});\n","lang":"JavaScript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"update-an-encrypted-cvv","__idx":5},"children":["Update an encrypted CVV"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This process describes how to update an encrypted CVV for a payment card instrument that was previously created."]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Set up FramePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add this code to your page to enable the FramePay library."," ","Then, initialize the FramePay library with your publishable key and website ID."," ","Replace the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["websiteId"]}," with your own values."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/api-keys#obtain-a-publishable-key"},"children":["Obtain a publishable key"]}," and ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/settings/organizations-and-websites#obtain-your-organization-id-and-website-id"},"children":["Obtain your organization ID and website ID"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["1. Create a form with CVV field to update"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This step is similar to collecting the encrypted CVV initially, but you will use a separated form style to capture the CVV field to update."," ","Optionally, You can also ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/update-payment-instruments#updating-payment-instruments"},"children":["update the other properties of the payment instrument"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include a checkbox input to allow customers to choose to store their payment card CVVs securely."]},{"$$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":"
\n
\n
\n \n
\n \n
\n
\n
\n
\n \n \n
\n
\n \n
\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', // Replace with your publishable key\n websiteId: `website-123`, // Replace with your website ID\n });\n\n var form = document.querySelector('form');\n\n Framepay.on('ready', function () {\n var cvv = Framepay.card.mount('#cvv', 'cardCvv');\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 enableEncryptedCVV: true,\n method: 'payment-card',\n billingAddress: {\n address: '123 Main St', // Replace with the billing address\n city: 'Any town', // Replace with the billing city\n region: 'CA', // Replace with the billing region\n postalCode: '12345', // Replace with the billing postal code\n country: 'US' // Replace with the billing country\n },\n paymentInstrument: {\n bin: '123456', // Replace with the BIN of the payment instrument\n last4: '1234', // Replace with the last 4 digits of the payment instrument\n expMonth: '12', // Replace with the expiration month of the payment instrument\n expYear: '2025' // Replace with the expiration year of the payment instrument\n }\n })\n .then(result => {\n console.log('FramePay success', result);\n })\n .catch(error => {\n console.log('FramePay error', error);\n });\n });\n})();\n","lang":"JavaScript"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["2. 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 enableEncryptedCVV: true,\n method: 'payment-card',\n billingAddress: {\n address: '123 Main St', // Replace with the billing address\n city: 'Any town', // Replace with the billing city\n region: 'CA', // Replace with the billing region\n postalCode: '12345', // Replace with the billing postal code\n country: 'US' // Replace with the billing country\n },\n paymentInstrument: {\n bin: '123456', // Replace with the BIN of the payment instrument\n last4: '1234', // Replace with the last 4 digits of the payment instrument\n expMonth: '12', // Replace with the expiration month of the payment instrument\n expYear: '2025' // Replace with the expiration year of the payment instrument\n }\n })\n .then(result => {\n console.log('FramePay success', result);\n })\n .catch(error => {\n console.log('FramePay error', error);\n });\n });\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"details","attributes":{},"children":[{"$$mdtype":"Tag","name":"summary","attributes":{},"children":["3. Use the token to update the payment instrument"]},{"$$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":2,"id":"rebilly-api-sdks","__idx":6},"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":"Use encrypted CVVs for payment instruments","id":"use-encrypted-cvvs-for-payment-instruments","depth":1},{"value":"Collect CVV securely for future use","id":"collect-cvv-securely-for-future-use","depth":2},{"value":"Collect encrypted CVV for an existing payment instrument","id":"collect-encrypted-cvv-for-an-existing-payment-instrument","depth":3},{"value":"Use a stored encrypted CVV","id":"use-a-stored-encrypted-cvv","depth":2},{"value":"Remove encrypted CVVs","id":"remove-encrypted-cvvs","depth":2},{"value":"Update an encrypted CVV","id":"update-an-encrypted-cvv","depth":2},{"value":"Rebilly API SDKs","id":"rebilly-api-sdks","depth":2}],"frontmatter":{"seo":{"title":"Use encrypted CVVs for payment instruments","description":"Learn how to use encrypted CVVs for payment instruments.","keywords":"Developer docs, FramePay","lang":"en-US"},"excludeFromSearch":true},"lastModified":"2026-03-18T10:00:57.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/use-framepay-encrypted-cvv","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}