diff --git a/src/containers/Subscriptions/BillingPaymentMethod.js b/src/containers/Subscriptions/BillingPaymentMethod.js
new file mode 100644
index 000000000..5c180cf38
--- /dev/null
+++ b/src/containers/Subscriptions/BillingPaymentMethod.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { T } from 'components';
+import { PaymentMethodTabs } from './SubscriptionTabs';
+
+export default ({ formik, title, description }) => {
+ return (
+
+ );
+};
diff --git a/src/containers/Subscriptions/BillingPlansForm.js b/src/containers/Subscriptions/BillingPlansForm.js
index 6eed7a77c..b26cfc89e 100644
--- a/src/containers/Subscriptions/BillingPlansForm.js
+++ b/src/containers/Subscriptions/BillingPlansForm.js
@@ -1,10 +1,13 @@
import React from 'react';
+import * as R from 'ramda';
import 'style/pages/Subscription/BillingPlans.scss';
import BillingPlansInput from './BillingPlansInput';
import BillingPeriodsInput from './BillingPeriodsInput';
-// import BillingPaymentMethod from './BillingPaymentMethod';
+import BillingPaymentMethod from './BillingPaymentMethod';
+
+import withSubscriptions from './withSubscriptions';
/**
* Billing plans form.
@@ -14,7 +17,24 @@ export default function BillingPlansForm() {
- {/* */}
+
);
}
+
+/**
+ * Billing payment methods when subscription is inactive.
+ * @returns {JSX.Element}
+ */
+function BillingPaymentMethodWhenSubscriptionInactiveJSX({
+ // # withSubscriptions
+ isSubscriptionActive,
+
+ ...props
+}) {
+ return !isSubscriptionActive ? : null;
+}
+
+const BillingPaymentMethodWhenSubscriptionInactive = R.compose(
+ withSubscriptions(({ isSubscriptionActive }) => ({ isSubscriptionActive })),
+)(BillingPaymentMethodWhenSubscriptionInactiveJSX);