Merge pull request #866 from recurly/amazon_pay_refactor

refactor rjs to resolve button reload error and add types

lib/recurly/amazon/amazon-pay.js

@@ -5,27 +5,26 @@ class AmazonPay extends Emitter {
   constructor (recurly, options) {
     super();
     this.recurly = recurly;
-    this.options = options;
-    this.region = this.options.region || 'us';
+    this.options = Object.assign({ region: 'us' }, options);
+    this.options.region = this.options.region || 'us';
     this.setLocaleAndCurrency();
     this.start();
   }
 
-  async start () {
-    try {
-      await Promise.all([
-        this.loadExternalLibraries(),
-        this.obtainMerchantId(this.recurly)
-      ]);
-    } catch (err) {
-      this.error(err);
-    }
+  start () {
+    Promise.all([
+      this.loadExternalLibraries(),
+      this.obtainMerchantId(this.recurly)
+    ])
+      .then(() => this.emit('ready'))
+      .catch(err => this.emit('error', err));
   }
 
   obtainMerchantId () {
-    this.recurly.request.get({ route: '/amazon_pay/button_render' }).then((data) => {
-      this.options.merchantId = data.merchant_id;
-    });
+    return this.recurly.request.get({ route: '/amazon_pay/button_render', data: { region: this.options.region } })
+      .then((data) => {
+        this.options.merchantId = data.merchant_id;
+      });
   }
 
   scriptUrl () {
@@ -42,38 +41,29 @@ class AmazonPay extends Emitter {
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = this.scriptUrl();
-      script.onload = () => {
-        resolve;
-        this.emit('ready');
-      };
+      script.onload = resolve;
       script.onerror = reject;
       document.head.appendChild(script);
     });
   }
 
   renderButton (element) {
-    return new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.innerHTML = `const button = amazon.Pay.renderButton('#${element}', {
-        merchantId: '${this.options.merchantId}',
-        ledgerCurrency: '${this.options.currency}',
-        checkoutLanguage: '${this.options.locale}',
-        productType: 'PayOnly',
-        placement: 'Other',
-        sandbox: ${this.options.sandbox},
-        buttonColor: 'Gold',
-      });`;
-      script.onload = resolve;
-      script.onerror = reject;
-      document.head.appendChild(script);
+    window.amazon.Pay.renderButton(`#${element}`, {
+      merchantId: this.options.merchantId,
+      ledgerCurrency: this.options.currency,
+      checkoutLanguage: this.options.locale,
+      productType: 'PayOnly',
+      placement: 'Other',
+      sandbox: this.options.sandbox,
+      buttonColor: 'Gold',
     });
   }
 
   attach () {
     const defaultEventName = 'amazon-pay';
     let gatewayCode = this.options.gatewayCode || '';
     this.frame = this.recurly.Frame({
-      path: `/amazon_pay/start?region=${this.region}&gateway_code=${gatewayCode}`,
+      path: `/amazon_pay/start?region=${this.options.region}&gateway_code=${gatewayCode}`,
       type: Frame.TYPES.WINDOW,
       defaultEventName
     }).on('error', cause => this.emit('error', cause)) // Emitted by js/v1/amazon_pay/cancel

types/index.d.ts

@@ -17,6 +17,7 @@ export * from './lib/address';
 export * from './lib/adyen';
 export * from './lib/bank-redirect';
 export * from './lib/apple-pay/index';
+export * from './lib/amazon-pay';
 export * from './lib/google-pay/index';
 export * from './lib/bank-account';
 export * from './lib/configure';

types/lib/amazon-pay.d.ts

@@ -0,0 +1,40 @@
+import { Emitter } from './emitter';
+
+export type AmazonPayOptions = {
+  /**
+   * 2 Digit Country Code
+   */
+  region?: string;
+
+  /**
+   * Specify which Payment Gateway in Recurly must handle the payment.
+   */
+  gatewayCode?: string
+
+  /**
+   * Sets button to Sandbox environment
+   */
+  sandbox?: boolean;
+};
+
+export type AmazonPayEvent = 'ready' | 'token' | 'error' | 'close' | 'done';
+
+export interface AmazonPayInstance extends Emitter<AmazonPayEvent> {
+  /**
+   * Invokes the Amazon Payment Modal
+   */
+  start: () => void;
+
+  /**
+   * Attaches an Element to the DOM, as a child of the specified parent target.
+   *
+   */
+  attach: () => void;
+
+  /**
+   * Renders Amazon Pay button to the page
+   */
+  renderButton: (element: string) => void;
+}
+
+export type AmazonPay = (amazonPayOptions?: AmazonPayOptions) => AmazonPayInstance;

types/lib/recurly.d.ts

@@ -3,6 +3,7 @@ import { Adyen } from './adyen';
 import { BankRedirect } from './bank-redirect';
 import { AlternativePaymentMethods } from './alternative-payment-methods';
 import { ApplePay } from './apple-pay/index';
+import { AmazonPay } from './amazon-pay';
 import { BankAccount } from './bank-account';
 import { Configure } from './configure';
 import { Elements } from './elements';
@@ -89,6 +90,13 @@ export interface Recurly extends Emitter<RecurlyEvent> {
    */
   PayPal: PayPal;
 
+  /**
+   * Use Recurly to process Amazon Pay v2 transactions
+   *
+   * @see {@link https://recurly.com/developers/reference/recurly-js/index.html#amazon-pay-v2|AmazonPay}
+   */
+  AmazonPay: AmazonPay;
+
   /**
    * Recurly automates complicated subscriptions, with many factors influencing the total price at checkout. With this
    * in mind, Recurly.js provides a robust `recurly.Pricing.Checkout` class designed to make determining the actual