Payments.js

/* Example assumptions:
* The card fields have divs defined in the DOM
* <div id="card-number-element"></div>
* <div id="card-expiration-element"></div>
* <div id="card-cvv-element"></div>
* A submit button is defined
* <button id='submit-btn'></button>
*/
const payments = new Payments('pk_...', 'acct_...');
const form = await payments.form({
  payment_method_type: 'card',
});
const fieldOptions = {
  styles: {
    base: {
      fontFamily: 'Helvetica Neue, Arial, sans-serif',
      color: '#304166',
      fontWeight: '400',
      fontSize: '16px',
    },
    invalid: {
      ':hover': {
        textDecoration: 'underline dotted red',
      },
    },
    valid: {
      color: '#00BDA5',
    },
  },
};
form.createField('cardNumber', fieldOptions).inject('#card-number-element');
form.createField('cardExpiry', {...fieldOptions, selector: '#card-expiration-element'});
form.createField('cardCvv', fieldOptions).inject('#card-cvv-element');
await form.build();
const submitButton = document.getElementById('submit-btn');
submitButton.onclick = () => {
  payments.confirmPayment(paymentIntentClientSecret, {
    payment_method: {
      billing_details: {
        name: 'John Doe',
        address: {
          zip: '80021',
          country: 'US',
        },
      },
    },
  })
  .then((paymentIntent) => {
    if (paymentIntent.status === 'succeeded') {
      alert('Payment successful');
    } else {
      const errMsg = paymentIntent.last_payment_error?.message;
      alert('Payment failed: ' + errMsg);
    }
  })
  .catch((error) => {
    alert('An error occurred: ' + error.message);
  });

/**
* Example assumptions:
* The ach_debit fields have divs defined in the DOM
* <div id="bank-account-number-element"></div>
* <div id="bank-routing-number-element"></div>
*
* A submit button is defined
* <button id='submit-btn'></button>
*/
const payments = new Payments('pk_…', 'acct_…');

const form = await payments.form({
  payment_method_type: 'ach_debit',
});

const fieldOptions = {
  styles: {
    base: {
      fontFamily: 'Helvetica Neue, Arial, sans-serif',
      color: '#304166',
      fontWeight: '400',
      fontSize: '16px',
    },
    invalid: {
      ':hover': {
        textDecoration: 'underline dotted red',
      },
    },
    valid: {
      color: '#00BDA5',
    },
  },
};

form
  .createField('bankAccountNumber', fieldOptions)
  .inject('#bank-account-number-element');
form
  .createField('bankRoutingNumber', fieldOptions)
  .inject('#bank-routing-number-element');

await form.build();

const submitButton = document.getElementById('submit-btn');
submitButton.on('click', () => {
// A payment intent will be created on your backend server and the
// payment_intent.client_secret will be passed to your frontend to
// be used below.
payments
  .confirmPayment(paymentIntentClientSecret, {
    payment_method: {
      billing_details: {
        name: 'John Doe',
        address: {
          street: '370 Interlocken Blvd',
          city: 'Broomfield',
          state: 'CO',
          zip: '80021',
          country: 'US',
        },
      },
      ach_debit: {
        account_type: 'checking',
        account_holder_name: 'John Doe',
      },
    },
  })
  .then(
    (paymentIntent) => {
      // Be sure to check the `status` and/or `last_payment_error`
      // properties to know if the charge was successful
      if (
        paymentIntent.status === 'succeeded' ||
        paymentIntent.status === 'processing'
      ) {
        alert('Payment successful');
      } else {
        const errMsg = paymentIntent.last_payment_error?.message;
        alert('Payment failed: ' + errMsg);
      }
    },
    (err) => {
      // Typically an error with the request (>400 status code)
    }
  );
});

/**
 * Example assumptions:
 * The eft_debit fields have divs defined in the DOM
 * <div id="bank-account-number-element"></div>
 * <div id="bank-routing-number-element"></div>
 *
 * A submit button is defined
 * <button id='submit-btn'></button>
 */
const payments = new Payments("pk_…", "acct_…");

const form = await payments.form({
  payment_method_type: "eft_debit",
});

const fieldOptions = {
  styles: {
    base: {
      fontFamily: "Helvetica Neue, Arial, sans-serif",
      color: "#304166",
      fontWeight: "400",
      fontSize: "16px",
    },
    invalid: {
      ":hover": {
        textDecoration: "underline dotted red",
      },
    },
    valid: {
      color: "#00BDA5",
    },
  },
};

form
  .createField("bankAccountNumber", fieldOptions)
  .inject("#bank-account-number-element");
form
  .createField("bankRoutingNumber", fieldOptions)
  .inject("#bank-routing-number-element");

await form.build();

const submitButton = document.getElementById("submit-btn");
submitButton.on("click", () => {
  // A payment intent will be created on your backend server and the
  // payment_intent.client_secret will be passed to your frontend to
  // be used below.
  payments
    .confirmPayment(paymentIntentClientSecret, {
      payment_method: {
        billing_details: {
          name: "John Doe",
          address: {
            street: "350 Wellington St",
            city: "Ottawa",
            state: "ON",
            zip: "K1A 0N1",
            country: "CA",
          },
        },
        eft_debit: {
          account_holder_name: "John Doe",
        },
      },
    })
    .then(
      (paymentIntent) => {
        // Be sure to check the `status` and/or `last_payment_error`
        // properties to know if the charge was successful
        if (
          paymentIntent.status === "succeeded" ||
          paymentIntent.status === "processing"
        ) {
          alert("Payment successful");
        } else {
          const errMsg = paymentIntent.last_payment_error?.message;
          alert("Payment failed: " + errMsg);
        }
      },
      (err) => {
        // Typically an error with the request (>400 status code)
      }
    );
});

/**
 * Example assumptions:
 * The paymentRequestButton field has a div defined in the DOM
 * <div id="native-payment-element"></div>
 *
 */
const form = payments.form({
	payment_method_type: 'card',
});

const paymentRequest = payments.paymentRequest({
	total: {
		label: 'Payments tee',
		amount: secretData.amount,
	},
});

const prButton = form.createField('paymentRequestButton', {
	paymentRequest: paymentRequest,
});

paymentRequest.canMakePayment().then((result) => {
	if (result) {
		prButton.inject('#native-payment-element');
	} else {
		document.getElementById('native-payment-element').style.display = 'none';
	}
});

paymentRequest.on('paymentmethod', (ev) => {
	let paymentMethod = ev.paymentMethod;
	payments
		.confirmPayment(paymentIntentClientSecret, {
			payment_method: paymentMethod.id,
		})
		.then(
			(paymentIntent) => {
				// The payment intent confirmation occurred, but the
				// actual charge may still have failed. Check
				if (
					paymentIntent.status === 'succeeded' ||
					paymentIntent.status === 'processing'
				) {
					ev.complete('success');
					alert('Successul payment');
				} else {
					ev.complete('fail');
					const errMsg = paymentIntent.last_payment_error?.message;
					alert('Payment failed: ' + errMsg);
				}
			},
			(err) => {
				ev.complete('fail');
			}
		);
});