หากคุณกำลังพัฒนาแอปสำหรับผู้ใช้ในรัสเซีย โปรดใช้ปุ่ม "บันทึกลงในโทรศัพท์" เนื่องจาก Google Wallet ยังไม่พร้อมให้บริการในประเทศเหล่านี้ โปรดดู ชิ้นงานและหลักเกณฑ์ที่เกี่ยวข้อง หากคุณกำลังพัฒนาแอปสำหรับผู้ใช้นอกรัสเซีย โปรดอัปเดตปุ่มเพิ่มลงใน Google Wallet โดยดาวน์โหลดชิ้นงานด้านล่าง
ส่วนนี้ของเอกสารประกอบออกแบบมาเพื่อช่วยให้คุณสร้างรูปภาพและองค์ประกอบอินเทอร์เฟซผู้ใช้อื่นๆ เพื่อให้รูปภาพและองค์ประกอบเหล่านั้นดูดีในแอป Google Wallet
เนื้อหา
ปุ่มเพิ่มลงใน Google Wallet
ปุ่มเพิ่มลงใน Google Wallet จะใช้เมื่อคุณนำผู้ใช้ไปยังส่วนบันทึกบัตรผ่านหรือบัตรจากแอปหรือเว็บไซต์ลงใน Wallet ปุ่มเพิ่มลงใน Google Wallet ต้องเรียกใช้ขั้นตอนใดขั้นตอนหนึ่งจาก Google Wallet API ขั้นตอนเหล่านี้จะแสดงแอป Google Wallet ซึ่งผู้ใช้สามารถทำตามวิธีการเพื่อบันทึกบัตรลงในอุปกรณ์ Android และบัญชี Google ปุ่มนี้ใช้ได้ในแอป เว็บไซต์ หรืออีเมล
ปุ่มเพิ่มลงใน Google Wallet มีให้บริการในรูปแบบ XML, SVG และ PNG ของ Android
ปรับความสูงและความกว้างของปุ่มเพิ่มลงใน Google Wallet ให้พอดีกับเลย์เอาต์ หากมีปุ่มอื่นๆ ในหน้า ปุ่มเพิ่มลงใน Google Wallet จะต้องมีขนาดเท่ากับหรือใหญ่กว่าปุ่มอื่นๆ
อย่าทำให้ปุ่มเพิ่มลงใน Google Wallet เล็กกว่าปุ่มอื่นๆ
รูปแบบ
ปุ่มเพิ่มลงใน Google Wallet มี 2 รูปแบบ ได้แก่ ปุ่มหลักและปุ่มแบบย่อ ปุ่มเพิ่มลงใน Google Wallet มีเฉพาะสีดำ มีปุ่มเวอร์ชันที่แปลแล้วให้ใช้งาน อย่าสร้างปุ่มที่มีข้อความที่แปลแล้วของคุณเอง
[null,null,["อัปเดตล่าสุด 2025-07-25 UTC"],[[["\u003cp\u003eDevelopers should use "Save to phone" buttons for users in Russia, as Google Wallet is not yet available there.\u003c/p\u003e\n"],["\u003cp\u003eFor other regions, utilize the provided "Add to Google Wallet" buttons, available in various formats (Android XML, SVG, PNG) and localizations, ensuring adherence to brand guidelines.\u003c/p\u003e\n"],["\u003cp\u003eWhen referring to Google Wallet in text, always capitalize "G" and "W" while keeping the rest lowercase, avoiding abbreviations and utilizing provided localized names where applicable.\u003c/p\u003e\n"],["\u003cp\u003eMaintain a minimum clear space of 8 dp around the buttons and ensure the button's height is at least 48 dp, adjusting width proportionally while keeping it equal to or larger than other buttons on the page.\u003c/p\u003e\n"],["\u003cp\u003eDisplay the "Add to Google Wallet" button prominently on confirmation screens, web pages, or emails, following the outlined best practices for optimal user experience.\u003c/p\u003e\n"]]],["Developers integrating with Google Wallet should use \"Save to phone\" buttons for users in RU, and the \"Add to Google Wallet\" button for others. The \"Add to Google Wallet\" and \"View in Google Wallet\" buttons, available in various formats, must adhere to specific brand guidelines (size, shape, color, clear space). Localized versions are provided and required where available. The name \"Google Wallet\" must be correctly capitalized and localized. Buttons must be correctly sized, not smaller than other buttons.\n"],null,["# Brand guidelines\n\nIf you're developing for users in RU, please use the \"Save to phone\"\nbuttons as Google Wallet isn't live in these countries. Please see the\n[relevant assets and\nguidelines](/wallet/legacy-resources/button-guidelines). If you are developing for users outside of RU, please\nupdate your **Add to Google Wallet** button by downloading the assets\nbelow.\n\n\nThis section of the documentation is designed to help you create images and\nother user interface elements so that they look great in the\nGoogle Wallet app.\n\nAssets\n------\n\n### Add to Google Wallet button\n\n\nThe **Add to Google Wallet** button is used whenever you are\ndirecting users to save a pass or card from your app or website to their\nwallet. The **Add to Google Wallet** button must call one of the\nGoogle Wallet API flows. These flows surface the Google Wallet app where\nusers can follow the instructions to save passes to their Android device\nand their Google Account. This button can be used in apps, websites or\nemails.\n\n\n**Add to Google Wallet** buttons are available in Android XML, SVG,\nand PNG format.\n[Download assets - Android XML](/static/wallet/download-assets/add-to-wallet-axml.zip) [Download assets - SVG](/static/wallet/download-assets/add-to-wallet-svg.zip) [Download assets - PNG](/static/wallet/download-assets/add-to-wallet-png.zip)\n\n### View in Google Wallet button\n\n\nThe **View in Google Wallet** button is used to deep link a user\nto their wallet to view a previously saved pass or card. This\nbutton can be used in apps, websites or emails.\n\n\n**View in Google Wallet** buttons are available in SVG and PNG format.\n[Download assets - SVG](/static/wallet/download-assets/view-in-google-wallet-svg.zip) [Download assets - PNG](/static/wallet/download-assets/view-in-google-wallet-png.zip)\n\n\nAll buttons displayed on your site, app, or email communications must adhere to the brand\nguidelines outlined on this page. Examples of these guidelines include but aren't limited to, the\nfollowing:\n\n- Size relative to other similar buttons or elements of the page\n- Shape and color of buttons must not be altered\n- Clear space\n\n### Localized buttons\n\n\nLocalized Google Wallet buttons are provided for all markets where Wallet is\navailable. If you're developing for users in these markets, always use the\nbuttons linked above. **Do not** create your own version of the buttons.\nIf a localized version of the button is not available in your market, use the\nEnglish version of the button.\n\n\n**Add to Google Wallet** buttons are available in the Albanian,\nArabic, Armenian, Azerbaijan, Bosnian, Bulgarian, Catalan, Chinese\n(Hong Kong), Chinese (Traditional), Croatian, Czech, Danish, Dutch, English\n(India, Singapore, South Africa, Australia, Canada, Great Britain, United\nStates), Estonian, Filipino, Finnish, French (Canada), French (France),\nGeorgian, German, Greek, Hebrew, Hungarian, Icelandic, Indonesian, Italian,\nJapanese, Kazakh, Kyrgyz, Latvian, Lithuanian, Macedonian, Malay, Norwegian,\nPolish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian\n(Belarus), Serbian, Slovak, Slovenian, Spanish (Latin America), Spanish\n(Spain), Swedish, Thai, Turkish, Ukrainian, Uzbek, and Vietnamese languages.\n\n### Localized name\n\n\nFor user clarity, the Google Wallet product name is localized in select\nmarkets. If you're developing for users in these countries, always use the\nlocalized name below for web, email, and print. Do not create your own\nlocalized version of \"Google Wallet.\" If your market isn't listed below, use\n\"Google Wallet\" in English.\n\n| Country | Name |\n|----------------------------------------------------------------------------|---------------------|\n| Belarus | Google Кошелек |\n| Brazil | Carteira do Google |\n| Chile | Billetera de Google |\n| Czechia | Peněženka Google |\n| Greece | Πορτοφόλι Google |\n| Hong Kong | Google 錢包 |\n| Lithuania | Google Piniginė |\n| Poland | Portfel Google |\n| Portugal | Carteira da Google |\n| Romania | Portofel Google |\n| Slovakia | Peňaženka Google |\n| Taiwan | Google 錢包 |\n| Turkey | Google Cüzdan |\n| UAE | محفظة Google |\n| Ukraine | Google Гаманець |\n| United States (Spanish) \\*Use this name in the US if your UI is in Spanish | Billetera de Google |\n\n### Size\n\n\nAdjust the height and width of the **Add to Google Wallet** button\nto fit your layout. If there are other buttons on the page, the\n**Add to Google Wallet** button needs to be equal or larger in size.\nDon't make the **Add to Google Wallet** button smaller than other\nbuttons.\n\n### Style\n\n\n**Add to Google Wallet** buttons are available in two variations:\nprimary and condensed. The **Add to Google Wallet** button only\ncomes in black. Localized versions of the button are provided. Do not create\nbuttons with your own localized text.\n\n| Primary | Condensed |\n|--------------------------------------------------------|--------------------------------------------------------------------------------------|\n| | |\n| Use the primary button on white and light backgrounds. | Use the condensed button if there is not enough space for the primary or full-width. |\n\n### Clear space\n\n\nAlways maintain the minimum clear space of **8 dp** on all sides of the\n**Add to Google Wallet** button. Ensure that the clear space is\nnever broken with graphics or text.\n\n### Minimum height\n\n\nAll **Add to Google Wallet** buttons need to have a minimum height\nof **48 dp**.\n\n### Dos and don'ts\n\n| Dos | Don'ts |\n|----------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| Do: Use only the **Add to Google Wallet** buttons provided by Google. | Don't: Create your own **Add to Google Wallet** buttons or alter the font, color, button radius, or padding within the button in any way. |\n| Do: Use the same style of button throughout your site. | Don't: Make the **Add to Google Wallet** buttons smaller than other buttons. |\n| Do: Ensure that the size of the **Add to Google Wallet** buttons remain equal to or larger than other buttons. | Don't: Alter the button color. |\n| Do: Keep the button ratio the same when resizing the **Add to Google Wallet** buttons. | Don't: Free-scale the button. |\n| Do: Use the provided localized version of the buttons. | Don't: Create your own localized version of the button. |\n\nBest practices for button placement\n-----------------------------------\n\n\nDisplay the **Add to Google Wallet** button on confirmation app\nscreens, web pages, or emails. Refer to the following best practices to guide your UI\ndesign.\n\n### Corporate Badges\n\n\nDisplay the **Add to Google Wallet** button on confirmation\nscreens.\n\nUse of the Google Wallet product name in text\n---------------------------------------------\n\n\nYou can use text to indicate to the user that their Corporate Badge\nis saved to their device.\n\n### Capitalize the letters \"G\" and \"W\"\n\n\nAlways use an uppercase \"G\" and an uppercase \"W\" followed by lowercase letters\nto refer to Google Wallet. Don't capitalize the full name\n\"Google Wallet\" unless it's to match the typographic style in your UI.\n\n### Don't abbreviate Google Wallet\n\nAlways write out the words \"Google\" and \"Wallet.\"\n\n### Match the style in your UI\n\n\nSet \"Google Wallet\" in the same font and typographic style as the rest\nof the text in your UI. Don't mimic Google's typographic style.\n\n### Always use the localized version of \"Google Wallet\"\n\nAlways write \"Google Wallet\" in the provided localized copy."]]
