--- a/browser/components/payments/res/containers/address-form.css
+++ b/browser/components/payments/res/containers/address-form.css
@@ -68,8 +68,19 @@ body[dir=ltr] .error-text::before {
 body[dir=rtl] .error-text::before {
   right: 12px
 }
 
 :-moz-any(input, textarea, select):not(:focus) + .error-text,
 :-moz-any(input, textarea, select):valid + .error-text {
   display: none;
 }
+
+address-form > footer > .cancel-button {
+  /* When cancel is shown (during onboarding), it should always be on the left with a space after it */
+  margin-right: auto;
+}
+
+address-form > footer > .back-button {
+  /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */
+  /* Bug 1468153 may change the button ordering to match platform conventions */
+  margin-right: auto;
+}

new file mode 100644
--- /dev/null
+++ b/browser/components/payments/res/containers/basic-card-form.css
@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+basic-card-form > footer > .cancel-button {
+  /* When cancel is shown (during onboarding), it should always be on the left with a space after it */
+  margin-right: auto;
+}
+
+basic-card-form > footer > .cancel-button[hidden] ~ .back-button {
+  /* When back is shown (outside onboarding) we want "Back <space> Add/Save" */
+  /* Bug 1468153 may change the button ordering to match platform conventions */
+  margin-right: auto;
+}

--- a/browser/components/payments/res/paymentRequest.css
+++ b/browser/components/payments/res/paymentRequest.css
@@ -29,22 +29,30 @@ body {
 
 payment-dialog {
   box-sizing: border-box;
   display: grid;
   grid-template: "header" auto
                  "main"   1fr
                  "disabled-overlay" auto;
   height: 100%;
-  margin: 0 10%;
-  padding: 1em;
+}
+
+payment-dialog > header,
+.page > .page-body,
+.page > footer {
+  padding: 0 10%;
 }
 
 payment-dialog > header {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
   display: flex;
+  /* from visual spec: */
+  padding-bottom: 19px;
+  padding-top: 19px;
 }
 
 #main-container {
   display: flex;
   grid-area: main;
   position: relative;
   max-height: 100%;
 }
@@ -53,24 +61,34 @@ payment-dialog > header {
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   width: 100%;
 }
 
 .page > .page-body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   /* The area above the footer should scroll, if necessary. */
   overflow: auto;
 }
 
+.page > .page-body > h2:empty {
+  display: none;
+}
+
 .page > footer {
-  align-items: end;
+  align-items: center;
+  background-color: #eaeaee;
   display: flex;
-  flex-grow: 1;
+  /* from visual spec: */
+  padding-top: 20px;
+  padding-bottom: 18px;
 }
 
 #error-text {
   text-align: center;
 }
 
 #order-details-overlay {
   background-color: var(--in-content-page-background);
@@ -83,38 +101,57 @@ payment-dialog > header {
   z-index: 1;
 }
 
 #total {
   flex: 1 1 auto;
   margin: 5px;
 }
 
+#total > currency-amount {
+  color: var(--in-content-link-color);
+  font-size: 1.5em;
+}
+
 #total > currency-amount > .currency-code {
   color: GrayText;
+  font-size: 1rem;
+}
+
+#total > div {
+  color: GrayText;
 }
 
 #view-all {
   flex: 0 1 auto;
 }
 
-#total .label {
-  font-size: 15px;
-  font-weight: bold;
+payment-dialog #pay::before {
+  -moz-context-properties: fill;
+  content: url(chrome://browser/skin/connection-secure.svg);
+  fill: currentColor;
+  height: 16px;
+  margin-right: 0.5em;
+  vertical-align: text-bottom;
+  width: 16px;
 }
 
 payment-dialog[changes-prevented][completion-state="fail"] #pay,
 payment-dialog[changes-prevented][completion-state="unknown"] #pay,
 payment-dialog[changes-prevented][completion-state="processing"] #pay,
 payment-dialog[changes-prevented][completion-state="success"] #pay {
   /* Show the pay button above #disabled-overlay */
   position: relative;
   z-index: 1;
 }
 
+#cancel {
+  margin-left: auto;
+}
+
 #disabled-overlay {
   background: white;
   grid-area: disabled-overlay;
   opacity: 0.6;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;

--- a/browser/components/payments/res/paymentRequest.xhtml
+++ b/browser/components/payments/res/paymentRequest.xhtml
@@ -66,16 +66,17 @@
   <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"/>
   <link rel="stylesheet" href="paymentRequest.css"/>
   <link rel="stylesheet" href="components/rich-select.css"/>
   <link rel="stylesheet" href="components/address-option.css"/>
   <link rel="stylesheet" href="components/basic-card-option.css"/>
   <link rel="stylesheet" href="components/shipping-option.css"/>
   <link rel="stylesheet" href="components/payment-details-item.css"/>
   <link rel="stylesheet" href="containers/address-form.css"/>
+  <link rel="stylesheet" href="containers/basic-card-form.css"/>
   <link rel="stylesheet" href="containers/order-details.css"/>
 
   <script src="unprivileged-fallbacks.js"></script>
 
   <script src="formautofill/autofillEditForms.js"></script>
 
   <script type="module" src="containers/payment-dialog.js"></script>
   <script type="module" src="paymentRequest.js"></script>