Merge pull request #855 from recurly/amazon-follow-up

Amazon follow up

lib/recurly/amazon/amazon-pay.js

@@ -6,21 +6,97 @@ class AmazonPay extends Emitter {
     super();
     this.recurly = recurly;
     this.options = options;
+
+    this.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);
+    }
+  }
+
+  obtainMerchantId () {
+    this.recurly.request.get({ route: '/amazon_pay/button_render' }).then((data) => {
+      this.options.merchantId = data.merchant_id;
+    });
+  }
+
+  scriptUrl () {
+    switch(this.options.region) {
+    case 'uk':
+    case 'eu':
+      return 'https://static-eu.payments-amazon.com/checkout.js';
+    case 'us':
+      return 'https://static-na.payments-amazon.com/checkout.js';
+    }
   }
 
-  attach (element) {
-    this.parent = element;
-    this.region = this.options?.region || 'us';
+  loadExternalLibraries () {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = this.scriptUrl();
+      script.onload = () => {
+        resolve;
+        this.emit('ready');
+      };
+      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);
+    });
+  }
+
+  attach () {
     const defaultEventName = 'amazon-pay';
 
     this.frame = this.recurly.Frame({
       path: `/amazon_pay/start?region=${this.region}`,
       type: Frame.TYPES.WINDOW,
       defaultEventName
-    }).on('error', cause => console.log(cause))
-      .on('done', results => {
-        this.emit('token', results);
-      });
+    }).on('error', cause => this.emit('error', cause)) // Emitted by js/v1/amazon_pay/cancel
+      .on('close', () => this.emit('error', 'closed')) // Emitted by RJS Frame when the window is manually closed
+      .on('done', results => this.emit('token', results)); // Emitted by js/v1/amazon_pay/finish
+  }
+
+  setLocaleAndCurrency () {
+    switch (this.options.region) {
+    case 'uk':
+      this.options.currency = 'GBP';
+      this.options.locale = 'en_GB';
+      break;
+    case 'eu':
+      this.options.currency = 'EUR';
+      this.options.locale = 'en_GB';
+      break;
+    case 'us':
+      this.options.currency = 'USD';
+      this.options.locale = 'en_US';
+      break;
+    }
   }
 }