Documentación

let toolkit = new RapydToolkit({    
              button_text: "Save",
                      /* Text that appears on the Save button. 
                          String. Maximum length is 16 characters.
                          Default is "Save". Optional. */
              button_color: "blue",
                      /* Color of the 'Save' button. String.
                          Standard CSS color name or hexadecimal code such as #323fff.
                          Default is the color that is returned in the 'merchant_color'
                          field of the response to 'Save Card Details Page'. Optional.*/
              id: "hp_card_bd334669c8a80bc68c124b144c350b7f",
                      /* ID of the 'Save Card Details Page' response. String. Required.*/
              close_on_complete: true,
                      /* Causes the embedded Rapyd Toolkit window to close
                          when the action is complete. Boolean. Default is 'true'. Optional.*/
              wait_on_payment_redirect: false,
                      /* Default is 'false'. Optional.
                         The iframe will close when the payment session has been completed.
                         The user will redirect to complete the 3DS Verification. */       
              page_type: “card_token”
                      /* Mandatory for save card details page
                          Default is "collection". */
                  style: {
                      global: {
                          fonts: [
                              "https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap",
                              {
                                  family: 'myCustomFont',
                                  src: '/fonts/myCustomFontRegular.woff2',
                                  fontWeight: 400
                              },
                              {
                                  family: 'myCustomFont',
                                  src: '/fonts/myCustomFontBold.woff2',
                                  fontWeight: 700
                              }
                          ]
                      },
                      save: {
                          base: {
                              backgroundColor: '#0000FF',
                                  // If passed for the 'Save' element, it will override the button_color field.
                              fontFamily: 'myCustomFont',
                                      
                          }
                      }  
          });

window.addEventListener('onLoading', (event) => {
                    console.log(event.detail.loading)
                    // Returns true or false depending on the loading state
                    // Client code.
})
window.addEventListener('onSaveCardDetailsPending', (event) => {
                    console.log(event.detail.loading)
                    // Returns only when the parameter wait_on_payment_redirect = true
                    // Returns ‘Payment’ object.
                    // Client code.
})
window.addEventListener('onSaveCardDetailsSuccess', (event) => {
                    console.log(event.detail)
                    // if wait_on_payment_redirect = true then customer payment method object returns,
                    //else Returns ‘Payment’ object.
                    // Client code.
})
        window.addEventListener('onSaveCardDetailsFailure', (event) => {
                    console.error(event.detail.error)
                    // Returns an error message from the API.
                    // Client code.
})