Add API keys, buttons for alipay frontend (#3024)

Watching properties for computed properties update

Author: mrsaicharan1

app/components/forms/admin/settings/payment-gateway-form.js

@@ -38,6 +38,25 @@ export default Component.extend(FormMixin, {
             }
           ]
         },
+        alipaySecretKey: {
+          identifier : 'alipay_secret_key',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter the secret key')
+            }
+          ]
+        },
+
+        alipayPublishableKey: {
+          identifier : 'alipay_publishable_key',
+          rules      : [
+            {
+              type   : 'empty',
+              prompt : this.l10n.t('Please enter the publishable key')
+            }
+          ]
+        },
 
         paypalSandboxClient: {
           identifier : 'sandbox_client_id',
@@ -134,6 +153,10 @@ export default Component.extend(FormMixin, {
     return this.get('settings.omiseTestPublic') || this.get('settings.omiseLivePublic');
   }),
 
+  isCheckedAliPay: computed('settings.alipaySecretKey', 'settings.alipayPublishableKey', function() {
+    return this.get('settings.alipaySecretKey') && this.get('settings.alipayPublishableKey');
+  }),
+
   actions: {
     submit() {
       this.onValid(() => {
@@ -152,6 +175,12 @@ export default Component.extend(FormMixin, {
             'paypalClient'        : null
           });
         }
+        if (!this.isCheckedAliPay) {
+          this.settings.setProperties({
+            'aliPaySecretKey'      : null,
+            'aliPayPublishableKey' : null
+          });
+        }
         if (this.isCheckedOmise === false) {
           this.settings.setProperties({
             'omiseTestPublic' : null,

app/components/forms/wizard/basic-details-step.js

@@ -48,6 +48,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
     return this.get('settings.isOmiseActivated') && find(paymentCurrencies, ['code', this.get('data.event.paymentCurrency')]).omise;
   }),
 
+  canAcceptAliPay: computed('data.event.paymentCurrency', 'settings.isAliPayActivated', function() {
+    return this.get('settings.isAliPayActivated') && find(paymentCurrencies, ['code', this.get('data.event.paymentCurrency')]).alipay;
+  }),
+
   tickets: computed('[email protected]', '[email protected]', function() {
     return this.get('data.event.tickets').sortBy('position').filterBy('isDeleted', false);
   }),

app/controllers/orders/pending.js

@@ -20,6 +20,10 @@ export default Controller.extend({
     return this.get('model.order.paymentMode') === 'omise';
   }),
 
+  isAliPay: computed('model.order', function() {
+    return this.get('model.order.paymentMode') === 'alipay';
+  }),
+
   paymentAmount: computed('model.order', function() {
     return this.get('model.order.amount') * 100;
   }),
@@ -34,6 +38,18 @@ export default Controller.extend({
   }),
 
   actions: {
+    aliPayCheckout(order_identifier) {
+      this.loader.post(`/create_source/${order_identifier}`)
+        .then(charge => {
+          if (charge.status) {
+            this.notify.success('Payment has succeeded');
+            this.transitionToRoute('orders.view', order_identifier);
+          } else {
+            this.notify.error('Payment has failed');
+          }
+        });
+
+    },
     processStripeToken(token) {
       // Send this token to server to process payment
       this.set('isLoading', true);

app/models/event.js

@@ -58,6 +58,7 @@ export default ModelBase.extend(CustomPrimaryKeyMixin, {
   canPayByCheque  : attr('boolean', { defaultValue: false }),
   canPayByBank    : attr('boolean', { defaultValue: false }),
   canPayByOmise   : attr('boolean', { defaultValue: false }),
+  canPayByAliPay  : attr('boolean', { defaultValue: false }),
   canPayOnsite    : attr('boolean', { defaultValue: false }),
   paymentCountry  : attr('string'),
   paymentCurrency : attr('string', { defaultValue: 'USD' }),

app/models/setting.js

@@ -33,6 +33,8 @@ export default ModelBase.extend({
   paypalSecret         : attr('string'),
   paypalSandboxClient  : attr('string'),
   paypalSandboxSecret  : attr('string'),
+  alipaySecretKey      : attr('string'),
+  alipayPublishableKey : attr('string'),
   omiseMode            : attr('string'),
   omiseTestPublic      : attr('string'),
   omiseTestSecret      : attr('string'),
@@ -41,6 +43,7 @@ export default ModelBase.extend({
   stripeClientId       : attr('string'),
   stripeSecretKey      : attr('string'),
   stripePublishableKey : attr('string'),
+  isAliPayActivated    : attr('boolean'),
   isPaypalActivated    : attr('boolean'),
   isStripeActivated    : attr('boolean'),
   isOmiseActivated     : attr('boolean'),

app/templates/components/forms/admin/settings/payment-gateway-form.hbs

@@ -36,6 +36,38 @@
     </div>
     <div class="ui hidden divider"></div>
   {{/if}}
+  <div class="inline field">
+    <label>
+      {{t 'Enable AliPay'}}
+    </label>
+    {{ui-checkbox class='toggle' checked=isCheckedAliPay onChange=(action (mut isCheckedAliPay))}}
+  </div>
+  {{#if isCheckedAliPay}}
+    <h3 class="ui header">
+      {{t 'AliPay Keys(Stripe Sources)'}}
+      <div class="sub header">
+        {{t 'See'}}
+        <a href="https://stripe.com/docs/dashboard" target="_blank" rel="noopener nofollow">
+          {{t 'here'}}
+        </a>
+        {{t 'on how to obtain these keys.'}}
+      </div>
+    </h3>
+    <div class="field">
+      <label>
+        {{t 'Secret Key'}}
+      </label>
+      {{input type='text' name='alipay_secret_key' value=settings.alipaySecretKey}}
+    </div>
+    <div class="field">
+      <label>
+        {{t 'Publishable Key'}}
+      </label>
+      {{input type='text' name='alipay_publishable_key' value=settings.alipayPublishableKey}}
+    </div>
+    <div class="ui hidden divider"></div>
+  {{/if}}
+
   <div class="inline field">
     <label>
       {{t 'Enable PayPal'}}

app/templates/components/forms/orders/order-form.hbs

@@ -143,6 +143,13 @@
                 <label for="payment_mode"><img src="/images/payment-logos/omise.png" alt="omise"></label>
               </div>
             {{/if}}
+            {{#if data.event.canPayByAliPay}}
+              <div class="field">
+                {{ui-radio name='payment_mode' label=(t 'AliPay') value='alipay' current=data.paymentMode
+                           onChange=(action (mut data.paymentMode))}}
+                <label for="payment_mode"><img src="/images/payment-logos/alipay.png" alt="alipay"></label>
+              </div>
+            {{/if}}
             {{#if data.event.canPayByCheque}}
               <div class="field">
                 {{ui-radio name='payment_mode' label=(t 'Cheque') value='cheque' current=data.paymentMode

app/templates/components/forms/wizard/basic-details-step.hbs

@@ -314,6 +314,25 @@
           </div>
         {{/if}}
       {{/if}}
+      {{#if canAcceptAliPay}}
+        <label>{{t 'Payment with AliPay'}}</label>
+        <div class="field payments">
+          <div class="ui checkbox">
+            {{input type='checkbox' id='payment_by_alipay' checked=data.event.canPayByAliPay}}
+            <label for="payment_by_alipay">
+              {{t 'Yes, accept payment through AliPay Gateway'}}
+              <div class="ui hidden divider"></div>
+              <span class="text muted">
+                {{t 'AliPay can accept Credit and Debit Cards , Net-Banking and AliPay. Find more details '}}
+                <a href="https://stripe.com/docs/sources/alipay" target="_blank" rel="noopener noreferrer">{{t 'here'}}</a>.
+              </span>
+            </label>
+          </div>
+        </div>
+        {{#if data.event.canPayByAliPay}}
+          <label>{{t 'AliPay Gateway has been successfully activated'}}</label>
+        {{/if}}
+      {{/if}}
       {{#if canAcceptOmise}}
         <label>{{t 'Payment with Omise'}}</label>
         <div class="field payments">

app/templates/orders/pending.hbs

@@ -30,6 +30,9 @@
           </form>
         </div>
       {{/if}}
+      {{#if isAliPay}}
+        <button class="ui button primary" {{action alipayCheckout model.order.identifier}}>{{t 'Pay with AliPay'}}</button>          
+      {{/if}}
     </div>
     <div class="row">
       <div class="nine wide column">