fix(docs): update button types from long/short to buy/plain

examples/angular/src/app/app.component.html

@@ -40,6 +40,9 @@
     <label>
       <span>Button type:</span>
       <select [(ngModel)]="buttonType">
+        <option value="buy">buy</option>
+        <option value="plain">plain</option>
+        <option value="donate">donate</option>
         <option value="long">long</option>
         <option value="short">short</option>
       </select>

examples/angular/src/app/app.component.ts

@@ -26,7 +26,7 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   amount = '100.00';
-  buttonType = 'long';
+  buttonType = 'buy';
   buttonColor = 'default';
   existingPaymentMethodRequired = false;
 

examples/html/index.html

@@ -46,7 +46,10 @@
       <label>
         <span>Button type:</span>
         <select id="button-type">
-          <option value="long" selected>long</option>
+          <option value="buy" selected>buy</option>
+          <option value="plain">plain</option>
+          <option value="donate">donate</option>
+          <option value="long">long</option>
           <option value="short">short</option>
         </select>
       </label>
@@ -56,7 +59,7 @@
       <div class="example">
         <div class="title">Static Example</div>
         <div class="demo">
-          <google-pay-button id="static" environment="TEST" button-type="short" button-color="black">
+          <google-pay-button id="static" environment="TEST" button-type="plain" button-color="black">
           </google-pay-button>
         </div>
       </div>

examples/react/src/App.tsx

@@ -35,7 +35,7 @@ const App: React.FC = () => {
   const [amount, setAmount] = useState('100.00');
   const [existingPaymentMethodRequired, setExistingPaymentMethodRequired] = useState(false);
   const [buttonColor, setButtonColor] = useState('default');
-  const [buttonType, setButtonType] = useState('long');
+  const [buttonType, setButtonType] = useState('buy');
 
   function handleAmountChange(event: any) {
     setAmount(event.target.value);
@@ -85,6 +85,9 @@ const App: React.FC = () => {
         <label>
           <span>Button type:</span>
           <select onChange={handleTypeChange} value={buttonType}>
+            <option value="buy">buy</option>
+            <option value="plain">plain</option>
+            <option value="donate">donate</option>
             <option value="long">long</option>
             <option value="short">short</option>
           </select>

examples/svelte/src/App.svelte

@@ -4,7 +4,7 @@
   let amount = '100.00';
   let existingPaymentMethodRequired = false;
   let buttonColor = 'default';
-  let buttonType = 'long';
+  let buttonType = 'buy';
 
   function buildPaymentRequest(): google.payments.api.PaymentDataRequest {
     return {
@@ -193,6 +193,9 @@
     <label>
       <span>Button type:</span>
       <select id="button-type" bind:value={buttonType}>
+        <option value="buy">buy</option>
+        <option value="plain">plain</option>
+        <option value="donate">donate</option>
         <option value="long">long</option>
         <option value="short">short</option>
       </select>

examples/vue/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --host localhost",
+    "start": "vue-cli-service serve --host localhost",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

examples/vue/src/components/Examples.vue

@@ -39,6 +39,9 @@
       <label>
         <span>Button type:</span>
         <select v-model="buttonType">
+          <option value="buy">buy</option>
+          <option value="plain">plain</option>
+          <option value="donate">donate</option>
           <option value="long">long</option>
           <option value="short">short</option>
         </select>
@@ -182,7 +185,7 @@ export default {
     amount: '100.00',
     existingPaymentMethodRequired: false,
     buttonColor: 'default',
-    buttonType: 'long',
+    buttonType: 'buy',
     paymentRequest: {
       apiVersion: 2,
       apiVersionMinor: 0,

examples/vue/src/components/StaticExample.vue

@@ -21,7 +21,7 @@
         <div class="title">Static Example</div>
         <div class="demo">
           <google-pay-button
-            button-type="short"
+            button-type="plain"
             button-color="black"
             v-bind:paymentRequest.prop="{
               apiVersion: 2,

src/button-element/README.md

@@ -65,7 +65,7 @@ Try it out on [JSFiddle](https://jsfiddle.net/f70e8nx4/).
 
 ```html
 <google-pay-button
-  button-type="long"
+  button-type="buy"
   button-color="black"
   [paymentRequest]="{
     apiVersion: 2,
@@ -107,7 +107,7 @@ More Angular examples can be found in the [examples folder](../../examples/angul
 
 ```html
 <google-pay-button
-  button-type="long"
+  button-type="buy"
   button-color="black"
   v-bind:paymentRequest.prop="{
     apiVersion: 2,
@@ -174,11 +174,12 @@ integrating Google Pay into your website.
   </tr>
   <tr>
     <td><p>buttonType</p></td>
-    <td><p><code>"long" | "short"</code></p></td>
+    <td><p><code>"buy" | "plain" | "donate" | "long" | "short"</code></p></td>
     <td>
       <p>Optional.</p>
-      <p><code>"long"</code> buttons are presented with the <em>Buy with</em> prefix (localized based on the user's browser settings) in front of the Google Pay logo, while <code>"short"</code> buttons only displays the Google Pay logo.</p>
-      <p>Default value <code>"long"</code>.</p>
+      <p><code>"buy"</code> and <code>"donate"</code> display their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The <code>"plain"</code> button only displays the Google Pay logo.</p>
+      <p><code>"long"</code> and <code>"short"</code> button types have been renamed to <code>"buy"</code> and <code>"plain"</code>, but are still valid button types for backwards compatability.</p>
+      <p>Default value <code>"buy"</code>.</p>
     </td>
   </tr>
   <tr>

src/button-react/README.md

@@ -79,11 +79,12 @@ integrating Google Pay into your website.
   </tr>
   <tr>
     <td><p>buttonType</p></td>
-    <td><p><code>"long" | "short"</code></p></td>
+    <td><p><code>"buy" | "plain" | "donate" | "long" | "short"</code></p></td>
     <td>
       <p>Optional.</p>
-      <p><code>"long"</code> buttons are presented with the <em>Buy with</em> prefix (localized based on the user's browser settings) in front of the Google Pay logo, while <code>"short"</code> buttons only displays the Google Pay logo.</p>
-      <p>Default value <code>"long"</code>.</p>
+      <p><code>"buy"</code> and <code>"donate"</code> display their respective prompts (localized based on the user's browser settings) with the Google Pay logo. The <code>"plain"</code> button only displays the Google Pay logo.</p>
+      <p><code>"long"</code> and <code>"short"</code> button types have been renamed to <code>"buy"</code> and <code>"plain"</code>, but are still valid button types for backwards compatability.</p>
+      <p>Default value <code>"buy"</code>.</p>
     </td>
   </tr>
   <tr>