The Rye Pay JavaScript script is a replacement for Stripe and allows vaulting user credit card details for further transactions. When a customer enters their credit card information, the script automatically gets an environment token used for vaulting credit card data.

The script itself does not provide any UI, it should be done by developers. Instead, the script encapsulates the steps necessary to transfer payment information to Spreedly, get the token, and submit the cart with the required data.

When the customer submits their payment information, the payment details are automatically sent to the Spreedly backend where they are securely vaulted.

Once the payment details are securely stored in Spreedly, the frontend script returns the vaulted session token, which can be used to make purchases on the Shopify gateway. This process ensures that sensitive payment information is never stored or transmitted by the merchant, and is instead handled securely by Spreedly.

npm package: @rye-api/rye-pay

​
Usage

​
Installation

Rye Pay is published as a package on npm and can be installed using npm or yarn:

​
Quick start

Here is an example of how you can submit a cart via Rye Pay. This example assumes you have a Cart ready to be paid for. If you do not have a Cart then you can get one by following our “create a cart” tutorial. You will need a valid cart ID and shipping options in order to use Rye Pay to pay for orders.

1

Prepare a payment form

You’ll need to render some UI elements for the user to input their credit card information. You can use the following as a starting point; the id attribute here on the card number and CVV fields is important because it will be used to connect Rye Pay to those fields.

checkout-ui.html
<form id="payment-form">
  <label>First name</label>
  <input name="first_name" type="text" />

  <!-- Other payment-related fields... -->

  <label>Credit card number</label>
  <div id="spreedly-number" />

  <label>CVV</label>
  <div id="spreedly-cvv" />
</form>

The spreedly-number and spreedly-cvv elements are divs instead of inputs because they will be substituted for iframes when you initialize the ryePay object. Iframes are used to securely collect the credit card information in a PCI compliant manner by sandboxing the input fields from the rest of the page.

2

Initialize Rye Pay

Initialize the RyePay instance by passing the HTML ID you used for your card number and CVV fields.

Feel free to play around with the other auxiliary methods that Rye Pay offers. You can see additional documentation or explore the source code here.

import { RyePay } from '@rye-api/rye-pay';

const ryePay = new RyePay();
ryePay.init({
  generateJWT: () => {
    // This function should return a JWT that's used for Rye authentication
    // See docs for more info: https://docs.rye.com/jwt-authentication
  },
  numberEl: 'spreedly-number',
  cvvEl: 'spreedly-cvv',
  onReady: () => {
    // Customize card number field and CVV field
    ryePay.setStyle(
      'number',
      'display:inline; width: 30%; border-radius: 3px; border: 1px solid #ccc;',
    );
    ryePay.setStyle(
      'cvv',
      'display: inline; width: 30%; border-radius: 3px; border: 1px solid #ccc;',
    );
  },
  onErrors: (errors) => {
    for (const { key, message, attribute } of errors) {
      console.log(`new error: ${key}-${message}-${attribute}`);
    }
  },
  onIFrameError: (err) => {
    console.log(`iframeError: ${JSON.stringify(err)}`);
  },
  onCartSubmitted: (result) => {
    console.log(`cart submitted: ${JSON.stringify(result)}`);
  },
});
3

Pay for cart with Rye Pay

Call ryePay.submit to submit your cart. It is important that you have set the cartId to be the ID of the Cart you are paying for.

ryePay.submit({
  cartId: 'cartId', // IMPORTANT! Make sure the cartId is valid
  selectedShippingOptions: [],

  // You should read these values directly from your payment form.
  first_name: 'John',
  last_name: 'Doe',
  month: '04',
  year: '2025',
  address1: 'address1',
  address2: 'address2',
  zip: 'zip',
  city: 'city',
  country: 'country',
  state: 'state',
});

Note that we did not provide the credit card number or CVV to the submit call. The submit method will communicate with the secure iframes to obtain a token for the payment information. This token will be used to pay for the cart. At no point should your code ever have access to the plaintext credit card number or CVV. Handling these values yourself opens yourself to PCI compliance issues.

Was this page helpful?

Backend orderingHandling errors