Omise

This blog post will elaborate on how omise has been integrated into the Open Event Frontend project. Omise is Thailand’s leading online payment gateway offering a wide range of processing solutions for this project and integrating it as a payment option widens the possibilities for user base and ease of payment workflow.

Similar to Paypal, Omise offers two alternatives for using their gateway, Test mode and Live mode, where the former is generally favoured for usage in Development and Testing phase while the latter is used in actual production for capturing live payments. Both these modes require a Public key and Secret key each and are only update-able on the admin route.

This was implemented by introducing appropriate fields in the settings model.

// app/models/setting.js omiseMode            : attr('string'), omiseTestPublic      : attr('string'), omiseTestSecret      : attr('string'), omiseLivePublic      : attr('string'), omiseLiveSecret      : attr('string')

Once your Omise credentials are configured, you can go ahead and include the options in your event creation form. You will see an option to include Omise in your payment options if you have configured your keys correctly and if the gateway supports the currency your event is dealing with, for example, even if your keys are correctly configured, you will not get the option to use omise gateway for money collection if the currency is INR.

For showing omise option in the template, a simple computed property did the trick canAcceptOmise  in the form’s component file and the template as follows:

// app/components/forms/wizard/basic-details-step.js canAcceptOmise: computed('data.event.paymentCurrency', 'settings.isOmiseActivated', function() {   return this.get('settings.isOmiseActivated') && find(paymentCurrencies, ['code', this.get('data.event.paymentCurrency')]).omise; })

// app/templates/components/forms/wizard/basic-details-step.js {{#if canAcceptOmise}}       <label>{{t 'Payment with Omise'}}</label>       <div class="field payments">         <div class="ui checkbox">           {{input type='checkbox' id='payment_by_omise' checked=data.event.canPayByOmise}}           <label for="payment_by_omise">             {{t 'Yes, accept payment through Omise Gateway'}}             <div class="ui hidden divider"></div>             <span class="text muted">               {{t 'Omise can accept Credit and Debit Cards , Net-Banking and AliPay. Find more details '}}               <a href="https://www.omise.co/payment-methods" target="_blank" rel="noopener noreferrer">{{t 'here'}}</a>.             </span>           </label>         </div>       </div>       {{#if data.event.canPayByOmise}}         <label>{{t 'Omise Gateway has been successfully activated'}}</label>       {{/if}}     {{/if}}

Once the event has the payment option enabled, an attendee has chosen the option to pay up using omise, they will encounter this screen on their pending order page 

On entering the credentials correctly, they will be forwarded to order completion page. On clicking the “Pay” button, the omise cdn used hits the server with a POST request to the order endpoint  and is implemented as follows :

//controllers/orders/pending.js isOmise: computed('model.order.paymentMode', function() {   return this.get('model.order.paymentMode') === 'omise'; }), publicKeyOmise: computed('settings.omiseLivePublic', 'settings.omiseLivePublic', function() {   return this.get('settings.omiseLivePublic') || this.get('settings.omiseTestPublic'); }), omiseFormAction: computed('model.order.identifier', function() {   let identifier = this.get('model.order.identifier');   return `${ENV.APP.apiHost}/v1/orders/${identifier}/omise-checkout`; })

// app/templates/orders/pending.hbs     {{#if isOmise}}       <div>         <form class="checkout-form" name="checkoutForm" method='POST' action={{omiseFormAction}}>           <script type="text/javascript" src="https://cdn.omise.co/omise.js"                   data-key="{{publicKeyOmise}}"                   data-amount="{{paymentAmount}}"                   data-currency="{{model.order.event.paymentCurrency}}"                   data-default-payment-method="credit_card">           </script>         </form>       </div>     {{/if}}

Thus primarily using Omise.js CDN and introducing the omise workflow, the project now has accessibility to Omise payment gateway service and the organiser can see his successful charge.

Resources

• Omise Developer Documentation
• Omise JS API Authentication

Related Work and Code Repository

• Front-End Repository
• API Server Repository

• Omise JS workflow connection
• API keys and Omise Configuration
• Addition of Omise payment options in event configuration